Calendar.js

CalendarJS is an open source library that provides using custom calendar element. It's lightweight, and depends only on moment js library (for localization).

• demo
• documentation

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>

Installation

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
}

Usage

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>

Configure

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;

Change date

###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

1. 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);

2. 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

1. showToday(); - set calendar config to show current day.
2. on(eventName,callback); - add new function to event listener.
3. off(eventName,callback); - remove function from event listener.
4. getRoot() - getting root element.
5. render() - generating view.
6. renderBody() - generating body view.
7. renderCaption() - generating caption view.
8. renderHeader() - generating header view.
9. selectDays(styles, range) - adding styles to the days in range.
10. trigger(eventName, params) - trigger functions.
11. dayTemplate(day) - sets view of day.
12. 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>

<script data-main="documentation_main.js" src="../library/vendor/requirejs.js"></script>

Development

npm run build                       // build files
npm run dev                         // run webpack dev server
npm run deploy                      // build files for production(uglify, minify)