Voici un plugin jQuery s'appuyant sur les librairies ui.core et ui.datepicker. Il
permet de réaliser un planning et d'indiquer les périodes de disponibilité.
Les scripts + les images
Calendriersaisonnier_V1.0.0.zip
Exemple
$(function() {
$("#datepicker").datepicker($.datepicker.regional['fr']);
$("#datepicker").datepicker($.datepicker.regional['fr']);
$('#datepicker').datepicker('option',
$.extend({numberOfMonths: 3,
repeatDirection:0,
canSelectDate:false,
periodes:'2010-05-16;2010-07-23:2010-08-05;2010-08-18;2010-08-25;2010-09-05:2010-09-15'},
$.datepicker.regional['fr']));
});
Les options
#datepicker_H : id de l'élément 'div'
numberOfMonths : nombre de mois à afficher (par défaut:1)
repeatDirection : disposition (horizontale:0 (par
défaut), verticale:1)
canSelectDate : true(par défaut), rend le calendrier
'cliquable' et la sélection d'une date possible
periodes : dates ou plages de date 'marquées'
Comment faire...
...indiquer une ou plusieurs dates et/ou une ou plusieurs périodes de disponibilité
Utiliser l'option periodes; pour une période, préciser
une plage de dates au format aaaa-mm-jj:aaaa-mm-jj
et pour une journée, une seule date au format aaaa-mm-jj.
Séparer les dates et/ou les périodes par des ;
$(function() {
$("#datepicker").datepicker($.datepicker.regional['fr']);
$("#datepicker").datepicker($.datepicker.regional['fr']);
$('#datepicker').datepicker('option',
$.extend({numberOfMonths: 3,
repeatDirection:0,
canSelectDate:false,
periodes:'2010-05-16;2010-07-23:2010-08-05;2010-08-18;2010-08-25;2010-09-05:2010-09-15'},
$.datepicker.regional['fr']));
});
...positionner le planning à une date autre que la date du jour
utiliser la méthode setDate.
$('#datepicker').datepicker( 'setDate', new Date('2010','04', '15'))