Couplez votre calendrier avec la puissance AJAX avec le Framework JavaScript jQuery UI partie 3

On continue la suite de cette série de cours consacrés au Widget Calendrier du Framework jQuery UI.

Cette fois, vous allez apprendre à relier votre calendrier à un appel AJAX.

Vous pouvez ainsi récupérer des informations depuis PHP, une base de données MySQL…

[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]

Couplez votre calendrier avec la puissance AJAX avec le Framework JavaScript jQuery UI partie 3

Bonjour à tous et bienvenu sur Développement Facile.

Vous avez déjà eu deux cours précédents sur l’utilisation du widget calendrier avec jQuery UI, et là on va terminer avec un troisième cours pour finir de voir toutes les options.

Calendrier

il y a énormément d’options, de méthodes, et d’événements avec le calendrier, je vais vous montrer comment utiliser une image pour afficher le calendrier, cliquer sur une image ou sur un bouton pour afficher le calendrier, vous allez aussi voir des icônes pour naviguer entre les mois suivants et précédents, vous pourrez changer l’année si vous le souhaitez, on va voir différentes options yearRange pour l’éventail d’années, l’utilisateur peut aller jusqu’en 2040 ou non, on définit le nombre d’années dans le calendrier, le nombre de mois, vous pouvez tout définir dans les calendriers jQuery.
La date minimum, la date maximum, la date par défaut, une date de début une date de fin dans la sélection, on va voir tout ça ensemble, vous pouvez choisir de masquer les week-ends, l’utilisateur ne pourra pas sélectionner les week-ends dans le calendrier, vous pouvez exclure également certains jours, des jeudis, des vendredis, des jours fériés notamment, vous pouvez vraiment faire énormément de choses avec les calendriers jQuery, il y a tout qui s’affiche sur la vidéo, juste à côté, l’option showWeek c’est pour ajouter une colonne pour afficher le numéro de la semaine, très pratique aussi, pour certains sites Internet, vous pouvez définir les jour de la semaine, le premier pour un lundi etc. Vous choisissez comme vous le souhaitez, vous pouvez tout paramétrer dans le calendrier jQuery.

Vous pouvez associer un calendrier avec Ajax, pour vérifier la validité d’une date, avec les événements, vous écoutez un événement quand l’utilisateur clique sur une date, vous pouvez appeler un fichier PHP qui va vérifier en base de données s’il reste des places disponibles par exemple, pour des trains, des avions, en fonction de la date choisie par l’utilisateur.

Et vous pouvez ajouter, bien évidemment, des animations lors de l’ouverture et la fermeture d’un calendrier avec duration, une durée en millisecondes, showAnim l’animation que vous voulez voir, et des options pour l’animation.

Bien évidemment vous pouvez complètement personnaliser l’affichage de votre calendrier, il suffit de vous rendre sur l’adresse qui est écrit là, que vous devez connaitre par cœur, je vous l’ai expliqué dans le premier cours pour personnaliser les thèmes jQuery à l’image de votre site, donc jqueryui.com/themeroller, tout simplement.

Exemple de Calendrier

Là je vais vous montrer un exemple de code source pour terminer ce cours sur les calendriers. Alors vous mettez, là c’est pour le mettre en français le calendrier, en fait déjà vous indiquez la langue française pour le calendrier, on le récupère sur Google librairie, setDefaut, par défaut tous les calendriers seront affichés en français, voilà, remarquez la petite animation qu’il y a pour l’ouverture et la fermeture du calendrier. Je vais vous montrer. Donc toutes les options sont commentées pour une image, le bouton image du calendrier, voilà, ça permet d’afficher le calendrier en cliquant sur une image plutôt que sur le champ, voilà, il y a plusieurs calendriers avec plusieurs formats d’affichages différents, en anglais, en français, vraiment vous pouvez tout définir pour afficher le calendrier avec du texte, un cookie, choisir l’année, en Unix Timestamp. Vous pouvez vraiment tout définir pour afficher votre calendrier, tout est ici, tout est commenté, le nombre d’années disponibles, il peut allez que jusqu’en 2017, il ne peut pas aller au-delà dans l’affichage de ce calendrier, le choix de ne pas afficher les week-ends, tous les weeks ends sont masqués, on affiche le numéro de la semaine également, très pratique, des icônes pour les mois suivants précédents, ça change des précédents cours que je vous ai montrés, à travers les trois cours que vous avez eu sur les calendriers, vous avez tout ce qu’il faut pour configurer et personnaliser complètement vos calendriers, la date minimum, par exemple, une date de départ, Sunday, date de retour, date de départ ici, le 8 mai, la date de retour sera forcément, elle ne peut pas être avant c’est désactivé, par exemple on prend une date de départ au 30 mai, voyez que toutes les dates sont automatiquement désactivées, donc il faut aller sur le mois suivant, ça ça se gère sur l’événement onClose, on change la date du calendrier, la date minimum avec date, que je vous ai expliquée, comme option tout à l’heure, juste avant l’exemple pratique, sur le onSelect on peut utiliser Ajax, pour appeler un script PHP, et donc le script PHP donne votre réservation est confirmée, votre réservation du 16/05 est confirmée, ça affiche la date ici, votre réservation du 30 est confirmée, tous simple, un script PHP, on récupère la date et on l’affiche.
Vous pouvez faire des choses beaucoup plus évoluées, bien évidemment, c’est ici, on fait un appel Ajax, et complet, c’est encore un événement, dès que c’est complet on affiche le texte, soit une erreur, soit le texte de retour que l’on a pu récupérer. Et là c’est l’implémentation de tous les calendriers, comme vous avez remarqué on aurait pu tout mettre dans une même fonction, on aurait pu tout mettre ici, mais déjà il y a beaucoup de code et je préfère séparer mais vous pouvez mettre tout au même endroit. Ce que je vous conseille, c’est de bien séparer les choses, c’est plus simple pour la maintenance derrière, la maintenance du code, et l’évolution du code.

Votre plan d’actions !

Maintenant vous avez vu énormément de possibilités de personnalisation des calendriers, j’espère que vous avez tout ce qu’il faut pour les utiliser sur vos sites Internet, les calendriers jQuery, si vous avez des questions vous pouvez les poser sous ce cours vidéo, comme d’habitude, vous retrouverez sous le cours vidéo Développement Facile, sur le cours Développement Facile directement sous cette vidéo, le code source commenté en téléchargement, et si vous voulez aller plus loin, je vous invite à regarder la deuxième vidéo qui est au-dessus ou en-dessous, il y a une image, un lien qui vous invite à voir la deuxième vidéo dans laquelle je vous propose de vous aider personnellement pendant quatre mois à maitriser les Framework jQuery, l’extension jQuery UI, et le Framework Dojo à travers une multitude d’exemples pratiques, et je serais là pour vous accompagner, vous aider à devenir, à progresser dans vos développements et à coder beaucoup plus rapidement et efficacement avec ces Frameworks. Cliquez sur l’image vidéo 2 sur l’image au-dessus ou en-dessous, il y a un lien, en attendant je vous dis à très bientôt sur Développement Facile.

[/ppmtoggle][/ppmaccordion]

Téléchargez l’exemple du widget calendrier

Retrouvez le code source commenté du widget calendrier du Framework jQuery UI.

Montrez-moi vos implémentations AJAX du widget calendrier

Utilisez les commentaires, ci-dessous, pour partager le code source et les fonctionnalités AJAX associées à votre widget calendrier.