Créer un calendrier dynamique en Javascript avec FullCalendar

Posté par seiyar81 le 24 octobre 2010 | Laisser un commentaire (4)

Comme on le sait jQuery possède un nombre de plugins tout simplement énorme ! Il y a certes du tri à faire et certains plugins tente de réinventer la roue, en vain…

FullCalendar ne fait pas partie de ceux-là. Vous avez besoin d’ajouter un calendrier permettant une gestion des évènements, un affichage par jour/semaine/mois, et thèmable ? Alors il vous faut FullCalendar !

Le plugin offre plusieurs vues pour afficher les évènements : par jour, semaine, mois avec des versions type agenda ou basique.
Un de ces autres points forts c’est d’être compatible avec jQuery UI et il s’adapte ainsi à votre thème tout seul, plutôt pratique.
Une extension lui permet même de récupérer les évènements de votre Google Calendar !

Voyons voir un peu comment le mettre en place :

	$(document).ready(function() {
	
		var date = new Date();
		var d = date.getDate();
		var m = date.getMonth();
		var y = date.getFullYear();
		
		$('#calendar').fullCalendar({
			header: {
				left: 'prev,next today',
				center: 'title',
				right: 'month,agendaWeek,agendaDay'
			},
			theme: true,
			editable: true,
			events: [
				{
					id: 1
					title: 'Aller sur Yriase.fr',
					start: new Date(y, m, 28),
					end: new Date(y, m, 29),
					url: 'http://www.yriase.fr/',
					allDay: true
				},
				{
					id: 2
					title: 'Nourrir le chat !',
					start: new Date(y, m, 28, 8, 0),
					end: new Date(y, m, 29, 8, 15),
					allDay: false
				}
			]
		});
		
	});

Ce bout de code plutôt simple, inialise votre Calendrier avec 2 évènements et l’adaptation au thème jQuery UI. Le proriété editable indique que les évènements ne peuvent être déplacés (peut être remplacée par la propriété editable de chanque évènement).

Comme vous pouvez le constater les évènements sont en réalité des objets JSON, auxquels on peut donc ajouter des proriétés.
Ainsi on peut par exemple ajouter une propriété type qui pourrait nous permettre de filtrer les évènements par type.
Ce qui serait encore mieux serait de pouvoir ajouter un bouton ou ensemble de boutons pour filtrer, qui soient intégrés au calendrier.
Ca tombe bien, j’avais prévu d’expliquer comme faire !

Le but de la manoeuvre est simple, ajouter des boutons au calendrier simplement en modifiant les valeurs dans la déclaration de la propriété header. Par exemple :

			header: {
				left: 'prev,next today',
				center: 'title',
				right: 'all,mandatory,not_mandatory month,agendaWeek,agendaDay'
			}

On ajoute ici trois boutons donc all,mandatory, not_mandatory pour afficher/cacher les évènements obligatoires ou pas. Pas très original mais c’est bon pour l’exemple !

Maintenant il va nous falloir modifier un petit peu le fichier fullcalendar.js.
Aux alentours de la ligne 80, la déclaration de la propriété buttonText.
Ajouter au tableau les lignes :
all: ‘All’,
mandatory: ‘Mandatory’,
not_mandatory: ‘Not Mandatory’,

Ensuite vers la ligne 710 cherchez :

              if (publicMethods[buttonName]) {
			buttonClick = publicMethods[buttonName];
	      }
	       else if (views[buttonName]) {
			buttonClick = function() {
			  button.removeClass(tm + '-state-hover');
			  changeView(buttonName)
			};
	     }

et ajoutez après :

else {
      buttonClick = function() {
	button.removeClass(tm + '-state-hover');
        button.addClass(tm + '-state-active');
        if(button.hasClass('fc-button-all')) {
              $('.fc-button-mandatory').removeClass(tm + '-state-active');
              $('.fc-button-not_mandatory').removeClass(tm + '-state-active');
        } else if (button.hasClass('fc-button-mandatory')) {
              $('.fc-button-all').removeClass(tm + '-state-active');
              $('.fc-button-not_mandatory').removeClass(tm + '-state-active');
        } else if (button.hasClass('fc-button-not_mandatory')) {
              $('.fc-button-all').removeClass(tm + '-state-active');
              $('.fc-button-mandatory').removeClass(tm + '-state-active');
        }
      };
 }

Cette partie s’occupe de marquer comme actif le bouton cliqué.
Enfin juste après se trouve cette partie :

if (icon) {
	button = $("
"); } else if (text) { ...

Mettez dans le corps du else if(text) :

if(buttonName == 'all') 
  button = $("");
else
  button = $("");

Maintenant il ne vous reste plus qu’a mettre en place les fonctions pour filtrer les évènements selon leur type.
Mais ça ce sera pour une autre fois !

Catégorie: Développement Web, Javascript | Laisser un commentaire (4)


4 commentaires pour “Créer un calendrier dynamique en Javascript avec FullCalendar”

  • Bonjour,
    Comment peut on mettre des drag&drop pour les événements afin de les déplacer à l’heure qu’on veut et merci.

  • Oups, désolé du retard de ma réponse, à première vue le plus simple est de déplacer l’évènement en vue “Mois” ou “Semaine” puis de se mettre en vue “Jour” pour le déplacer à l’heure voulue.
    Pour le faire directement via la vue “Mois” il faudra mettre en place une solution custom.

  • Heu … moi ce qui m’intéresserai surtout de savoir c’est comment sauvegarder notre calendrier une fois qu’on a fait des modifs, non ?

    Hors google si possible…

    Merci d’avance, s’il n’est pas trop tard (1an ^^)

  • Jamais trop tard 🙂
    A vrai dire ça fait partie des sujets qui sont en attente depuis quelques temps.
    J’essaie de poster un exemple complet demain sur l’affichage/mise à jour d’évènements via une base de données.

Laissez un commentaire