Composant Calendreir TOAST UI

Le composant TOAST UI Calendar est une bibliothèque JavaScript développée par NHN, conçue pour intégrer des fonctionnalités de calendrier avancées dans les applications web. Il offre une interface utilisateur riche et interactive pour la gestion des événements, prenant en charge plusieurs vues (mois, semaine, jour) et des interactions intuitives comme le glisser-déposer pour créer ou modifier des rendez-vous.

Démarrage Rapide

Installation

Pour intégrer TOAST UI Calendar dans votre projet, utilisez l'un des gestionnaires de paquets suivants :

npm install @toast-ui/calendar
# Ou avec Yarn
yarn add @toast-ui/calendar
   

Inclusion des Styles

N'oubliez pas d'ajouter le fichier CSS du composant à votre document HTML pour un affichage correct :

<link rel="stylesheet" href="node_modules/@toast-ui/calendar/dist/toastui-calendar.min.css">
   

Initialisation du Composant

Voici comment instancier et configurer le calendrier dans votre code JavaScript :

import { Calendar } from '@toast-ui/calendar';

// Assurez-vous d'avoir un élément HTML avec l'ID 'app-calendar'
const calendarElement = document.getElementById('app-calendar');

const myCalendar = new Calendar(calendarElement, {
   // Configuration initiale, par exemple la vue par défaut
   defaultView: 'week',
   // Thème, fuseau horaire, etc. peuvent être configurés ici
   theme: {
       'common.daynames': ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'],
       'common.today': 'Aujourd\'hui',
   },
   scheduleView: true, // Activer la vue des événements
   useCreationPopup: true, // Afficher la popup pour créer un événement
   usageStatistics: false, // Désactiver les statistiques d'utilisation
});

// Exemple de données d'événements
const calendarEvents = [
   {
       id: 'event1',
       title: 'Réunion projet',
       start: '2024-03-15T10:00:00',
       end: '2024-03-15T11:30:00',
       category: 'time', // 'time' pour événements avec durée, 'allday' pour journée entière
       backgroundColor: '#FF5733',
   },
   {
       id: 'event2',
       title: 'Anniversaire de Jean',
       start: '2024-03-16', // Pour les événements d'une journée entière
       end: '2024-03-16',
       isAllday: true,
       category: 'allday',
   },
];

// Ajout des événements au calendrier
calendarEvents.forEach(eventData => {
   myCalendar.createEvents([eventData]); // Utilisation de createEvents pour ajouter plusieurs événements
});

// Afficher la vue du jour par défaut
myCalendar.changeView('day');

   

L'élément HTML requis pour héberger le calendrier :

<div id="app-calendar" style="height: 800px;"></div>
   

Cas d'Usage et Bonnes Pratiques

• Gestion des Interactions Utilisateur : Utilisez la méthode on pour écouter des événements personnalisés comme la création ou la modification de rendez-vous. Par exemple, pour capturer la création d'un nouvel événement : ```javascript

  myCalendar.on('clickEvent', (eventInfo) => { console.log('Événement cliqué:', eventInfo.schedule.title); // Ouvrir un modal pour afficher les détails ou permettre la modification });

• Synchronisation avec un Backend : Après toute modification par l'utilisateur (création, suppression, déplacement d'événement), envoyez les changements au serveur pour persister les données.

• Otpimisation : Si le calendrier n'est pas visible ou utilisé, envisagez de le décharger ou de désactiver certaines fonctionnalités pour améliorer les performances de chargement initial de la page.

• Adaptabilité : Adaptez le style et le comportement du calendrier aux différents formats d'écran en utilisant des techniques de design responsive.

Intégrations Courantes

TOAST UI Calendar propose des wrappers pour les frameworks JavaScript populaires, facilitant son intégration dans des projets existants :

• React : Le package @toast-ui/react-calendar est disponible.
• Vue : Le package @toast-ui/vue-calendar est disponible.

Ces intégrations permettent de gérer le cycle de vie du composant et les interactions dans le contexte spécifique de React ou Vue.