> For the complete documentation index, see [llms.txt](https://doc.kis.work/documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://doc.kis.work/documentation/composants/calendrier.md).

# Calendrier

## **Fonctionnement**

Les calendriers doivent être **liés à des** [**listes**](/documentation/guide-de-demarrage/importez-vos-donnees-dans-kis/creez-et-peuplez-une-liste.md) qui vont réceptionner et stocker les informations clés sur les événements, les tâches et les rendez-vous.

Dans notre exemple, on utilisera une liste nommée "**planning-membres**" et composée de quatre colonnes :

* debut-evenement (format Date et heure) ;
* fin-evenement (format Date et heure) ;
* apercu-evenement (format Texte) ;
* detail-evenement (format Texte).

<figure><img src="/files/MP6uXlsKZ6KICmJF89t5" alt=""><figcaption></figcaption></figure>

## 2 possibilités&#x20;

* **Concevoir un formulaire dans Kis pour la création d'événements** : les utilisateurs saisiront un certain nombre d'informations. Par exemple, **le nom de l'événement, les dates et heures de début et de fin, et une description de l'événement.** Une fois soumis, ces informations seront automatiquement enregistrées dans une liste et affichées dans le calendrier.&#x20;
* **Lier le calendrier à une base de données externe** : l'intégration avec des bases de données externes synchronise automatiquement les données grâce à des outils comme **Make** et **Zapier**. Par exemple, lorsqu'un client réserve une réunion, les informations sont ajoutées au calendrier sans double saisie.

## Étapes de création d'un Calendrier

{% embed url="<https://youtu.be/z9_Jn-ikWIk>" %}

**1 -** Dans notre application, on crée une page (par exemple, **Planning membres**). On fait glisser-déposer notre composant **Calendrier** dans le container vid&#x65;**.**

**2 -** Dans **Données**, on crée une **nouvelle source** que l'on relie à notre liste "**planning-membres**".

**3 -** On donne un nom à notre calendrier. Ici, ce sera **Planning des membres**.

**4 -** On va ensuite associer les champs **Début de l'événement**, **Fin de l'événement** et **Aperçu de l'événement** à notre liste.

Pour ce faire, à côté de chaque champ, on clique sur le **symbole de Sélection** (les deux petits rectangles). Puis **on** **sélectionne l'ID des données dynamiques** (la source de données que l'on vient de créer) et **on associe le champ à la bonne colonne de la liste**.

**5 -** Ensuite, on va paramétrer le **Contenu des cartes**. Ce sont les éléments qui apparaîtront quand on cliquera sur un événement présent dans le calendrier.

Dans notre exemple, nous allons créer deux cartes afin de **nommer l'événement** et lui **apporter des détails utiles**.

Pour la première carte, dans **Titre de l'élément**, on renseigne "**Nom de l'événement**". On laisse le champ "**Élément à afficher**" vide. Mais dans l'icône de **Sélection**, nous allons sélectionner la colonne "**apercu-evenement**" de notre liste.

On répète l'opération pour la deuxième carte que l'on nomme **Détail de l'événement** et qu'on relie à la colonne "**detail-evenement**".

**6 -** Afin de remplir le calendrier, nous allons [**créer un formulaire**](/documentation/composants/formulaire.md) avec les champs :

* Date de début (format date et heure) ;
* Date de fin (format date et heure) ;
* Nom de l'événement (format texte) ;
* Détail de l'événement (format texte).

Côté utilisateur, **le formulaire est désormais disponible sous le calendrier** et il est possible d'entrer un nouvel évémenent.

Le nouvel événement **s'affiche instantanément dans le calendrier**. En cliquant dessus, on retrouve toutes les informations essentielles : **dates et heures de début et de fin, nom et détails de l'événement**.

Dans le même temps, **toutes les informations renseignées dans le calendrier apparaissent désormais votre liste**.

{% hint style="warning" %}
Si nécessaire, vous pouvez **ajouter des liens vers d'autres pages** pour accéder à des tableaux détaillés sur les événements ou à des documents pertinents, enrichissant ainsi l'expérience utilisateur et la compréhension des informations.
{% endhint %}