créer un calendrier à l'aide de CLNDR.js

Je voudrais créer un calendrier avec CLNDR.js mais je ne sais pas comment commencer ...
J'ai vu la page github : https://github.com/kylestetz/CLNDR#dependencies
et installé le dépôt github sur mon pc aussi.
Mais mon problème est : Comment puis-je créer un calendrier sans les exemples présentés sur le dépôt github...
Je veux dire, je ne comprenais pas les exemples de codes sur là page, et j'aimerais avoir quelques suggestions sur "créer".
Quelqu'un peut m'aider s'il vous plaît ?
Les fichiers dont j'ai besoin, comment pouvons-nous mettre en œuvre... etc etc

OriginalL'auteur Damiii | 2014-03-07

  1. 23

    J'ai fait un exemple pour vous sur JSFiddle.

    Vous aurez besoin de jquery, underscore.js, moment.js et clndr.js lui-même. C'est tout écrit dans le officiel README.

    En bref, créer un div vide (contenant) et un templete à l'intérieur du code HTML:

    <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>

    Puis ajouter un peu de JS comme décrit dans la 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
});
    Merci mais pouvez-vous modifier et de faire de ce réactif sur les différents écrans, il est statique?

    OriginalL'auteur mie