Créer un planning avec le datepicker de jQuery UI

Rédigé par doud | 1 avril, 2010 dans jQuery UI
11 commentaires »

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é :

?View Code CSS
. 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 :, , ,

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

  1. Les tweets qui mentionnent Créer un planning avec le datepicker de jQuery UI | Développement Web -- Topsy.com dit :
    9 avril 2010 à 19 h 27 min

    [...] 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 :
    17 mai 2010 à 0 h 40 min

    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 :
    11 juin 2010 à 22 h 58 min

    bonjour,

    tu veux diminuer la taille totale des 3 calendriers?

  4. cnaboul dit :
    20 septembre 2010 à 16 h 08 min

    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 :
    23 septembre 2010 à 18 h 20 min

    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 :
    2 octobre 2010 à 3 h 53 min

    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 :
    2 octobre 2010 à 18 h 27 min

    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 :
    3 octobre 2010 à 14 h 51 min

    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 :
    3 octobre 2010 à 16 h 13 min

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

    Merci pour cette remarque.

  10. flouch dit :
    16 novembre 2010 à 1 h 25 min

    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 :
    24 novembre 2010 à 18 h 27 min

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

Commentaires


- 7 = two