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