En tirant parti de l'API de stockage Web, en particulier le stockage local, vous pouvez créer un calendrier entièrement fonctionnel, dirigé par un événement, qui fonctionne entièrement dans le navigateur sans avoir besoin d'un serveur de backend ou d'une base de données. Ce tutoriel vous permet de parcourir chaque étape, de la structuration du HTML à la mise en œuvre de fonctionnalités avancées comme la gestion des événements glisser-déposer.

Pourquoi construire un calendrier personnalisé?

Les bibliothèques de calendrier préconstruites (comme FullCalendar ou DayPilot) offrent des solutions rapides, mais la construction d'une bibliothèque à partir de zéro vous donne un contrôle complet sur l'interface utilisateur, le traitement des données et les performances. Vous acquérez également une expérience pratique avec les concepts de JavaScript de base tels que l'objet , la délégation d'événements et l'API . L'application résultante peut être étendue à un outil de gestion de projet, un système de réservation ou un journal personnel.

Configuration de la structure HTML

Commencez par un squelette HTML propre. Le calendrier a besoin de trois composants principaux : une barre de navigation (pour les mois à venir), un conteneur de grille (pour les cellules de jour) et un formulaire d'entrée d'événement. Utilisez éléments avec des noms de classes sémantiques pour un style et un script faciles.

<div id="calendar">
 <div class="calendar-header">
 <button id="prevBtn">&larr;</button>
 <h2 id="monthYear"></h2>
 <button id="nextBtn">&rarr;</button>
 </div>
 <div class="calendar-grid"></div>
 <div class="event-form">
 <input type="text" id="eventInput" placeholder="Add an event..." />
 <button id="saveEvent">Save</button>
 </div>
</div>

Pour une mise en page mobile, envisagez d'utiliser une grille CSS de 7 colonnes (une par jour de la semaine). Réservez la première ligne pour les noms de jour (Sun–Sat).

Styling du calendrier avec CSS

Un CSS propre et réactif transforme le HTML brut en interface utilisable. Utilisez une grille CSS pour la grille de calendrier, paramétrez . Ajoutez des espaceurs pendant des jours avant le premier du mois. Pour l'accessibilité, assurez-vous d'un contraste de couleur suffisant et incluez styles sur des éléments interactifs. Une feuille de style minimale est montrée ci-dessous (en ligne ou liée).

.calendar-grid {
 display: grid;
 grid-template-columns: repeat(7, 1fr);
 gap: 2px;
}
.day-cell {
 min-height: 80px;
 border: 1px solid #ccc;
 padding: 4px;
 position: relative;
}
.day-cell.today {
 background-color: #eef;
}
.event {
 font-size: 0.8em;
 background: #4caf50;
 color: #fff;
 padding: 2px 4px;
 margin: 1px 0;
 border-radius: 3px;
 cursor: pointer;
}

Utilisez des requêtes multimédia pour réduire la taille des cellules sur des écrans étroits, et envisager de cacher le texte de l'événement et de montrer seulement un nombre.

JavaScript de base : Génération de la grille de calendrier

Tous les rendus dynamiques vivent en JavaScript. La fonction centrale, , calcule le premier jour du mois et le nombre total de jours. Utilisez pour obtenir l'indice du jour de semaine (0 = dimanche).

Travailler avec l'objet Date

Pour obtenir le dernier jour d'un mois, utilisez (le jour 0 du mois suivant donne le dernier jour du mois en cours). Conservez le mois et l'année en variables globales afin que la navigation puisse les mettre à jour.

Construire la grille

function renderCalendar() {
 const grid = document.querySelector('.calendar-grid');
 grid.innerHTML = '';

 const firstDay = new Date(currentYear, currentMonth, 1).getDay();
 const daysInMonth = new Date(currentYear, currentMonth + 1, 0).getDate();

 // Add empty cells for days before the 1st
 for (let i = 0; i < firstDay; i++) {
 const empty = document.createElement('div');
 empty.className = 'day-cell empty';
 grid.appendChild(empty);
 }

 // Generate day cells
 for (let day = 1; day <= daysInMonth; day++) {
 const cell = document.createElement('div');
 cell.className = 'day-cell';
 cell.dataset.date = `${currentYear}-${currentMonth + 1}-${day}`;

 const dateSpan = document.createElement('span');
 dateSpan.textContent = day;
 cell.appendChild(dateSpan);

 // Highlight today
 const today = new Date();
 if (currentYear === today.getFullYear() && currentMonth === today.getMonth() && day === today.getDate()) {
 cell.classList.add('today');
 }

 // Load events for this date
 loadEvents(cell);

 grid.appendChild(cell);
 }
}

Mettre à jour l'affichage mois/année dans l'en-tête :

Joindre les auditeurs des événements en cliquant sur les boutons Précédent et Suivant. Incrément ou décrément , en ajustant l'année si nécessaire (p. ex., après décembre viennent à janvier de l'année prochaine).

document.getElementById('prevBtn').addEventListener('click', () => {
 currentMonth--;
 if (currentMonth < 0) {
 currentMonth = 11;
 currentYear--;
 }
 renderCalendar();
});

document.getElementById('nextBtn').addEventListener('click', () => {
 currentMonth++;
 if (currentMonth > 11) {
 currentMonth = 0;
 currentYear++;
 }
 renderCalendar();
});

Pour une utilisation supplémentaire, ajoutez un bouton Aujourd'hui qui réinitialise la vue au mois en cours et met en évidence le jour en cours.

