Componente Calendar para Angular | ng-hub-ui-calendar

Componente calendario para Angular con vistas de eventos, drag and drop, plantillas, internacionalización y variables CSS para interfaces de scheduling.

Referencia API

Inputs

events

Tipo: CalendarEvent<T>[]

Por defecto: []

Array of events to display on the calendar

view

Tipo: 'month' | 'week' | 'day' | 'year'

Por defecto: 'month'

Current view type (two-way binding with viewChange)

selectedDate

Tipo: Date

Por defecto: new Date()

Currently focused date (two-way binding with dateChange)

config

Tipo: CalendarConfig

Por defecto: {}

Configuration options for the calendar

eventClass

Tipo: string | ((event: CalendarEvent) => string)

Por defecto: undefined

CSS class(es) to apply to events, can be static or dynamic

weekStartsOn

Tipo: 0 | 1 | 2 | 3 | 4 | 5 | 6

Por defecto: 0

Day the week starts on (0 = Sunday, 1 = Monday, etc.)

Outputs

eventClick

Tipo: CalendarEvent<T>

Emitted when an event is clicked

dayClick

Tipo: CalendarDay<T>

Emitted when a day cell is clicked

eventDrop

Tipo: { event: CalendarEvent<T>; newDate: Date; previousDate: Date }

Emitted when an event is dropped on a different day

viewChange

Tipo: CalendarViewType

Emitted when the view type changes

dateChange

Tipo: Date

Emitted when navigation changes the displayed date

Templates

eventTpt

Template for rendering individual events. Context: { event: CalendarEvent }

Ejemplo:

dayCellTpt

Template for customizing day cell rendering. Context: { day: CalendarDay }

Ejemplo:

Variables CSS

Todavía no hay variables CSS documentadas.

Estilos y theming

Todavía no hay ejemplos de estilos documentados. Esta sección incluirá recetas de personalización y ejemplos de theming.