# 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 %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://doc.kis.work/documentation/composants/calendrier.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.