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.
[ {
"date" : "2024/1/10",
"content" : "",
"title" : ""
} ]
[ {
"date" : {
"start" : "2024/1/10",
"end" : "2024/1/11"
},
"content" : "",
"title" : ""
} ]
[ {
"date" : {
"start" : "2024/1/10",
"end" : "january 11 2024"
},
"content" : "",
"title" : ""
},{
"date" : "september 24 2024",
"content" : "",
"title" : ""
} ]
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
<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'
})
$('#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'
})
$('#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'
}
]
});
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 |
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 |
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) |
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 |
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 |