Stockage & Récupération d'événements avec stockage local

Le stockage local fournit un magasin de valeurs de clé simple qui survit au redémarrage du navigateur. Utilisez un motif de clé cohérent, par exemple, , stockant des tableaux JSON d'objets d'événements. Inclure des propriétés comme , , et .

Sauver un nouvel événement

Lorsque l'utilisateur clique sur le bouton -Save, capturez la valeur d'entrée et la date actuellement sélectionnée. (Vous pouvez ajouter un sélecteur de date ou détecter quelle cellule de jour est cliquée.) Récupérer tout événement existant pour cette date depuis le stockage local, appuyez sur le nouvel événement, puis sauvez-le.

function saveEvent(dateKey, eventText) {
 const existing = JSON.parse(localStorage.getItem(dateKey)) || [];
 existing.push({ id: Date.now(), text: eventText, time: new Date().toLocaleTimeString() });
 localStorage.setItem(dateKey, JSON.stringify(existing));
 renderCalendar(); // refresh to show new event
}

Chargement des événements dans les cellules de jour

À l'intérieur , pour chaque cellule de jour non vide, appelez une fonction qui interroge le stockage local pour cette clé de date. Si des événements existent, en bouclez-les et ajoutez des éléments à la cellule.

function loadEvents(cell) {
 const dateKey = cell.dataset.date;
 const events = JSON.parse(localStorage.getItem(dateKey));
 if (!events) return;

 events.forEach(evt => {
 const eventDiv = document.createElement('div');
 eventDiv.className = 'event';
 eventDiv.textContent = evt.text;
 eventDiv.dataset.id = evt.id;
 // Optional: add a delete button
 cell.appendChild(eventDiv);
 });
}

Suppression et édition des événements

Pour supprimer, ajoutez un clic sur chaque élément d'événement (ou utilisez la délégation d'événement). Récupérez le tableau pour cette date, filtrez l'événement par son , et enregistrez le tableau mis à jour dans le stockage local. L'édition peut être faite en double-cliquant l'événement, en demandant un nouveau texte et en mettant à jour le tableau.

Caractéristiques avancées pour améliorer la fonctionnalité

Une fois que le calendrier de base fonctionne, vous pouvez ajouter des fonctionnalités qui améliorent significativement l'expérience utilisateur.

Événements de codage de couleur par type

Permettre aux utilisateurs d'attribuer des catégories (p. ex., travail, personnel, santé). Entreposer un champ dans le stockage local. Dans CSS, définir des classes comme , et les appliquer dynamiquement.

Rééchelonnement de la vitesse de descente et de la vitesse de descente

Utilisez l'API de glisser et de déposer HTML5 pour déplacer les événements entre les cellules de jour. Lorsqu'un événement est tombé sur un jour différent, mettez à jour la clé de date dans Local Storage : retirez l'événement de son tableau de date original et poussez-le vers le nouveau tableau de date.

Événements récurrents (semaine / mois)

Dans la fonction de chargement, calculez si la date actuelle correspond à la règle de récurrence (par exemple, tous les lundis) et affichez l'événement en conséquence. Stockez les règles de récurrence dans une clé de stockage locale séparée pour éviter la duplication.

Affichage hebdomadaire et mini-agenda

Une vue hebdomadaire montre seulement les jours de la semaine en cours avec plus d'espace horizontal. Un mini-agenda de vue mensuelle permet aux utilisateurs de sauter à n'importe quelle date rapidement.

Rendre le calendrier réceptif et accessible

Testez le calendrier sur différentes tailles d'écran. Utilisez requêtes pour empiler les cellules de jour verticalement sur de très petits écrans ou pour réduire le rembourrage. Assurez-vous que tous les éléments interactifs sont accessibles au clavier : attachez événements pour Entrée et Échapper. Utilisez attributs sur les boutons et les régions en direct pour les lecteurs d'écran pour annoncer les changements de mois et les ajouts d'événements.

Conseils sur la performance et la gestion des données

  • Goldage en bloc[: Au lieu de lire/écrire le stockage local pour chaque opération d'événement, cachez l'ensemble des événements du mois dans un objet JavaScript et rincer les changements périodiquement.
  • Limiter la taille de l'événement: Gardez les objets de l'événement petit. Évitez de stocker de grandes chaînes ou des données binaires.
  • Fallback pour les limites de stockage: Le stockage local est généralement plafonné à 5-10 Mo. Prévenir les utilisateurs lorsque le stockage est presque complet.
  • Utilisez la BD indexée pour les ensembles de données de grande taille: Si votre calendrier tiendra des milliers d'événements, considérez IndexedDB pour de meilleures performances et capacités de requête.

Conclusion

Créer une application de calendrier personnalisée avec JavaScript et Local Storage est un projet enrichissant qui aiguise vos compétences de front-end. Vous apprenez à manipuler le DOM, à travailler avec des dates, à gérer l'état sans serveur et à gérer les interactions utilisateur. La base de code peut être étendue avec la synchronisation du serveur, la sauvegarde en nuage ou l'intégration avec des calendriers externes via Google Calendar API. Commencez par la grille de base, ajoutez de la persistance, puis couchez sur des fonctionnalités comme glisser-déposer et les événements récurrents.

Pour plus de détails, explorez la documentation de l'API et l'API Drag et Drop[ sur MDN. Bon codage!