CalendarJS is an open source library that provides using custom calendar element. It's lightweight, and depends only on moment js library (for localization).
Try it out:
<div id="firstContainer">
</div>
<script>
var firstContainer = document.getElementById('firstContainer');
var firstCalendar = new Calendar(firstContainer);
firstCalendar.getRoot().classList.add('table', 'table-striped');
</script>
Download the Calendar library from here: https://github.com/marzubov/TeamvoyCalendar
Or with install with bower: bower install teamvoycalendar
And include it like this:
<script data-main="../main.js" src="../vendor/requirejs/require.js"></script>
//and in main.js
require.config({
paths: {
"moment": "../library/vendor/moment/min/moment-with-locales",
"calendar": "../dist/scripts/calendar",
"date_range_picker": "../dist/scripts/date_range_picker"
}
});
require(["calendar", "date_range_picker"],
function(Calendar, DateRangePicker) {
//and your logic goes here
}
The typical way of using calendar is by creating a container element and call new Calendar(containerElement):
<div id="containerElement">
</div>
<script>
var containerElement = document.getElementById('containerElement');
new Calendar(containerElement);
</script>
Also you can create with configureObject:
<div id="containerElement">
</div>
<script>
var containerElement = document.getElementById('containerElement');
new Calendar(containerElement, {year: 2014, month: 5,
firstDayOfWeek: "Mon", locale: "en", weekends:["Sat","Sun"]});
</script>
There are two ways to configure calendar. You can configure your calendar, by passing configureObject when calendar is created.
<div id="containerElement">
</div>
<script>
var containerElement = document.getElementById('containerElement');
new Calendar(containerElement, {year: 2014, month: 5, locale: "fr"});
</script>
But if you have created component you can set him new configure object.
newConfig = {year: 2014, month: 5, firstDayOfWeek: "Sun" ,
locale: "uk", weekends:["Sat","Sun"]}
calendar.config = newConfig;
###Config Object - optional parameter with fields:
config = {
year: 2014, // current year, type: number.
month: 5, // month - current month, type: number.
firstDayOfWeek: "Sun", // firstDayOfWeek - first day of week in calendar,
//starts with upcased letter
locale: "en", // locale - language of calendar, short name,
// type: string. Example: 'monday'.
weekends:["Sat","Sun"] //array of weekends days.
//starts with upcased letter
}
var calendar = new Calendar(containerElement, config);
###Listen to events
- monthChanged - occur when config month data changed.
function monthHandler(month){
console.log(month); //it will log new month
}
//listening to the monthChanged event
Calendar.on('monthChanged', monthHandler);
- daySelected - occur when selecting day changed.
function daySelectedHandler(day){
console.log(day); //it will log selected day
}
//listening to the daySelected event
Calendar.on('daySelected', daySelectedHandler);
###Calendar methods
- showToday(); - set calendar config to show current day.
- on(eventName,callback); - add new function to event listener.
- off(eventName,callback); - remove function from event listener.
- getRoot() - getting root element.
- render() - generating view.
- renderBody() - generating body view.
- renderCaption() - generating caption view.
- renderHeader() - generating header view.
- selectDays(styles, range) - adding styles to the days in range.
- trigger(eventName, params) - trigger functions.
- dayTemplate(day) - sets view of day.
- generateModel(config) - generates calendar model.
##More examples
You can use calendar to create date range pickers:
<div id="containerElement">
</div>
<script>
var firstContainer = document.getElementById('firstContainer');
var firstDateRangePicker = new DateRangePicker(firstContainer);
</script>
npm run build // build files
npm run dev // run webpack dev server
npm run deploy // build files for production(uglify, minify)