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:

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: