Default calendar
This is the most basic eample with html template and events to be shown on the calendar.

Example markup:


                                              <div id="clndr-default"></div>
                                

JS code example:


                               $('#calendar').clndr({
  template: $('#clndr-default').html(),
  events: [
    { date: '2017-04-10', title: 'Robot war', location: 'Center of Science' }
  ]
  });
                                 
Options in CLNDR
Available options in CLNDR plugins and their exaples
Adjacent Month and day
These two options are used to show show and change months showAdjacentMonths and adjacentDaysChangeMonth. Edges of other months should be visible and clicking them should switch the month.
Multiday Event
This example demonstrates multi-day events (12th - 17th, 24th - 27th).
Constraints
This example demonstrates start and end constraints. (the 4th of this month to the 24th of this month).
Six Rows calendar
The forceSixRows option, which should make a six-row calendar regardless of the length of each month.
Selected Date
It Should highlight the last date you clicked on.