Composant Calendar Angular | ng-hub-ui-calendar
Composant calendrier Angular avec vues d'événements, drag and drop, templates, internationalisation et variables CSS pour les interfaces de planification.
Référence API
Voici le contrat complet de calendar : tout ce que vous pouvez lier, écouter, projeter et personnaliser, réuni au même endroit. Branchez ce dont vous avez besoin et stylisez ce que vous voulez — c’est standalone et compatible avec les signals.
Inputs
Réglez calendar à votre goût avec 6 inputs. Liez-les comme n’importe quel @Input Angular.
| Nom | Type | Par défaut | Description |
|---|---|---|---|
events | CalendarEvent<T>[] | [] | Tableau d'événements à afficher sur le calendrier. |
view | 'month' | 'week' | 'day' | 'year' | 'month' | Type de vue courant (liaison bidirectionnelle avec viewChange). |
selectedDate | Date | new Date() | Date actuellement ciblée (liaison bidirectionnelle avec dateChange). |
config | CalendarConfig | {} | Options de configuration du calendrier. |
eventClass | string | ((event: CalendarEvent) => string) | undefined | Classe(s) CSS à appliquer aux événements, statiques ou dynamiques. |
weekStartsOn | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 0 | Jour de début de la semaine (0 = dimanche, 1 = lundi, etc.). |
Outputs
Réagissez à ce que fait calendar — 5 événements sur lesquels accrocher votre logique.
| Nom | Type | Description |
|---|---|---|
eventClick | CalendarEvent<T> | Émis lorsqu'un événement est cliqué. |
dayClick | CalendarDay<T> | Émis lorsqu'une cellule de jour est cliquée. |
eventDrop | { event: CalendarEvent<T>; newDate: Date; previousDate: Date } | Émis lorsqu'un événement est déposé sur un jour différent. |
viewChange | CalendarViewType | Émis lorsque le type de vue change. |
dateChange | Date | Émis lorsque la navigation modifie la date affichée. |
Templates
Faites-le vôtre — 2 emplacements de template vous permettent de projeter votre propre balisage.
| Nom | Description | Exemple |
|---|---|---|
eventTpt | Modèle pour le rendu des événements individuels. Contexte : { event: CalendarEvent }. | <ng-template eventTpt let-event="event">{{ event.title }}</ng-template> |
dayCellTpt | Modèle pour personnaliser le rendu des cellules de jour. Contexte : { day: CalendarDay }. | <ng-template dayCellTpt let-day="day">{{ day.date | date }}</ng-template> |
Variables CSS
Aucune variable CSS documentée pour le moment.
Styles et theming
Aucun exemple de style n’est encore documenté. Cette section inclura des recettes de personnalisation et des exemples de theming.