# Calendriers

Un calendrier place chaque enregistrement à la date que nomme son `dateField`. Les correspondances de champs se déclarent au premier niveau ; seuls la gestion du clic et les réglages de la grille horaire vivent sous `calendarEvent` et `calendarInteraction`.

| Propriété             | Description                                                                                                  |
| --------------------- | ------------------------------------------------------------------------------------------------------------ |
| `dataSource`          | Les enregistrements placés. Voir [Liaison de données](/fr/docs/pages-data-binding).                          |
| `dateField`           | Le champ qui fournit le début de chaque événement.                                                           |
| `endDateField`        | Le champ qui en fournit la fin, pour les événements qui s'étendent dans le temps.                            |
| `labelField`          | Le champ rendu comme libellé de l'événement.                                                                 |
| `colorField`          | Le champ dont la valeur colore l'événement.                                                                  |
| `defaultView`         | `month`, `week` ou `day`.                                                                                    |
| `maxEventsPerDay`     | Plafonne une cellule de jour avant qu'elle ne se replie en affordance « +N de plus ».                        |
| `calendarEvent`       | `onEventClick` — ce qui s'exécute au clic sur un événement.                                                  |
| `calendarInteraction` | `onDateClick`, `timeSlotInterval` (en minutes, pour les vues semaine et jour) et `showCurrentTimeIndicator`. |

```yaml
tables:
  - name: bookings
    fields:
      - { name: customer_name, type: single-line-text }
      - { name: starts_at, type: datetime }
      - { name: ends_at, type: datetime }
pages:
  - name: Bookings
    path: /bookings
    components:
      - type: calendar
        dataSource: { table: bookings }
        dateField: starts_at
        endDateField: ends_at
        labelField: customer_name
        defaultView: week
        calendarInteraction: { timeSlotInterval: 30, showCurrentTimeIndicator: true }
```

## Un événement coloré est un bloc, pas un point

Un calendrier lit `colorField` au premier niveau — les règles de couleur par enregistrement sont les mêmes que celles que suit un tableau kanban, y compris d'où vient la teinte et ce qui se passe quand une valeur n'en déclare aucune.

En vue mois, un calendrier rend par défaut un événement horodaté comme un petit point. Un point est surtout du vide, et une couleur qu'on lui applique est donc quasi invisible. Un événement qui porte une couleur se rend par conséquent en **bloc** plein ; un événement sans couleur garde le point par défaut.

Attendez-vous à un changement de mise en page visible sur tout calendrier en vue mois qui définit `colorField` — les cellules de jour qui portaient des lignes de points portent désormais des bandes de blocs pleins.

## Pages connexes

- [Liaison de données](/fr/docs/pages-data-binding) — la `dataSource` que le calendrier place.
- [Tableaux kanban](/fr/docs/data-components-boards) — les mêmes règles de couleur par enregistrement.