## Event Calendars Documentation

#### Full Calendar

FullCalendar is a drag-n-drop jQuery plugin for displaying events on a full-sized calendar. It is customizable and open source.

###### 1. Initialize the plugin by referencing the necessary files:

                        <link rel='stylesheet' href='fullcalendar/fullcalendar.css' />
                        <script src='path/to/jquery.min.js'></script>
                        <script src='path/to/moment.min.js'></script>
                        <script src='path/to/fullcalendar.js'></script>

###### 2. Binding component to DOM element.

                        <div id='calendar'></div>

###### 3. Basic usage may look something like this.

                        $('#calendar').fullCalendar({
                            // put your options and callbacks here
                        })

Refer following links for usage:

Type | URL
--- | ---
Plugin Link | https://fullcalendar.io/
Github Page | https://github.com/fullcalendar/fullcalendar
Template Page | https://pixinvent.com/bootstrap-admin-template/robust/html/ltr/vertical-menu-template/full-calender-basic.html

Disclaimer: FullCalendar is great for displaying events, but it isn't a complete solution for event content-management. Beyond dragging an event to a different time/day, you cannot change an event's name or other associated data. It is up to you to add this functionality through FullCalendar's event hooks.

#### CLNDR

CLNDR is a jQuery plugin for creating calendars. Unlike most calendar plugins, this one doesn't generate markup. Instead you provide an Underscore.js HTML template and in return CLNDR gives you a wealth of data to use within it. CLNDR is free of opinions about markup and style: it is the high-speed chassis on which you build the vehicle of your dreams.

###### 1. Initialize the plugin by referencing the necessary files:

                        <script src='path/to/moment.min.js'></script>
                        <script src='path/to/underscore-min.js'></script>
                        <script src='path/to/clndr.js'></script>

###### 2. Binding component to DOM element.

                        <div id='calendar'></div>

###### 3. Basic usage may look something like this.

                        // this will use clndr's default template, which you probably don't want.
                        $('#calendar').clndr();

                        // so instead, pass in your template as a string!
                        $('#calendar').clndr({
                            template: $('#calendar-template').html()
                        });

                        // there are a lot of options. the rabbit hole is deep.
                        $('#calendar').clndr({
                            template: $('#calendar-template').html(),
                            events: [{
                                date: '2013-09-09',
                                title: 'CLNDR GitHub Page Finished',
                                url: 'http://github.com/kylestetz/CLNDR'
                            }],
                            clickEvents: {
                                click: function(target) {
                                    console.log(target);
                                },
                                onMonthChange: function(month) {
                                    console.log('you just went to ' + month.format('MMMM, YYYY'));
                                }
                            },
                            doneRendering: function() {
                                console.log('this would be a fine place to attach custom event handlers.');
                            }
                        });

Refer following links for usage:

Type | URL
--- | ---
Plugin Link | https://kylestetz.github.io/CLNDR/
Github Page | https://github.com/fullcalendar/fullcalendar
Template Page | https://pixinvent.com/bootstrap-admin-template/robust/html/ltr/vertical-menu-template/calendars-clndr.html