Pendant quelques semaines j’ai cherché sur l’internet des exemples pour comprendre comment utiliser le fullCalendar Jquery dans mes applications web asp.net. Le jour où j’ai enfin compris le truc, j’ai décidé de publier un article en français sur le sujet. J’espère que quelqu’un pourra en profiter.

1. Configuration simple en 10 lignes de code

1.1 Ajouter les références jquery (css et javascript)

<link href="http://arshaw.com/js/fullcalendar-1.5.3/fullcalendar/fullcalendar.css"  rel="stylesheet" type="text/css" />
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/redmond/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
<script src="http://arshaw.com/js/fullcalendar-1.5.3/fullcalendar/fullcalendar.min.js" type="text/javascript"></script>

1.2 Écrire le code javascript pour initialiser le calendrier

$(document).ready(function() {
   $('#calendar').fullCalendar({
   // ici vous ajouterez les options et les fonctions
    })
 });

Le code précédant fait appel à un élément de votre page nommé ‘calendar’. Donc il faufra ajouter le code suivant dans le body de la page

<div id='calendar'></div>

En exécutant cette page vous devriez voir s’afficher un calendrier sans évènements.

2. Afficher des évènements

Maintenant il faudrait dire au calendrier qu’est ce qu’il doit afficher

Il s’attend à recevoir une liste d’événements sous la forme d’une chaîne de caractère en format json.

events: [{ title: 'Event1', start: '2013-11-11 08:00:00', end: '2013-11-11 10:00:00' },            { title: 'Event2', start: '2013-11-12 11:00:00', end: '2013-11-12 13:00:00'}]

Si vous ajouter ce code à l’intérieur du code précédant ceci devrait afficher 2 événements.

$(document).ready(function () {
 $('#calendar').fullCalendar({
       // ici vous ajouterez les options et les fonctions
  events: [{ title: 'Event1', start: '2013-11-11 08:00:00', end: '2013-11-11 10:00:00' },           { title: 'Event2', start: '2013-11-12 11:00:00', end: '2013-11-12 13:00:00'}]        })
 });

Mais le plus pratique c’est de lui indiquer l’adresse ou il doit aller chercher les événements, dans ce exemple nous utilisons une page .ashx.

events: ’loadEvents.ashx’

Ça pourrait être aussi un webservice. (voir article au sujet de Json, webService, webMethods)

3. Les options

Les options vous permettent de contrôler l’apparence et le comportement du calendrier. Par exemple.

$('#calendar').fullCalendar({
 weekends: false, // cache samedi et dimanche

   events: ’loadEvents.ashx’ //Adresse des événements a afficher
 });

Vous pouvez rajouter plusieurs options séparées par une virgule.

4. Les fonctions (Callbacks)

Les callbacks sont des options qui exécute une fonction chaque fois que certaines actions sont réalisées dans l’interface. L’exemple suivant définit ce qui doit se passer quand un utilisateur click sur le calendrier.

$('#calendar').fullCalendar({
    dayClick: function() {
           alert('Vous avez cliqué sur une journée'); //Affiche un message
         }
 });

Pami les plus utilisés on peut citer:

eventDrop // déplacement d’un évévement
eventResize //modifier la durée d’un événement
select // Click sur une case
drop //glisser un évènement externe sur le calendrier
eventRender  //peut-être utiliser pour afficher un tooltip par exemple

Pour connaître toutes les options disponibles vous pouvez consulter la documentation à l’adresse suivante: http://arshaw.com/fullcalendar/docs/display/