Personnaliser l’affichage de certains jours du datepicker de Jquery

Petit article pour personnaliser le datepicker de Jquery qui va ressembler à ça:

Exemple du datepicker modifié

Pour mon site de compte à rebours(que je présenterais plus tard), j’affiche la liste par année et puis par mois qui au clic permet d’accéder au compte à rebours voulu rapidement sur la page ce qui est pratique quand il y en a beaucoup comme on peut le voir ici:

Image de mon site de Compte à rebours

Puis je me suis dit qu’afficher un calendrier avec les jours où il y a un truck de prévu en valeur ça peut être pratique aussi, mais comment faire ? Et bien sûr ça peut servir à toute autre chose comme afficher ces vacances…^^.

Mon problème principal: transmettre les dates de ma BDD à mettre en valeur a Jquery et ensuite le plus important: comment modifier le jour en question chose que je ne savais pas comment faire.

Pour rappelle on déclare un datepicker basique comme ça:

$("#datepicker").datepicker();

Et on va le personnaliser un petit peut:

	$("#datepicker").datepicker({
		numberOfMonths: 3,
		stepMonths: 3,
		showButtonPanel: true,
		
		changeMonth: true,
		changeYear: true,
		showWeek: true,
		
		currentText: "Aujourd'hui",
		nextText: "Suivant",
		prevText: "Précédent"
	});

On va rajouter maintenant ce qui va modifier le datepicker:

	$("#datepicker").datepicker({
		numberOfMonths: 3,
		stepMonths: 3,
		showButtonPanel: true,
		
		changeMonth: true,
		changeYear: true,
		showWeek: true,
		
		currentText: "Aujourd'hui",
		nextText: "Suivant",
		prevText: "Précédent",
		
		beforeShowDay: creerCalendrier,
		onSelect: function(dateText) {
			tableau = dateText.split("-"); 
			// Redirection au clic:
			document.location.href= '#d' +tableau[0] + "_" + tableau[1] + "_" + tableau[2];
		}
	});

Le truck le plus important c’est beforeShowDayet qui va utiliser creerCalendrier() notre fonction la plus importante de toutes qu’on va voir plus tard!!!

En dessous on a le onSelect qui va nous permettre de récupérer le jour cliqué pour faire une redirection ou toute autre chose^^. Moi par exemple j’amène l’utilisateur avec une ancre sur la parte de la page qui contient les comptes à rebours du jour cliqué…

Ensuite je génère en PHP le tableau qui va contenir nos jours à mettre en valeur que va utiliser Jquery:

var joursEvenement = [ 
[<?=date('Y');?>, <?=date('m');?>, <?=date('d');?>, "css_day", "Aujourd'hui"],

[2016, 03, 09, "css_0", 'Autre'],
[2016, 03, 12, "css_0", 'Autre'],
[2016, 04, 05, "css_0", 'Autre'],
[2016, 06, 10, "css_0", 'Autre'],

[2016, 03, 18, "css_6", 'Série'],
[2016, 04, 10, "css_6", 'Série'],

[2016, 03, 09, "css_1", 'Film'],
[2016, 03, 16, "css_1", 'Film'],
[2016, 03, 23, "css_1", 'Film'],
[2016, 03, 30, "css_1", 'Film'],
];

Qu’est ce qu’on y voit ? Chaque ligne de notre tableau contient les valeurs d’un jour, chaque ligne de notre tableau contient plusieurs valeurs. La première étant l’année, ensuite le mois et pour finir le jour. Après on a la class a appliqué et pour finir un petit texte à afficher au survole du jour.

On peut voir que certaines lignes sont mises en valeur, pourquoi ? Je vais vous le dire: des doublons, car on peut avoir plusieurs événements le même jour et ça peut poser problème.

La ligne 2 est la date du jour qu’on affiche avec la class qui va avec, ainsi Jquery appliquera notre class sur le jour en question. Pour le moment rien d’anormal.
Les lignes suivantes sont celle qui ont l’événement « Autre », « Série » et pour finir « Film ».
Chaque jour étant unique, si une autre ligne de notre tableau comporte la même date, la précédente date sera écrasée et remplacée par la nouvelle date.

Pour conclure si on veut avoir plusieurs événements le même jour, on doit créer une sorte de priorité dans l’ordre des dates comme dans mon exemple.
Dans mon exemple on affiche la date du jour en premier qui sera remplacé par les dates avec le tag: « Autre », puis « Série » et pour finir « Film ». Donc attention à l’ordre d’affichage des dates!!!

Maintenant la fonction creerCalendrier():

    function creerCalendrier(date) {
        var result = [false];
		if (joursEvenement != null) {
			for (i = 0; i < joursEvenement.length; i++) {
				if (date.getMonth() == joursEvenement[i][1] - 1 && date.getDate() == joursEvenement[i][2] && date.getFullYear() == joursEvenement[i][0])
// true active le jour:
					{
						result = [true, joursEvenement[i][3], joursEvenement[i][4]];
					}
				else
					{
					}
            }
			return result;
        }  
    }

La fonction creerCalendrier() va récupérer les données de notre tableau joursEvenement et modifier les jours en conséquence. Les jours dont les dates ne sont pas dans le tableau ne seront pas « activés » et donc cliquables ce qui est mieux pour mettre en valeur les jours ou il y a un événement(voir photo début article).

Si vous voulez rendre tous les jours actif, il suffit de remplacer la ligne 2 de la fonction creerCalendrier():

var result = [true];

Ensuite on va exécuter cette fonction à chaque fois qu’on en a besoin pour appliquer le css:

	function css_ajout() {
		$("td.css_day").find("a").css({
			"color": "#969092", 
			"font-weight":"bold",
			"border" : "1px solid #969092",
			"border-radius" : "4px",
		});
		$("td.css_0").find("a").css({
			"color": "#1BE067", 
			"font-weight":"bold",
			"border" : "1px solid #1BE067",
			"border-radius" : "4px",
		});
		$("td.css_1").find("a").css({
			"color" : "#007CFF", 
			"font-weight" : "bold", 
			"background-color" : "#ffffff",
			"border" : "2px solid #007CFF",
			"border-radius" : "4px",
			"box-shadow" : "0px 0px 2px #000000",
		});
		$("td.css_6").find("a").css({
			"color": "#FF2700",
			"font-weight":"bold",
			"background-color" : "#ffffff",
			"border" : "2px solid #FF2700",
			"border-radius" : "4px",
			"box-shadow" : "0px 0px 2px #000000",
		});
	}

Pour finir on rajoute 2 bouts de code pour exécuter la fonction css_ajout():

	$(window).load(function(){
		css_ajout();
	});

	$("#datepicker").bind("mouseenter", function(){
		css_ajout();
	});

Et voila c’est finit!!!