EventCalendar

Un calendrier d'événements : mois, semaine, agenda.

Il affiche et signale ; il ne gère pas. Un clic sur un jour appelle onDateClick, un clic sur un événement onEventClick — EventManager s'y branche pour créer, consulter, modifier et supprimer. Les données viennent du serveur : onRangeChange donne la période à charger.

Étroit, la grille du mois n'affiche plus que des points de couleur, et les événements du jour choisi s'affichent dessous : une case de 45 px ne se lit pas, une liste si.

Installation

sia-ui add event-calendar

Ou par le paquet, sans rien copier :

import { EventCalendar } from "@sia-ui/react-web";

Props

Prop	Type	Défaut	Description
* events	T[]	—
className	string	—
date	string	—	Un jour de la période affichée (2026-09-30). Aujourd'hui par défaut.
defaultDate	string	—
defaultMonth	string	—	@deprecated Ancien nom de defaultDate, au mois près.
defaultValue	string	—	@deprecated Ancien nom de defaultDate.
defaultView	CalendarView	month
density	"compact" | "comfortable"	comfortable	compact resserre les cases et la grille horaire.
emptyStateProps	EmptyStateProps	—	L'agenda vide.
eventVariant	"soft" | "solid" | "outline"	soft	Le rendu des événements : fond léger, plein, ou contour.
firstDayOfWeek	0 | 1	1
labels	EventCalendarMessages	—	Remplace, clé par clé, les textes du groupe eventCalendar de la locale.
loading	boolean	false
locale	string	—	La langue des dates. Par défaut, celle de la locale SIA.
maxEventsPerDay	number	3	Événements visibles par case en vue mois ; le reste passe dans « +N ».
moreButtonProps	Partial<Omit<ButtonProps, "children" | "onClick">>	—	Le bouton « +N autres » d'une case chargée.
navButtonProps	Partial<Omit<IconButtonProps, "icon" | "onClick" | "label">>	—	Les flèches de période.
onDateChange	(date: string) => void	—
onDateClick	(date: string, time?: string) => void	—	Un clic sur un jour, hors événement : le moment de créer. Dans la grille horaire, time donne la demi-heure visée (14:30).
onEventClick	(event: T) => void	—
onRangeChange	(range: { start: string; end: string; }, view: CalendarView) => void	—	La période visible, bornes incluses, à chaque changement de vue ou de période — et au premier affichage. C'est elle qu'on demande au serveur.
onViewChange	(view: CalendarView) => void	—
popoverProps	Partial<Omit<PopoverProps, "children" | "content">>	—	La liste complète d'un jour chargé (« +N autres »).
renderEvent	(event: T, placement: DayEvent<any>) => ReactNode	—	Remplace le contenu d'un événement. Le bouton qui l'entoure reste.
scrollToHour	number	8	L'heure affichée en haut de la grille horaire à l'ouverture. 8 h par défaut.
spinnerProps	Partial<Omit<SpinnerProps, "label">>	—	Le témoin de chargement de la barre.
toolbarActions	ReactNode	—	Actions à droite de la barre : « Nouvel événement », un filtre.
toolbarButtonProps	Partial<Omit<ButtonProps, "children" | "onClick">>	—	Le bouton « Aujourd'hui ».
variant	"bordered" | "soft" | "minimal"	bordered	L'habillage de la grille. bordered : des cases tracées, comme un agenda papier. minimal : aucune bordure intérieure, les jours se lisent à leur numéro. soft : des cases sur fond teinté, séparées par des blancs.
view	CalendarView	—	La vue affichée — mois, semaine, agenda.
viewButtonProps	Partial<Omit<RadioButtonProps, "children" | "value">>	—	Chaque bouton de vue.
views	CalendarView[]	["month", "week", "day", "agenda"]	Les vues proposées. Une seule masque le sélecteur.
viewSwitchProps	Partial<Omit<RadioGroupProps, "children" | "value" | "defaultValue" | "onValueChange">>	—	Le sélecteur de vue — un RadioGroup en boutons.

* obligatoire.

Voir aussi

• Le composant dans le catalogue — états, variantes, et bac à sable.
• La référence complète — tous les composants.