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.

NomTypePar défautDescription
eventsCalendarEvent<T>[][]Tableau d'événements à afficher sur le calendrier.
view'month' | 'week' | 'day' | 'year''month'Type de vue courant (liaison bidirectionnelle avec viewChange).
selectedDateDatenew Date()Date actuellement ciblée (liaison bidirectionnelle avec dateChange).
configCalendarConfig{}Options de configuration du calendrier.
eventClassstring | ((event: CalendarEvent) => string)undefinedClasse(s) CSS à appliquer aux événements, statiques ou dynamiques.
weekStartsOn0 | 1 | 2 | 3 | 4 | 5 | 60Jour 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.

NomTypeDescription
eventClickCalendarEvent<T>Émis lorsqu'un événement est cliqué.
dayClickCalendarDay<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.
viewChangeCalendarViewTypeÉmis lorsque le type de vue change.
dateChangeDateÉ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.

NomDescriptionExemple
eventTptModèle pour le rendu des événements individuels. Contexte : { event: CalendarEvent }.<ng-template eventTpt let-event="event">{{ event.title }}</ng-template>
dayCellTptModè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.