# Calendrier

## **Fonctionnement**

Les calendriers doivent être **liés à des** [**listes**](https://doc.kis.work/documentation/guide-de-demarrage/importez-vos-donnees-dans-kis/creez-et-peuplez-une-liste) 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&#x26;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 ajoute un container dans lequel on fait glisser déposer notre composant **Calendrier**.

**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**](https://doc.kis.work/documentation/composants/formulaire) 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 %}