beneroch-calendar v2.0.5

Calendar

Description

You can find demo here

Home made calendar that covers events and datepicking. Every event on a day in the calendar returns a date object of the current target. Note that even the header triggers these events, with a null object as a date.

For date picking, you can add a onDayClick event and then manage the date object. ( @see onDayClick option below ) Events are passed as a JSON object and each requires a title and a date. The date parameter is mixed, which means it can be a string, a timestamp or an object. It'll be an object if the event has a beginning and an end.

Simple date

[ {
   "date" : "2024/1/10",
   "content" : "",
   "title" : ""
} ]

Complex date

[ {
   "date" : {
       "start" : "2024/1/10",
       "end" : "2024/1/11"
   },
   "content" : "",
   "title" : ""
} ]

Multiple date formats

[ {
   "date" : {
       "start" : "2024/1/10",
       "end" : "january 11 2024"
   },
   "content" : "",
   "title" : ""
},{
   "date" : "september 24 2024",
   "content" : "",
   "title" : ""
} ]

Easy to use

The calendar is easy to use and only requires minimal options. Everything is yet customizable. The calendar builds himself on a DOM object (DIV) and fits the boundaries of that object. Let's see some examples

Given the following div:

<div id="calendar-widget"></div>

Build a calendar without jQuery

let opts = {};
let domElement = document.getElementById('calendar-widget');
let calendar = new bCalendar(domElement, opts); // Same has $('#calendar-widget').calendar(opts)

Build a french calendar (see default options)

$('#calendar-widget').calendar()

Build an english calendar

$('#calendar-widget').calendar({
    lang : 'en'
})

Add unsupported language

$('#calendar-widget').calendar({
    lang : 'customLang',
    translations: {
        months: {
            customLang : ['January', 'February', 'March', 'April','May', 'June', 'July', 'August', 'September','October', 'November', 'December']
        },
        days: {
            customLang : ['S', 'M', 'T', 'W', 'T', 'F', 'S']
        },
        nextMonthLabel : {
            customLang : 'Next Month'
        },
        prevMonthLabel : {
            customLang : 'Previous Month'
        }
        nextYearLabel : {
            customLang : 'Next Year'
        },
        prevYearLabel : {
            customLang : 'Previous Year'
        }
    }
})

Start in month view display

$('#calendar-widget').calendar({
    mode: 'month'
})

Add events

$('#calendar-widget').calendar({
    events : [
        {
            date:"2024/01/16",
            title: 'Test title',
            content : 'Well, turns out on that date we uploaded the plugin'
        },
        {
        date:{
            start: "2024/01/16",
            end: "february 1 2024"
        },
            title: 'Doc title',
            content : 'We also u"<>pdated the doc accordingly'
        },
        {
            date:{
                start : "2024/01/17",
                end : "2024/01/27"
            },
            title: 'Changes',
            content : 'We might add s\0ome changes during theses days'
        }
    ]
});

API (jQuery)

Options

translations

classes

callbacks