UNPKG

angular-calendar

Version:

A calendar component for angular 15.0+ that can display events on a month, week or day view

204 lines (203 loc) 7.15 kB
import { OnChanges, EventEmitter, ChangeDetectorRef, OnInit, OnDestroy, TemplateRef } from '@angular/core'; import { CalendarEvent, WeekDay, MonthView, MonthViewDay, ViewPeriod } from 'calendar-utils'; import { Subject, Subscription } from 'rxjs'; import { CalendarEventTimesChangedEvent } from '../../common/calendar-event-times-changed-event/calendar-event-times-changed-event.interface'; import { CalendarUtils } from '../../common/calendar-utils/calendar-utils.provider'; import { DateAdapter } from '../../../date-adapters/date-adapter'; import { PlacementArray } from 'positioning'; import * as i0 from "@angular/core"; export interface CalendarMonthViewBeforeRenderEvent { header: WeekDay[]; body: MonthViewDay[]; period: ViewPeriod; } export interface CalendarMonthViewEventTimesChangedEvent<EventMetaType = any, DayMetaType = any> extends CalendarEventTimesChangedEvent<EventMetaType> { day: MonthViewDay<DayMetaType>; } /** * Shows all events on a given month. Example usage: * * ```typescript * <mwl-calendar-month-view * [viewDate]="viewDate" * [events]="events"> * </mwl-calendar-month-view> * ``` */ export declare class CalendarMonthViewComponent implements OnChanges, OnInit, OnDestroy { protected cdr: ChangeDetectorRef; protected utils: CalendarUtils; protected dateAdapter: DateAdapter; /** * The current view date */ viewDate: Date; /** * An array of events to display on view. * The schema is available here: https://github.com/mattlewis92/calendar-utils/blob/c51689985f59a271940e30bc4e2c4e1fee3fcb5c/src/calendarUtils.ts#L49-L63 */ events: CalendarEvent[]; /** * An array of day indexes (0 = sunday, 1 = monday etc) that will be hidden on the view */ excludeDays: number[]; /** * Whether the events list for the day of the `viewDate` option is visible or not */ activeDayIsOpen: boolean; /** * If set will be used to determine the day that should be open. If not set, the `viewDate` is used */ activeDay: Date; /** * An observable that when emitted on will re-render the current view */ refresh: Subject<any>; /** * The locale used to format dates */ locale: string; /** * The placement of the event tooltip */ tooltipPlacement: PlacementArray; /** * A custom template to use for the event tooltips */ tooltipTemplate: TemplateRef<any>; /** * Whether to append tooltips to the body or next to the trigger element */ tooltipAppendToBody: boolean; /** * The delay in milliseconds before the tooltip should be displayed. If not provided the tooltip * will be displayed immediately. */ tooltipDelay: number | null; /** * The start number of the week. * If using the moment date adapter this option won't do anything and you'll need to set it globally like so: * ``` * moment.updateLocale('en', { * week: { * dow: 1, // set start of week to monday instead * doy: 0, * }, * }); * ``` */ weekStartsOn: number; /** * A custom template to use to replace the header */ headerTemplate: TemplateRef<any>; /** * A custom template to use to replace the day cell */ cellTemplate: TemplateRef<any>; /** * A custom template to use for the slide down box of events for the active day */ openDayEventsTemplate: TemplateRef<any>; /** * A custom template to use for event titles */ eventTitleTemplate: TemplateRef<any>; /** * A custom template to use for event actions */ eventActionsTemplate: TemplateRef<any>; /** * An array of day indexes (0 = sunday, 1 = monday etc) that indicate which days are weekends */ weekendDays: number[]; /** * An output that will be called before the view is rendered for the current month. * If you add the `cssClass` property to a day in the body it will add that class to the cell element in the template */ beforeViewRender: EventEmitter<CalendarMonthViewBeforeRenderEvent>; /** * Called when the day cell is clicked */ dayClicked: EventEmitter<{ day: MonthViewDay; sourceEvent: MouseEvent | KeyboardEvent; }>; /** * Called when the event title is clicked */ eventClicked: EventEmitter<{ event: CalendarEvent; sourceEvent: MouseEvent | KeyboardEvent; }>; /** * Called when a header week day is clicked. Returns ISO day number. */ columnHeaderClicked: EventEmitter<{ isoDayNumber: number; sourceEvent: MouseEvent | KeyboardEvent; }>; /** * Called when an event is dragged and dropped */ eventTimesChanged: EventEmitter<CalendarMonthViewEventTimesChangedEvent<any, any>>; /** * @hidden */ columnHeaders: WeekDay[]; /** * @hidden */ view: MonthView; /** * @hidden */ openRowIndex: number; /** * @hidden */ openDay: MonthViewDay; /** * @hidden */ refreshSubscription: Subscription; /** * @hidden */ constructor(cdr: ChangeDetectorRef, utils: CalendarUtils, locale: string, dateAdapter: DateAdapter); /** * @hidden */ trackByRowOffset: (index: number, offset: number) => string; /** * @hidden */ trackByDate: (index: number, day: MonthViewDay) => string; /** * @hidden */ ngOnInit(): void; /** * @hidden */ ngOnChanges(changes: any): void; /** * @hidden */ ngOnDestroy(): void; /** * @hidden */ toggleDayHighlight(event: CalendarEvent, isHighlighted: boolean): void; /** * @hidden */ eventDropped(droppedOn: MonthViewDay, event: CalendarEvent, draggedFrom?: MonthViewDay): void; protected refreshHeader(): void; protected refreshBody(): void; protected checkActiveDayIsOpen(): void; protected refreshAll(): void; protected emitBeforeViewRender(): void; static ɵfac: i0.ɵɵFactoryDeclaration<CalendarMonthViewComponent, never>; static ɵcmp: i0.ɵɵComponentDeclaration<CalendarMonthViewComponent, "mwl-calendar-month-view", never, { "viewDate": "viewDate"; "events": "events"; "excludeDays": "excludeDays"; "activeDayIsOpen": "activeDayIsOpen"; "activeDay": "activeDay"; "refresh": "refresh"; "locale": "locale"; "tooltipPlacement": "tooltipPlacement"; "tooltipTemplate": "tooltipTemplate"; "tooltipAppendToBody": "tooltipAppendToBody"; "tooltipDelay": "tooltipDelay"; "weekStartsOn": "weekStartsOn"; "headerTemplate": "headerTemplate"; "cellTemplate": "cellTemplate"; "openDayEventsTemplate": "openDayEventsTemplate"; "eventTitleTemplate": "eventTitleTemplate"; "eventActionsTemplate": "eventActionsTemplate"; "weekendDays": "weekendDays"; }, { "beforeViewRender": "beforeViewRender"; "dayClicked": "dayClicked"; "eventClicked": "eventClicked"; "columnHeaderClicked": "columnHeaderClicked"; "eventTimesChanged": "eventTimesChanged"; }, never, never, false, never>; }