> 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

Le calendrier permet de saisir et de partager un affichage calendaire interactif, que ce soit avec un compte, un groupe ou un service. Il favorise la collaboration entre les utilisateurs.

## **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="https://846633638-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fy6RpTqyPsMrxS5GtELRL%2Fuploads%2FvDUVF1vgGs2cn7DtnYYK%2FCapture%20d%E2%80%99e%CC%81cran%202025-11-25%20a%CC%80%2014.57.39.png?alt=media&amp;token=c520f8a7-206b-4e98-ad65-4d73ec1f46b6" 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 %}