create a calendar using CLNDR.js

Question

I would like to create a calendar with CLNDR.js but i don't know how to begin ... I saw the github page : https://github.com/kylestetz/CLNDR#dependencies and installed the github repository on my pc also. But my problem is : How can i create a calendar without the examples shown on the github repository... I mean, i didn't understand the examples codes on there page, and i would like to have some suggestion on "How to create". Can anyone help me please ? Which files i need, how do we implement... etc etc

Answer 1

I made an example for you on JSFiddle.

You'll need jquery, underscore.js, moment.js and clndr.js itself. It's all written in the official README.

In brief, create an empty div (container) and a templete inside HTML code:

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

<script id="calendar-template" type="text/template">
  <div class="controls">
    <div class="clndr-previous-button">&lsaquo;</div><div class="month"><%= month %></div><div class="clndr-next-button">&rsaquo;</div>
  </div>

  <div class="days-container">
    <div class="days">
      <div class="headers">
        <% _.each(daysOfTheWeek, function(day) { %><div class="day-header"><%= day %></div><% }); %>
      </div>
      <% _.each(days, function(day) { %><div class="<%= day.classes %>" id="<%= day.id %>"><%= day.day %></div><% }); %>
    </div>
  </div>
</script>

Then add some JS as described in the docs:

var currentMonth = moment().format('YYYY-MM');
var nextMonth    = moment().add('month', 1).format('YYYY-MM');
var events = [
  { date: currentMonth + '-' + '10', title: 'Persian Kitten Auction', location: 'Center for Beautiful Cats' },
  { date: currentMonth + '-' + '19', title: 'Cat Frisbee', location: 'Jefferson Park' },
  { date: currentMonth + '-' + '23', title: 'Kitten Demonstration', location: 'Center for Beautiful Cats' },
  { date: nextMonth + '-' + '07',    title: 'Small Cat Photo Session', location: 'Center for Cat Photography' }
];

$('#mini-clndr').clndr({
  template: $('#calendar-template').html(),
  events: events,
  clickEvents: {
    click: function(target) {
      if(target.events.length) {
        var daysContainer = $('#mini-clndr').find('.days-container');
        daysContainer.toggleClass('show-events', true);
        $('#mini-clndr').find('.x-button').click( function() {
          daysContainer.toggleClass('show-events', false);
        });
      }
    }
  },
  adjacentDaysChangeMonth: true
});