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)

Name | Description --------------------------------|---------------------------------------------------------------------------------------------------------------------------- destroy | Destroys the calendar by removing all HTML and LISTENERS next | Goes to next month prev | Goes to previous month addEvent | Adds one events to the currently existing events addEvents | Adds multiple events to the currently existing events setEvents | Sets the calendar events destroying all previously added events

Options

Name | Type | Description --------------------------------|-------------|------------------------------------------------------------------------------------------------------------ startDate | Date Object | Current display date ( Default: today ) showStartDate | Boolean | Show indicator of the startDate ( Default: true ) lang | string | Current display language mode | string | Current display mode. Either month or date ( Default: date ) useControls | boolean | Auto output the controls for next and prev month if set to true (default: true) allowYearView | boolean | Define if you can see the year view (default: false, unless mode is set to 'year') allowMonthView | boolean | Define if you can see the month view (default: false, unless mode is set to 'month') events | object | JSON of all the events - Events can have pretty much any data, but requires at least a title and a date displayEventsNumber | boolean | Define if you can to display the number of events on the calendar (default: true) displayAdjacentMonthDates | boolean | Define if you want to display the adjacent month dates or empty boxes (default: true) eventsNumberTemplate | string | Templates used to display the number of events on a day / year / month

translations

Name | Type | Description --------------------------------|---------------|------------------------------------------------------------------------------------------------------------ months | object | Labels for months, by lang, in an array starting from JANUARY to DECEMBER days | object | Labels for days, by lang, in an array starting from SUNDAY to SATURDAY nextMonthLabel | object | Labels for skip month's title, by lang, in an array (view default) prevMonthLabel | object | Labels for skip month's title, by lang, in an array (view default) nextYearLabel | object | Labels for skip year's title, by lang, in an array (view default) prevYearLabel | object | Labels for skip year's title, by lang, in an array (view default)

classes

Name | Type | Description --------------------------------|---------------|------------------------------------------------------------------------------------------------------------ mainCalendarClass | string | The main calendar class, set on the DIV object that wraps it all calendarTitleClass | string | The calendar title class, set on the H1 object calendarControlsClass | string | The calendar controls wrapper class, set on the DIV object that wraps controls calendarControlsPrevClass | string | The calendar previous month button class, set on the ANCHOR object calendarControlsNextClass | string | The calendar next month button class, set on the ANCHOR object calendarTableClass | string | The calendar table class, set on the TABLE object calendarTableHeaderClass | string | The calendar table header class, set on the TR object that contains the day's labels calendarRowClass | string | The calendar row class, set on all the other TR object as opposed to 'calendarTableHeaderClass' calendarDayClass | string | The calendar day class, set on all TD inside the calendar (ALSO in the header) calendarMonthClass | string | The calendar month class, set on all TD inside the calendar (ALSO in the header) calendarLinkClass | string | The calendar link class, set on the ANCHOR object inside a day calendarTextClass | string | The calendar text class, set on the object inside the object of a day (calendarLinkClass) calendarEventClass | string | The calendar event class, set on the TD wrapping the day with an event calendarEmptyDayClass | string | The calendar empty day class, set on the TD wrapping a day with no date calendarCurrentDayClass | string | The calendar current day class, set on the td wrapping today's date calendarSelectedDayClass | string | The calendar selected day class, set on the td wrapping the selected date calendarSelectedMonthClass | string | The calendar empty day class, set on the TD wrapping a day with no date

callbacks

Name | Type | Description --------------------------------|---------------|------------------------------------------------------------------------------------------------------------ onDayMouseOver | function | Triggered when moving mouse over a day onEventMouseOver | function | Triggered when moving mouse over a day with an event onDayMouseOut | function | Triggered when moving mouse out of a day onEventMouseOut | function | Triggered when moving mouse out of a day with an event onDayClick | function | Triggered when clicking on a day onEventClick | function | Triggered when clicking on a day with an event onPrev | function | Triggered when clicking on the previous button while in date mode / Added to the regular event @see changeMonth onPrevYear | function | Triggered when clicking on the previous button while in month mode onNext | function | Triggered when clicking on the next button while in date mode / Added to the regular event @see changeMonth onNextYear | function | Triggered when clicking on the next button while in month mode onGotoMonthView | function | Triggered after switching to the month view onGotoDateView | function | Triggered after switching to the date view