Agenda Svelte

Sujet

Réalisation d'une petite application de gestion d'agenda avec stockage dans la base de données du navigateur (localStorage).

Fonctionnalités demandées

L'interface de saisie et de modification d'un événement permet à l'utilisateur de renseigner :

• Un titre
• Une date et heure de début
• Éventuellement une durée ou date/heure de fin (un événement sans durée ni date de fin est ponctuel, comme une date de livrable par exemple)
• Une couleur
• Une courte description

Les événements se limitent à une seule journée.

L'affichage se fait par mois, avec une semaine par ligne. Un composant CaseJour est utilisé pour afficher chaque case-jour et est appelé autant de fois que nécessaire.

Le titre de l'événement apparaît à sa date dans l'agenda. En cliquant dessus, une modale affiche les détails ainsi qu'un bouton renvoyant à l'interface de modification.

Stack technique

• Svelte — framework Svelte
• Tailwind CSS — framework de styles
• localStorage — stockage des données en local

Installation et lancement

Prérequis

• Node.js version 18 ou supérieure
• npm (inclus avec Node.js)

Étapes

1. Installer les dépendances

npm install

2. Lancer le serveur de développement

npm run dev