Create calendar using CLNDR.js

Question

I would like to create a calendar with CLNDR.js, but I don’t know where to start ... I saw the github page: https://github.com/kylestetz/CLNDR#dependencies and also installed the github repository on my computer. But my problem is: how can I create a calendar without the examples shown in the github repository ... I mean, I did not understand the example codes on this page, and I would like to offer some suggestion "How to create". Can anybody help me? What files do I need, how do we implement ... etc. Etc.

Answer 1

I made you a JSFiddle example.

You will need jquery, underscore.js, moment.js and clndr.js. All this is written in the official README.

In short, create an empty code (container) and a temple inside the 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 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 });