Tutorial CLNDR.js - A jQuery Calender Plugin

Get the code Klik Here

CLNDR by by Kyle Stetz is a jQuery plugin for creating calendars with a different twist: it doesn't have any markup but instead the developer supplies an HTML template and the plugin provides a set of data to use within in.

Here's The Deal

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.
For a little backstory and a soft introduction to the concepts in CLNDR, check out this article: Calendars & Re- Re-inventing the Wheel.

Here's How You Use It

Just call clndr() on the container.

// 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.');
  }
}); 

source: http://kylestetz.github.io/CLNDR/