Calendar

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;
};

Attention

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

Calendar Advanced Components (High-Level)