seiyar81 le 24 octobre 2010 |
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 !
Obiwanpat dans 
Ride dans 
papich dans 
MatMerz dans 
