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.
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:
<divid="calendar-widget"></div>
Build a calendar without jQuery
letopts={};letdomElement=document.getElementById('calendar-widget');letcalendar=newbCalendar(domElement,opts);// Same has $('#calendar-widget').calendar(opts)
$('#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