Nous allons voir comment créer un planning ou un emploi du temps avec le datepicker de la bibliothèque jQuery UI 1.7.2.

Tout d’abord, il faut télécharger la librairie avec le thème qui vous convient par ici.

Voici l’effet attendu :

On insère les librairies dans le <head></head> :

?View Code JAVASCRIPT
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>

Création des tableaux contenant les jours réservés et les jours demandés :

?View Code JAVASCRIPT
var joursReserves = [ [m, d, Y], [m, d, Y], etc... ]  ;
var joursDemandes = [ [m, d, Y], [m, d, Y], etc... ] ;

On implémente la fonction qui va colorer les jours en fonction des 2 tableaux créés précédemment :

?View Code JAVASCRIPT
function creerPlanning(date) {
 
    var estReserve = false ;
    var estDemande = false ;
 
   // Cherche les jours demandés
    if (joursDemandes != null) {
        for (i = 0; i < joursDemandes.length; i++) {
          if (date.getMonth() == joursDemandes[i][0] - 1 && date.getDate() == joursDemandes[i][1] && date.getFullYear() == joursDemandes[i][2]) {
			estDemande = true;
		  }
        }
    }   
 
    // Cherche les jours réservés
    if (joursReserves != null) {
        for (i = 0; i < joursReserves.length; i++) {
          if (date.getMonth() == joursReserves[i][0] - 1 && date.getDate() == joursReserves[i][1] && date.getFullYear() == joursReserves[i][2]) {
			estReserve = true;
		  }
        }
    }   
 
    if (estDemande)  return [false, 'class_css_jour_demande'] ;
    else if (estReserve) return [false, 'class_css_jour_reserve'] ;
    else return [false, 'class_css_jour_libre'] ;
 
}

Le style associé :

. class_css_jour_demande{ background-color: #FD7E10 !important; }
. class_css_jour_libre{ background-color: #BFD62F !important; }
. class_css_jour_reserve{ background-color: #D7D7D7 !important; }

Passons à la création du datepicker :

?View Code JAVASCRIPT
$(document).ready(function(){
	 $("#datepicker").datepicker({
	 	hideIfNoPrevNext: true,
		numberOfMonths: 3, 
		showStatus:true,
		firstDay: 6,
		dayNames: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'], 
		dayNamesMin: ['Di', 'Lu', 'Ma', 'Me', 'Je', 'Ve', 'Sa'], 
		monthNames: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
		prevText: 'Précédent',
		nextText: 'Suivant',
		showOtherMonths: false,
		beforeShowDay: creerPlanning // l'attribut le plus important
	});		
});

C’est l’attribut beforeShowDay qui permet d’effectuer des modifications sur chaque date affichée.

Voila pour ce petit tuto. Si vous avez des questions n’hésitez pas!

Mots-clefs :, , ,

12 résponses pour “Créer un planning avec le datepicker de jQuery UI”

  1. [...] Ce billet était mentionné sur Twitter par MILIN. MILIN a dit: Créer un planning avec le datepicker de #jQueryUI http://tinyurl.com/ykz8kaa [...]

  2. kakashi dit :

    bonjour,

    ton tuto est très intéressant, j’ai essayé le widget et il fonctionne parfaitement, mais je trouve que la taille du calendrier est trop importante, serais-tu comment la rétrécir ?

    merci d’avance

  3. doud dit :

    bonjour,

    tu veux diminuer la taille totale des 3 calendriers?

  4. cnaboul dit :

    bonjour

    Est ce qu’il serait possible d’avoir plus d’infos sur la manière de l’integrer ?
    par avance merci

  5. doud dit :

    Bonjour cnaboul

    Qu’est-ce qu’il te manque pour l’intégrer?

    Je vais essayer de mettre rapidement le script intégral en téléchargement.

  6. cnaboul dit :

    Bonsoir,

    Mes dates sont stockées dans une table. Sous quel format je dois les extraire pour les afficher dans mon datepicker?

    Par avance merci

  7. doud dit :

    Bonjour,

    si ton javascript est directement dans ta page PHP, tu peux générer dynamiquement les lignes suivantes:

    var joursReserves = [m, d, Y], [m, d, Y], etc… ;
    var joursDemandes = [m, d, Y], [m, d, Y], etc… ;

    Tu récupères tes dates en base de données, tu les décomposes et tu fais une boucle pour créer les [mois, jour, années]

    Si tu as externalisé ton JavaScript, tu peux récupérer tes données en AJAX.

  8. cnaboul dit :

    Bonjour

    Je te remercie pour tout, j’ai résolu mon petit souci. En fait, dans
    var joursReserves = [ [m, d, Y], [m, d, Y] ]; il fallait rajouter un crochet supplémentaire avant et aprés. J’ai développé le projet de booking pour joomla, donc en mvc pur.

    Cordialement
    Nabil

  9. doud dit :

    Exact! Petit oubli de ma part. Je viens de mettre à jour ces deux lignes.

    Merci pour cette remarque.

  10. flouch dit :

    Bonsoir

    Voilà presque 1h que je teste et re-teste et ça me donne page blanche…
    L’idée du script intégral en téléchargement n’était pas mauvaise ^^

  11. doud dit :

    Je manque de temps en ce moment mais je vais essayer de faire ça rapidement… ;)

  12. maxence dit :

    Bonjour,

    Des nouveautés sur le zip téléchargeable ?

    merci

Commentaires


× 4 = seize