---
title: "Calendar"
weight: 80
---

# Calendar

SmartCommon fournit deux composants de calendrier. Ils partagent la même base mais ne répondent pas au même besoin.

| Composant | Usage |
| --- | --- |
| `Calendar` | saisie d'une date dans un formulaire |
| `PlainCalendar` | vue calendrier autonome, avec possibilité d'afficher des événements et de sélectionner un intervalle |

## Calendar

Sélecteur de date en vue mensuelle, avec navigation mois par mois et sélecteur d'année. Il s'intègre automatiquement à un `<Form>` via `useField`.

```
import { Calendar } from '@cap-rel/smartcommon';

<Calendar
  name="date_intervention"
  value={value}
  onChange={setValue}
  yearsInterval={[2020, 2035]}
  onMonthChange={(month) => console.log(month)}
  onYearChange={(year) => console.log(year)}
/>
```

### Props principales

| Prop | Type | Description |
| --- | --- | --- |
| `name` | string | nom du champ dans le formulaire |
| `value` | string | date sélectionnée, au format ISO `YYYY-MM-DD` |
| `defaultValue` | string | valeur initiale en mode non contrôlé |
| `onChange` | function | appelée à chaque sélection |
| `yearsInterval` | array | bornes du sélecteur d'année, défaut `[2000, 2030]` |
| `items` | array | événements à marquer dans la grille |
| `onMonthChange` | function | appelée à chaque changement de mois |
| `onYearChange` | function | appelée à chaque changement d'année |

### Format de la valeur

> [!IMPORTANT]
> La valeur est une **chaîne ISO** `"YYYY-MM-DD"`, ou `null`. Un objet `Date` natif n'est pas accepté ; convertissez-le vous-même.

```
const iso = new Date().toISOString().slice(0, 10);
```

### Limites connues
- sélection d'une seule date, pas d'intervalle (utilisez `PlainCalendar` avec `interval`)
- pas de désactivation de dates par prop (week-ends, jours fériés, dates passées)
- pas d'heure ni de minutes : c'est un sélecteur de date
- la locale d'affichage suit celle du navigateur et n'est pas configurable
- aucune validation native : validez côté parent, ou dans le `onPreSubmit` du `<Form>`

## PlainCalendar

Vue calendrier autonome, hors contexte de formulaire. Elle accepte la sélection d'un intervalle et l'affichage d'éléments datés.

```
import { PlainCalendar } from '@cap-rel/smartcommon';
import { useSmartcommonLabels } from 'src/hooks/useSmartcommonLabels';

const labels = useSmartcommonLabels();

<PlainCalendar
  value={value}
  onChange={setValue}
  interval
  items={events}
  labels={labels.PlainCalendar}
/>
```

| Prop | Type | Description |
| --- | --- | --- |
| `value` | string ou array | date, ou couple de dates si `interval` |
| `onChange` | function | appelée à chaque sélection |
| `interval` | bool | active la sélection d'un intervalle, défaut `false` |
| `items` | array | éléments datés à afficher dans la grille |
| `yearsInterval` | array | bornes du sélecteur d'année |
| `labels` | object | libellés de l'interface |

### Libellés et traduction

`PlainCalendar` fait partie des composants qui embarquent leurs propres libellés, en anglais par défaut. Passez-lui le bundle de la langue active plutôt que de coder les textes en dur :

```
import { locales, useGlobalStates } from "@cap-rel/smartcommon";

export const useSmartcommonLabels = () => {
    const gst = useGlobalStates();
    const lang = gst.get("user.settings.lang") ?? gst.get("publicSettings.lang") ?? "en";
    return locales[lang] ?? locales.en;
};
```

> [!WARNING]
> N'écrivez jamais `locales.fr` en dur dans une page : les utilisateurs des autres langues se retrouveraient avec un calendrier en français.

### Comportement des jours voisins

Cliquer sur un jour du mois précédent ou suivant, dans les cases qui complètent la première et la dernière semaine, déplace la grille sur ce mois **et** sélectionne le jour.

## Voir aussi
- [SmartCommon](/front/smartcommon) - liste des composants
- [Composants et pages](/front/composants-et-pages) - les formulaires
- [Variants de composants](/front/variants) - personnaliser l'apparence
- [Traductions](/front/traductions)