Fullcalendar est un plugin jQuery très célèbre pour la gestion des rendez-vous du côté client. Il peut interagir avec des frameworks Javascript. Avec les fonctionnalités fournis par AngularJs 1, nous pouvons facilement interagir avec fullcalendar, enregistrer des dates de rendez-vous via un Web Service en utilisant l’Ajax. Mais dans notre article, nous allons voir comment le faire avec Angular 2. (Télécharger ou cloner les exemples)
Il y a deux approches que nous allons étudier avec le plugin Fullcalendar de jQuery:
- La séparation de la logique de jQuery et Angular 2
- L’utilisation d’Angular 2 seulement.
Méthode 1: Séparer la logique de jQuery et Angular 2.
Comment ça marche ?
Le but de cette méthode est de créer l’instanciation ainsi que les méthodes propres au plugin dans un fichier Javascript à part. Pour cela, nous allons utiliser le Javascript Orienté Objet (Création de classes et méthodes).
Il y a quelques méthodes pour manipuler les Objets Javascript mais j’ai choisi le prototyping.
Nous allons aussi utiliser la création d’un événement personnalisé de jQuery pour envoyer et écouter au niveau d’Angular 2 s’il y a une action déclenchée par l’utilisateur dans le fullcalendar.
Dans le fichier Javascript (jq-fullcalendar.js)
Notre classe s’appelle JQFullcalendar dans laquelle nous avons implémenté quelques méthodes.
- JQFullcalendar.prototype.draw: pour l’instanciation de fullcalendar
- JQFullcalendar.prototype.onJqCustomEvent: pour l’écoute de notre évènement personnalisé en utilisant la fonction .on() de jQuery.
- JQFullcalendar.prototype.renderEvents: pour l’ajout d’une date dans fullcalendar si l’utilisateur a créé.
- JQFullcalendar.prototype.method: pour le déclenchement des méthodes propres à fullcalendar.
Nous voyons dans l’option les méthodes select et viewRender de fullcalendar qui contiennent ces instructions :
Et
C’est avec la méthode trigger() de jQuery que nous créerons nos propres évènements.
Notre fichier Javascript et la classe sont maintenant créés, passons dans notre fichier Angular 2.
Dans, app.component.ts:
Sur les lignes suivantes,
nous instancions notre classe JQFullcalendar.
Maintenant, nous avons accès à toutes les méthodes et propriétés de la classe JQFullcalendar que nous avons créé manuellement.
Ce qui nous intéresse le plus commence sur la ligne ngAfterViewInit(). C’est dans cette fonction que nous allons exécuter nos actions.
ngAfterViewInit() est une méthode de la classe AfterViewInit. Elle s’exécute quand la vue sera totalement initialisée.
Examinons de près le code:
1 - Premièrement, nous créons notre instance de fullCalendar pour l’affichage côté client avec la ligne suivante:
2 - Ensuite, nous écoutons l’événement émis par notre application. Par exemple, si l’utilisateur effectue une action, tel que l’ajout d’une date, alors la ligne suivante sera exécutée:
L’utilisation des évènements personnalisés est très pratique parce qu'à chaque fois qu’il y a une manipulation dans notre agenda, nous recevons comme un genre de notification, et ensuite, nous faisons notre manipulation selon nos besoins. Cela se passe dans la ligne:
Donc, nous sommes capables d’afficher les données retournées par le serveur ou le Web Service s'il y a une requête.
Les avantages et inconvénients de cette méthode
Avantages
- Tout est organisé car nous avons séparé la logique de notre classe JQFullcalendar d’ Angular 2. Ce que nous avons fait dans Angular 2, c’est juste utiliser les méthodes de notre classe.
- La mise en place des effets visuels du site peut être intégrée lors de l’intégration des pages en utilisant le POO.
- Très pratique pour les personnes qui débutent avec Angular 2 et qui veulent interagir des plugins Javascript avec celle-ci.
Inconvénients
- La charge de travail augmente : exécuter les plugins utilisés dans le Javascript et qui seront ensuite intégrés dans Angular 2.
- Compliqué si on ne sait pas la POO en Javascript.
Méthode 2 : L’utilisation d’Angular 2 seulement
Comment ça marche ?
Il faut savoir que les plugins Javascript utilisent déjà le concept POO. Donc nous pouvons facilement manipuler cet Objet dans d’autres fichiers Javascript. C’est ce que nous allons voir avec cette seconde méthode. Nous allons manipuler les méthodes du plugin dans Angular 2.
Revenons sur notre exemple.
Nous allons instancier le plugin fullcalendar purement dans Angular 2. Et rendre cette application modulable.
C'est dans un fichier nommé ngFullcalendar.component.ts que nous allons mettre notre instanciation du plugin ainsi que ses méthodes.
Dans l’import des dépendances, nous avons importé : Output, Input et EventEmitter.
Dans l’annotation @Output(), nous faisons l’instanciation de l’EventEmitter.
Et pour émettre un événement et envoyer une donnée, nous utilisons :
La méthode qui contient cette ligne est fullCalendarMethod.select, et select est une méthode propre à fullcalendar. Si l’utilisateur ajoute une date dans l’agenda, alors, nous émettons la date (dateRange) ajoutée grâce à la méthode .emit() d'EventEmitter.
Et la ligne
permet d’envoyer l’option.
L’annotation @Input, comme son nom l’indique, veut dire entrée et permet d’envoyer des valeurs à manipuler dans le composant sur lequel nous l'avons initié (FullcalendarComponent ). Tandis que l’annotation @Output, qui veut dire sortie, permet à son tour d’envoyer une valeur émise par l’EventEmitter dans le composant sur lequel nous allons envoyer la valeur émise (AppComponent).
Dans la vue, affichons notre module.
Il faut noter que nous avons écrit notre Input entre crochet, c’est la façon dont Angular 2 envoie une valeur. Cette valeur sera interprétée par le module FullcalendarComponent qui surchargera notre option par défaut.
Et notre Output est écrit dans une entre parenthèse. C’est là que nous faisons notre écoute et envoyons la valeur émise par l’événement. Quand il y a une modification dans l’affichage de l’agenda, comme, ajout de date, alors l’événement ci-dessous sera déclenché et émet les données.
$event est la donnée retournée.
Pour que ces actions seront exécutées, dans le composant que nous voulons afficher l’agenda (Ici, app.component.ts), nous créons la méthode addEvent($event) et la variables options.
Avantages et inconvénients
Avantages
- Facile à adapter pour les applications qui utilisent Angular 2.
- Module ré-utilisable.
- Facilite la manipulation des événements personnalisés et l’envoi des valeurs grâce à @Output et @Input.
- Concept MVW garder.
Inconvénients
Les effets visuelles (UI) seront développés lors du développement du site côté Angular 2.
Exemple, pour l’ajout des animations (fadeIn) lors de l’affichage de l’agenda après une requête ajax, nous faisons :
Conclusion
C’est juste un exemple sur la manière d'utiliser fullcalendar avec Angular 2.
A vous de voir si vous voulez utiliser la première ou la seconde. Mais il est recommandé d’utiliser la seconde si le projet est full Angular 2.
Tous les plugins (jQuery ou pas) peuvent interagir avec Angular 2 en utilisant ce concept 😉
Pour voir les exemples, veuillez les télécharger sur le lien et suivez les instructions pour l’installation dans le README.me ou le Wiki.
Merci je viens d’appliquer la seconde méthode sur un projet angular 4 ça fonctionne nickel !