UNPKG

angular-calendar

Version:

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

1,389 lines (1,357 loc) 68.9 kB
import * as i0 from '@angular/core'; import { Provider, TemplateRef, OnDestroy, OnChanges, SimpleChanges, EventEmitter, PipeTransform, OnInit, InjectionToken, ModuleWithProviders, ChangeDetectorRef, AfterViewInit, ElementRef } from '@angular/core'; import { CalendarEvent, MonthViewDay, EventAction, GetMonthViewArgs, MonthView, GetWeekViewHeaderArgs, WeekDay, GetWeekViewArgs, WeekView, ViewPeriod, WeekViewAllDayEvent, WeekViewTimeEvent, WeekViewHourColumn, WeekViewHourSegment } from 'calendar-utils'; export { CalendarEvent, EventAction as CalendarEventAction, GetWeekViewArgs as CalendarGetWeekViewArgs, MonthViewDay as CalendarMonthViewDay, ViewPeriod as CalendarViewPeriod, WeekViewAllDayEvent as CalendarWeekViewAllDayEvent, WeekViewAllDayEventRow as CalendarWeekViewAllDayEventRow, DAYS_OF_WEEK } from 'calendar-utils'; import { PlacementArray } from 'positioning'; import * as i1 from 'angular-draggable-droppable'; import { ValidateDrag, DropEvent, DragMoveEvent, DragEndEvent } from 'angular-draggable-droppable'; import { Subject, Subscription, BehaviorSubject, Observable } from 'rxjs'; import { DateAdapter as DateAdapter$1 } from 'calendar-utils/date-adapters/date-adapter'; import * as i1$1 from 'angular-resizable-element'; import { ResizeCursors, ResizeEvent } from 'angular-resizable-element'; interface CalendarProviderConfig { eventTitleFormatter?: Provider; dateFormatter?: Provider; utils?: Provider; a11y?: Provider; } declare function provideCalendar(dateAdapter: Provider, config?: CalendarProviderConfig): Provider[]; declare class CalendarEventActionsComponent { event: CalendarEvent; customTemplate: TemplateRef<any>; static ɵfac: i0.ɵɵFactoryDeclaration<CalendarEventActionsComponent, never>; static ɵcmp: i0.ɵɵComponentDeclaration<CalendarEventActionsComponent, "mwl-calendar-event-actions", never, { "event": { "alias": "event"; "required": false; }; "customTemplate": { "alias": "customTemplate"; "required": false; }; }, {}, never, never, true, never>; } declare class CalendarEventTitleComponent { event: CalendarEvent; customTemplate: TemplateRef<any>; view: string; static ɵfac: i0.ɵɵFactoryDeclaration<CalendarEventTitleComponent, never>; static ɵcmp: i0.ɵɵComponentDeclaration<CalendarEventTitleComponent, "mwl-calendar-event-title", never, { "event": { "alias": "event"; "required": false; }; "customTemplate": { "alias": "customTemplate"; "required": false; }; "view": { "alias": "view"; "required": false; }; }, {}, never, never, true, never>; } declare class CalendarTooltipWindowComponent { contents: string; placement: string; event: CalendarEvent; customTemplate: TemplateRef<any>; static ɵfac: i0.ɵɵFactoryDeclaration<CalendarTooltipWindowComponent, never>; static ɵcmp: i0.ɵɵComponentDeclaration<CalendarTooltipWindowComponent, "mwl-calendar-tooltip-window", never, { "contents": { "alias": "contents"; "required": false; }; "placement": { "alias": "placement"; "required": false; }; "event": { "alias": "event"; "required": false; }; "customTemplate": { "alias": "customTemplate"; "required": false; }; }, {}, never, never, true, never>; } declare class CalendarTooltipDirective implements OnDestroy, OnChanges { contents: string; placement: PlacementArray; customTemplate: TemplateRef<any>; event: CalendarEvent; appendToBody: boolean; delay: number | null; private elementRef; private injector; private viewContainerRef; private document; private tooltipRef; private cancelTooltipDelay$; ngOnChanges(changes: SimpleChanges): void; ngOnDestroy(): void; onMouseOver(): void; onMouseOut(): void; private show; private hide; private positionTooltip; static ɵfac: i0.ɵɵFactoryDeclaration<CalendarTooltipDirective, never>; static ɵdir: i0.ɵɵDirectiveDeclaration<CalendarTooltipDirective, "[mwlCalendarTooltip]", never, { "contents": { "alias": "mwlCalendarTooltip"; "required": false; }; "placement": { "alias": "tooltipPlacement"; "required": false; }; "customTemplate": { "alias": "tooltipTemplate"; "required": false; }; "event": { "alias": "tooltipEvent"; "required": false; }; "appendToBody": { "alias": "tooltipAppendToBody"; "required": false; }; "delay": { "alias": "tooltipDelay"; "required": false; }; }, {}, never, never, true, never>; } declare enum CalendarView { Month = "month", Week = "week", Day = "day" } /** * Change the view date to the previous view. For example: * * ```typescript * <button * mwlCalendarPreviousView * [(viewDate)]="viewDate" * [view]="view"> * Previous * </button> * ``` */ declare class CalendarPreviousViewDirective { /** * The current view */ view: CalendarView | 'month' | 'week' | 'day'; /** * The current view date */ viewDate: Date; /** * Days to skip when going back by 1 day */ excludeDays: number[]; /** * The number of days in a week. If set will subtract this amount of days instead of 1 week */ daysInWeek: number; /** * Called when the view date is changed */ viewDateChange: EventEmitter<Date>; /** * @hidden */ private dateAdapter; /** * @hidden */ onClick(): void; static ɵfac: i0.ɵɵFactoryDeclaration<CalendarPreviousViewDirective, never>; static ɵdir: i0.ɵɵDirectiveDeclaration<CalendarPreviousViewDirective, "[mwlCalendarPreviousView]", never, { "view": { "alias": "view"; "required": false; }; "viewDate": { "alias": "viewDate"; "required": false; }; "excludeDays": { "alias": "excludeDays"; "required": false; }; "daysInWeek": { "alias": "daysInWeek"; "required": false; }; }, { "viewDateChange": "viewDateChange"; }, never, never, true, never>; } /** * Change the view date to the next view. For example: * * ```typescript * <button * mwlCalendarNextView * [(viewDate)]="viewDate" * [view]="view"> * Next * </button> * ``` */ declare class CalendarNextViewDirective { /** * The current view */ view: CalendarView | 'month' | 'week' | 'day'; /** * The current view date */ viewDate: Date; /** * Days to skip when going forward by 1 day */ excludeDays: number[]; /** * The number of days in a week. If set will add this amount of days instead of 1 week */ daysInWeek: number; /** * Called when the view date is changed */ viewDateChange: EventEmitter<Date>; /** * @hidden */ private dateAdapter; /** * @hidden */ onClick(): void; static ɵfac: i0.ɵɵFactoryDeclaration<CalendarNextViewDirective, never>; static ɵdir: i0.ɵɵDirectiveDeclaration<CalendarNextViewDirective, "[mwlCalendarNextView]", never, { "view": { "alias": "view"; "required": false; }; "viewDate": { "alias": "viewDate"; "required": false; }; "excludeDays": { "alias": "excludeDays"; "required": false; }; "daysInWeek": { "alias": "daysInWeek"; "required": false; }; }, { "viewDateChange": "viewDateChange"; }, never, never, true, never>; } /** * Change the view date to the current day. For example: * * ```typescript * <button * mwlCalendarToday * [(viewDate)]="viewDate"> * Today * </button> * ``` */ declare class CalendarTodayDirective { /** * The current view date */ viewDate: Date; /** * Called when the view date is changed */ viewDateChange: EventEmitter<Date>; /** * @hidden */ private dateAdapter; /** * @hidden */ onClick(): void; static ɵfac: i0.ɵɵFactoryDeclaration<CalendarTodayDirective, never>; static ɵdir: i0.ɵɵDirectiveDeclaration<CalendarTodayDirective, "[mwlCalendarToday]", never, { "viewDate": { "alias": "viewDate"; "required": false; }; }, { "viewDateChange": "viewDateChange"; }, never, never, true, never>; } /** * This pipe is primarily for rendering the current view title. Example usage: * ```typescript * // where `viewDate` is a `Date` and view is `'month' | 'week' | 'day'` * {{ viewDate | calendarDate:(view + 'ViewTitle'):'en' }} * ``` */ declare class CalendarDatePipe implements PipeTransform { private dateFormatter; private locale; transform(date: Date, method: string, locale?: string, weekStartsOn?: number, excludeDays?: number[], daysInWeek?: number): string; static ɵfac: i0.ɵɵFactoryDeclaration<CalendarDatePipe, never>; static ɵpipe: i0.ɵɵPipeDeclaration<CalendarDatePipe, "calendarDate", true>; } declare class CalendarEventTitlePipe implements PipeTransform { private calendarEventTitle; transform(title: string, titleType: string, event: CalendarEvent): string; static ɵfac: i0.ɵɵFactoryDeclaration<CalendarEventTitlePipe, never>; static ɵpipe: i0.ɵɵPipeDeclaration<CalendarEventTitlePipe, "calendarEventTitle", true>; } /** * The parameters passed to the a11y methods. */ interface A11yParams { /** * A day in the month view */ day?: MonthViewDay; /** * A date */ date?: Date; /** * A calendar event */ event?: CalendarEvent; /** * Action button label e.g. 'Edit' */ action?: EventAction; /** * Users preferred locale */ locale?: string; } /** * This pipe is primarily for rendering aria labels. Example usage: * ```typescript * // where `myEvent` is a `CalendarEvent` and myLocale is a locale identifier * {{ { event: myEvent, locale: myLocale } | calendarA11y: 'eventDescription' }} * ``` */ declare class CalendarA11yPipe implements PipeTransform { private calendarA11y; private locale; transform(a11yParams: A11yParams, method: string): string; static ɵfac: i0.ɵɵFactoryDeclaration<CalendarA11yPipe, never>; static ɵpipe: i0.ɵɵPipeDeclaration<CalendarA11yPipe, "calendarA11y", true>; } declare class ClickDirective implements OnInit, OnDestroy { clickListenerDisabled: boolean; click: EventEmitter<MouseEvent>; private destroy$; private renderer; private elm; ngOnInit(): void; ngOnDestroy(): void; private listen; static ɵfac: i0.ɵɵFactoryDeclaration<ClickDirective, never>; static ɵdir: i0.ɵɵDirectiveDeclaration<ClickDirective, "[mwlClick]", never, { "clickListenerDisabled": { "alias": "clickListenerDisabled"; "required": false; }; }, { "click": "mwlClick"; }, never, never, true, never>; } declare class KeydownEnterDirective implements OnInit, OnDestroy { keydown: EventEmitter<KeyboardEvent>; private keydownListener; private host; private ngZone; private renderer; ngOnInit(): void; ngOnDestroy(): void; static ɵfac: i0.ɵɵFactoryDeclaration<KeydownEnterDirective, never>; static ɵdir: i0.ɵɵDirectiveDeclaration<KeydownEnterDirective, "[mwlKeydownEnter]", never, {}, { "keydown": "mwlKeydownEnter"; }, never, never, true, never>; } /** * This class is responsible for displaying all event titles within the calendar. You may override any of its methods via angulars DI to suit your requirements. For example: * * ```typescript * import { Injectable } from '@angular/core'; * import { CalendarEventTitleFormatter, CalendarEvent } from 'angular-calendar'; * * @Injectable() * class CustomEventTitleFormatter extends CalendarEventTitleFormatter { * * month(event: CalendarEvent): string { * return `Custom prefix: ${event.title}`; * } * * } * * // in your component * providers: [{ * provide: CalendarEventTitleFormatter, * useClass: CustomEventTitleFormatter * }] * ``` */ declare class CalendarEventTitleFormatter { /** * The month view event title. */ month(event: CalendarEvent, title: string): string; /** * The month view event tooltip. Return a falsey value from this to disable the tooltip. */ monthTooltip(event: CalendarEvent, title: string): string; /** * The week view event title. */ week(event: CalendarEvent, title: string): string; /** * The week view event tooltip. Return a falsey value from this to disable the tooltip. */ weekTooltip(event: CalendarEvent, title: string): string; /** * The day view event title. */ day(event: CalendarEvent, title: string): string; /** * The day view event tooltip. Return a falsey value from this to disable the tooltip. */ dayTooltip(event: CalendarEvent, title: string): string; } /** * The parameter type passed to the date formatter methods. */ interface DateFormatterParams { /** * The date to format. */ date: Date; /** * The users preferred locale. */ locale?: string; /** * The start day number of the week */ weekStartsOn?: number; /** * An array of day indexes (0 = sunday, 1 = monday etc) that will be hidden on the view */ excludeDays?: number[]; /** * The number of days in a week. Can be used to create a shorter or longer week view. * The first day of the week will always be the `viewDate` */ daysInWeek?: number; } /** * If using a completely custom date formatter then it should implement this interface. */ interface CalendarDateFormatterInterface { /** * The month view header week day labels */ monthViewColumnHeader(params: DateFormatterParams): string; /** * The month view cell day number */ monthViewDayNumber(params: DateFormatterParams): string; /** * The month view title */ monthViewTitle(params: DateFormatterParams): string; /** * The week view header week day labels */ weekViewColumnHeader(params: DateFormatterParams): string; /** * The week view sub header day and month labels */ weekViewColumnSubHeader(params: DateFormatterParams): string; /** * The week view title */ weekViewTitle(params: DateFormatterParams): string; /** * The time formatting down the left hand side of the day view */ weekViewHour(params: DateFormatterParams): string; /** * The time formatting down the left hand side of the day view */ dayViewHour(params: DateFormatterParams): string; /** * The day view title */ dayViewTitle(params: DateFormatterParams): string; } declare abstract class DateAdapter implements DateAdapter$1 { abstract addWeeks(date: Date | number, amount: number): Date; abstract addMonths(date: Date | number, amount: number): Date; abstract subDays(date: Date | number, amount: number): Date; abstract subWeeks(date: Date | number, amount: number): Date; abstract subMonths(date: Date | number, amount: number): Date; abstract getISOWeek(date: Date | number): number; abstract setDate(date: Date | number, dayOfMonth: number): Date; abstract setMonth(date: Date | number, month: number): Date; abstract setYear(date: Date | number, year: number): Date; abstract getDate(date: Date | number): number; abstract getMonth(date: Date | number): number; abstract getYear(date: Date | number): number; abstract addDays(date: Date | number, amount: number): Date; abstract addHours(date: Date | number, amount: number): Date; abstract addMinutes(date: Date | number, amount: number): Date; abstract addSeconds(date: Date | number, amount: number): Date; abstract differenceInDays(dateLeft: Date | number, dateRight: Date | number): number; abstract differenceInMinutes(dateLeft: Date | number, dateRight: Date | number): number; abstract differenceInSeconds(dateLeft: Date | number, dateRight: Date | number): number; abstract endOfDay(date: Date | number): Date; abstract endOfMonth(date: Date | number): Date; abstract endOfWeek(date: Date | number, options?: { weekStartsOn?: number; }): Date; abstract getDay(date: Date | number): number; abstract isSameDay(dateLeft: Date | number, dateRight: Date | number): boolean; abstract isSameMonth(dateLeft: Date | number, dateRight: Date | number): boolean; abstract isSameSecond(dateLeft: Date | number, dateRight: Date | number): boolean; abstract max(dates: (Date | number)[]): Date; abstract setHours(date: Date | number, hours: number): Date; abstract setMinutes(date: Date | number, minutes: number): Date; abstract startOfDay(date: Date | number): Date; abstract startOfMinute(date: Date | number): Date; abstract startOfMonth(date: Date | number): Date; abstract startOfWeek(date: Date | number, options?: { weekStartsOn?: number; }): Date; abstract getHours(date: Date | number): number; abstract getMinutes(date: Date | number): number; abstract getTimezoneOffset(date: Date | number): number; } declare const MOMENT: InjectionToken<any>; /** * This will use <a href="http://momentjs.com/" target="_blank">moment</a> to do all date formatting. To use this class: * * ```typescript * import { CalendarDateFormatter, CalendarMomentDateFormatter, MOMENT } from 'angular-calendar'; * import moment from 'moment'; * * // in your component * provide: [{ * provide: MOMENT, useValue: moment * }, { * provide: CalendarDateFormatter, useClass: CalendarMomentDateFormatter * }] * * ``` */ declare class CalendarMomentDateFormatter implements CalendarDateFormatterInterface { protected moment: any; protected dateAdapter: DateAdapter; /** * The month view header week day labels */ monthViewColumnHeader({ date, locale }: DateFormatterParams): string; /** * The month view cell day number */ monthViewDayNumber({ date, locale }: DateFormatterParams): string; /** * The month view title */ monthViewTitle({ date, locale }: DateFormatterParams): string; /** * The week view header week day labels */ weekViewColumnHeader({ date, locale }: DateFormatterParams): string; /** * The week view sub header day and month labels */ weekViewColumnSubHeader({ date, locale, }: DateFormatterParams): string; /** * The week view title */ weekViewTitle({ date, locale, weekStartsOn, excludeDays, daysInWeek, }: DateFormatterParams): string; /** * The time formatting down the left hand side of the week view */ weekViewHour({ date, locale }: DateFormatterParams): string; /** * The time formatting down the left hand side of the day view */ dayViewHour({ date, locale }: DateFormatterParams): string; /** * The day view title */ dayViewTitle({ date, locale }: DateFormatterParams): string; static ɵfac: i0.ɵɵFactoryDeclaration<CalendarMomentDateFormatter, never>; static ɵprov: i0.ɵɵInjectableDeclaration<CalendarMomentDateFormatter>; } /** * This will use <a href="https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Intl" target="_blank">Intl</a> API to do all date formatting. * * You will need to include a <a href="https://github.com/andyearnshaw/Intl.js/">polyfill</a> for older browsers. */ declare class CalendarNativeDateFormatter implements CalendarDateFormatterInterface { protected dateAdapter: DateAdapter; /** * The month view header week day labels */ monthViewColumnHeader({ date, locale }: DateFormatterParams): string; /** * The month view cell day number */ monthViewDayNumber({ date, locale }: DateFormatterParams): string; /** * The month view title */ monthViewTitle({ date, locale }: DateFormatterParams): string; /** * The week view header week day labels */ weekViewColumnHeader({ date, locale }: DateFormatterParams): string; /** * The week view sub header day and month labels */ weekViewColumnSubHeader({ date, locale, }: DateFormatterParams): string; /** * The week view title */ weekViewTitle({ date, locale, weekStartsOn, excludeDays, daysInWeek, }: DateFormatterParams): string; /** * The time formatting down the left hand side of the week view */ weekViewHour({ date, locale }: DateFormatterParams): string; /** * The time formatting down the left hand side of the day view */ dayViewHour({ date, locale }: DateFormatterParams): string; /** * The day view title */ dayViewTitle({ date, locale }: DateFormatterParams): string; static ɵfac: i0.ɵɵFactoryDeclaration<CalendarNativeDateFormatter, never>; static ɵprov: i0.ɵɵInjectableDeclaration<CalendarNativeDateFormatter>; } /** * This will use the angular date pipe to do all date formatting. It is the default date formatter used by the calendar. */ declare class CalendarAngularDateFormatter implements CalendarDateFormatterInterface { protected dateAdapter: DateAdapter; /** * The month view header week day labels */ monthViewColumnHeader({ date, locale }: DateFormatterParams): string; /** * The month view cell day number */ monthViewDayNumber({ date, locale }: DateFormatterParams): string; /** * The month view title */ monthViewTitle({ date, locale }: DateFormatterParams): string; /** * The week view header week day labels */ weekViewColumnHeader({ date, locale }: DateFormatterParams): string; /** * The week view sub header day and month labels */ weekViewColumnSubHeader({ date, locale, }: DateFormatterParams): string; /** * The week view title */ weekViewTitle({ date, locale, weekStartsOn, excludeDays, daysInWeek, }: DateFormatterParams): string; /** * The time formatting down the left hand side of the week view */ weekViewHour({ date, locale }: DateFormatterParams): string; /** * The time formatting down the left hand side of the day view */ dayViewHour({ date, locale }: DateFormatterParams): string; /** * The day view title */ dayViewTitle({ date, locale }: DateFormatterParams): string; static ɵfac: i0.ɵɵFactoryDeclaration<CalendarAngularDateFormatter, never>; static ɵprov: i0.ɵɵInjectableDeclaration<CalendarAngularDateFormatter>; } /** * This class is responsible for all formatting of dates. There are 3 implementations available, the `CalendarAngularDateFormatter` (default) which uses the angular date pipe to format dates, the `CalendarNativeDateFormatter` which will use the <a href="https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Intl" target="_blank">Intl</a> API to format dates, or there is the `CalendarMomentDateFormatter` which uses <a href="http://momentjs.com/" target="_blank">moment</a>. * * If you wish, you may override any of the defaults via angulars DI. For example: * * ```typescript * import { CalendarDateFormatter, DateFormatterParams } from 'angular-calendar'; * import { formatDate } from '@angular/common'; * import { Injectable } from '@angular/core'; * * @Injectable() * class CustomDateFormatter extends CalendarDateFormatter { * * public monthViewColumnHeader({date, locale}: DateFormatterParams): string { * return formatDate(date, 'EEE', locale); // use short week days * } * * } * * // in your component that uses the calendar * providers: [{ * provide: CalendarDateFormatter, * useClass: CustomDateFormatter * }] * ``` */ declare class CalendarDateFormatter extends CalendarAngularDateFormatter { static ɵfac: i0.ɵɵFactoryDeclaration<CalendarDateFormatter, never>; static ɵprov: i0.ɵɵInjectableDeclaration<CalendarDateFormatter>; } declare class CalendarUtils { protected dateAdapter: DateAdapter; getMonthView(args: GetMonthViewArgs): MonthView; getWeekViewHeader(args: GetWeekViewHeaderArgs): WeekDay[]; getWeekView(args: GetWeekViewArgs): WeekView; static ɵfac: i0.ɵɵFactoryDeclaration<CalendarUtils, never>; static ɵprov: i0.ɵɵInjectableDeclaration<CalendarUtils>; } /** * This class is responsible for adding accessibility to the calendar. * You may override any of its methods via angulars DI to suit your requirements. * For example: * * ```typescript * import { A11yParams, CalendarA11y } from 'angular-calendar'; * import { formatDate } from '@angular/common'; * import { Injectable } from '@angular/core'; * * // adding your own a11y params * export interface CustomA11yParams extends A11yParams { * isDrSuess?: boolean; * } * * @Injectable() * export class CustomCalendarA11y extends CalendarA11y { * // overriding a function * public openDayEventsLandmark({ date, locale, isDrSuess }: CustomA11yParams): string { * if (isDrSuess) { * return ` * ${formatDate(date, 'EEEE MMMM d', locale)} * Today you are you! That is truer than true! There is no one alive * who is you-er than you! * `; * } * return super.openDayEventsLandmark({ date, locale }); * } * } * * // in your component that uses the calendar * providers: [{ * provide: CalendarA11y, * useClass: CustomCalendarA11y * }] * ``` */ declare class CalendarA11y { /** * Aria label for the badges/date of a cell * @example: `Saturday October 19 1 event click to expand` */ monthCell({ day, locale }: A11yParams): string; /** * Helper method to pluralize event count using native Intl.PluralRules API */ private pluralizeEvents; /** * Aria label for the open day events start landmark * @example: `Saturday October 19 expanded view` */ openDayEventsLandmark({ date, locale }: A11yParams): string; /** * Aria label for alert that a day in the month view was expanded * @example: `Saturday October 19 expanded` */ openDayEventsAlert({ date, locale }: A11yParams): string; /** * Descriptive aria label for an event * @example: `Saturday October 19th, Scott's Pizza Party, from 11:00am to 5:00pm` */ eventDescription({ event, locale }: A11yParams): string; /** * Descriptive aria label for an all day event * @example: * `Scott's Party, event spans multiple days: start time October 19 5:00pm, no stop time` */ allDayEventDescription({ event, locale }: A11yParams): string; /** * Aria label for the calendar event actions icons * @returns 'Edit' for fa-pencil icons, and 'Delete' for fa-times icons */ actionButtonLabel({ action }: A11yParams): string; /** * @returns {number} Tab index to be given to month cells */ monthCellTabIndex(): number; /** * @returns true if the events inside the month cell should be aria-hidden */ hideMonthCellEvents(): boolean; /** * @returns true if event titles should be aria-hidden (global) */ hideEventTitle(): boolean; /** * @returns true if hour segments in the week view should be aria-hidden */ hideWeekHourSegment(): boolean; /** * @returns true if hour segments in the day view should be aria-hidden */ hideDayHourSegment(): boolean; static ɵfac: i0.ɵɵFactoryDeclaration<CalendarA11y, never>; static ɵprov: i0.ɵɵInjectableDeclaration<CalendarA11y>; } declare enum CalendarEventTimesChangedEventType { Drag = "drag", Drop = "drop", Resize = "resize" } /** * The output `$event` type when an event is resized or dragged and dropped. */ interface CalendarEventTimesChangedEvent<MetaType = any> { type: CalendarEventTimesChangedEventType; event: CalendarEvent<MetaType>; newStart: Date; newEnd?: Date; allDay?: boolean; } /** * Import this module to if you're just using a singular view and want to save on bundle size. Example usage: * * ```typescript * import { CalendarCommonModule, CalendarMonthModule } from 'angular-calendar'; * * @NgModule({ * imports: [ * CalendarCommonModule.forRoot(), * CalendarMonthModule * ] * }) * class MyModule {} * ``` * * @deprecated use `provideCalendar({provide: DateAdapter, useFactory: adapterFactory})` and import the standalone `CalendarPreviousViewDirective` / `CalendarNextViewDirective` / `CalendarTodayDirective` / `CalendarDatePipe` directives + pipes instead * */ declare class CalendarCommonModule { static forRoot(dateAdapter: Provider, config?: CalendarProviderConfig): ModuleWithProviders<CalendarCommonModule>; static ɵfac: i0.ɵɵFactoryDeclaration<CalendarCommonModule, never>; static ɵmod: i0.ɵɵNgModuleDeclaration<CalendarCommonModule, never, [typeof CalendarEventActionsComponent, typeof CalendarEventTitleComponent, typeof CalendarTooltipWindowComponent, typeof CalendarTooltipDirective, typeof CalendarPreviousViewDirective, typeof CalendarNextViewDirective, typeof CalendarTodayDirective, typeof CalendarDatePipe, typeof CalendarEventTitlePipe, typeof CalendarA11yPipe, typeof ClickDirective, typeof KeydownEnterDirective], [typeof CalendarEventActionsComponent, typeof CalendarEventTitleComponent, typeof CalendarTooltipWindowComponent, typeof CalendarTooltipDirective, typeof CalendarPreviousViewDirective, typeof CalendarNextViewDirective, typeof CalendarTodayDirective, typeof CalendarDatePipe, typeof CalendarEventTitlePipe, typeof CalendarA11yPipe, typeof ClickDirective, typeof KeydownEnterDirective]>; static ɵinj: i0.ɵɵInjectorDeclaration<CalendarCommonModule>; } interface CalendarMonthViewBeforeRenderEvent { header: WeekDay[]; body: MonthViewDay[]; period: ViewPeriod; } 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> * ``` */ declare class CalendarMonthViewComponent implements OnChanges, OnInit, OnDestroy { /** * 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 */ protected cdr: ChangeDetectorRef; /** * @hidden */ protected utils: CalendarUtils; /** * @hidden */ protected dateAdapter: DateAdapter; /** * @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": { "alias": "viewDate"; "required": false; }; "events": { "alias": "events"; "required": false; }; "excludeDays": { "alias": "excludeDays"; "required": false; }; "activeDayIsOpen": { "alias": "activeDayIsOpen"; "required": false; }; "activeDay": { "alias": "activeDay"; "required": false; }; "refresh": { "alias": "refresh"; "required": false; }; "locale": { "alias": "locale"; "required": false; }; "tooltipPlacement": { "alias": "tooltipPlacement"; "required": false; }; "tooltipTemplate": { "alias": "tooltipTemplate"; "required": false; }; "tooltipAppendToBody": { "alias": "tooltipAppendToBody"; "required": false; }; "tooltipDelay": { "alias": "tooltipDelay"; "required": false; }; "weekStartsOn": { "alias": "weekStartsOn"; "required": false; }; "headerTemplate": { "alias": "headerTemplate"; "required": false; }; "cellTemplate": { "alias": "cellTemplate"; "required": false; }; "openDayEventsTemplate": { "alias": "openDayEventsTemplate"; "required": false; }; "eventTitleTemplate": { "alias": "eventTitleTemplate"; "required": false; }; "eventActionsTemplate": { "alias": "eventActionsTemplate"; "required": false; }; "weekendDays": { "alias": "weekendDays"; "required": false; }; }, { "beforeViewRender": "beforeViewRender"; "dayClicked": "dayClicked"; "eventClicked": "eventClicked"; "columnHeaderClicked": "columnHeaderClicked"; "eventTimesChanged": "eventTimesChanged"; }, never, never, true, never>; } declare function getWeekViewPeriod(dateAdapter: DateAdapter, viewDate: Date, weekStartsOn: number, excluded?: number[], daysInWeek?: number): { viewStart: Date; viewEnd: Date; }; declare function isWithinThreshold({ x, y }: { x: number; y: number; }): boolean; declare class CalendarMonthCellComponent { day: MonthViewDay; openDay: MonthViewDay; locale: string; tooltipPlacement: PlacementArray; tooltipAppendToBody: boolean; customTemplate: TemplateRef<any>; tooltipTemplate: TemplateRef<any>; tooltipDelay: number | null; highlightDay: EventEmitter<any>; unhighlightDay: EventEmitter<any>; eventClicked: EventEmitter<{ event: CalendarEvent; sourceEvent: MouseEvent; }>; validateDrag: typeof isWithinThreshold; static ɵfac: i0.ɵɵFactoryDeclaration<CalendarMonthCellComponent, never>; static ɵcmp: i0.ɵɵComponentDeclaration<CalendarMonthCellComponent, "mwl-calendar-month-cell", never, { "day": { "alias": "day"; "required": false; }; "openDay": { "alias": "openDay"; "required": false; }; "locale": { "alias": "locale"; "required": false; }; "tooltipPlacement": { "alias": "tooltipPlacement"; "required": false; }; "tooltipAppendToBody": { "alias": "tooltipAppendToBody"; "required": false; }; "customTemplate": { "alias": "customTemplate"; "required": false; }; "tooltipTemplate": { "alias": "tooltipTemplate"; "required": false; }; "tooltipDelay": { "alias": "tooltipDelay"; "required": false; }; }, { "highlightDay": "highlightDay"; "unhighlightDay": "unhighlightDay"; "eventClicked": "eventClicked"; }, never, never, true, never>; } declare class CalendarOpenDayEventsComponent { locale: string; isOpen: boolean; events: CalendarEvent[]; customTemplate: TemplateRef<any>; eventTitleTemplate: TemplateRef<any>; eventActionsTemplate: TemplateRef<any>; date: Date; eventClicked: EventEmitter<{ event: CalendarEvent; sourceEvent: MouseEvent | KeyboardEvent; }>; validateDrag: typeof isWithinThreshold; static ɵfac: i0.ɵɵFactoryDeclaration<CalendarOpenDayEventsComponent, never>; static ɵcmp: i0.ɵɵComponentDeclaration<CalendarOpenDayEventsComponent, "mwl-calendar-open-day-events", never, { "locale": { "alias": "locale"; "required": false; }; "isOpen": { "alias": "isOpen"; "required": false; }; "events": { "alias": "events"; "required": false; }; "customTemplate": { "alias": "customTemplate"; "required": false; }; "eventTitleTemplate": { "alias": "eventTitleTemplate"; "required": false; }; "eventActionsTemplate": { "alias": "eventActionsTemplate"; "required": false; }; "date": { "alias": "date"; "required": false; }; }, { "eventClicked": "eventClicked"; }, never, never, true, never>; } declare class CalendarMonthViewHeaderComponent { days: WeekDay[]; locale: string; customTemplate: TemplateRef<any>; columnHeaderClicked: EventEmitter<{ isoDayNumber: number; sourceEvent: MouseEvent; }>; static ɵfac: i0.ɵɵFactoryDeclaration<CalendarMonthViewHeaderComponent, never>; static ɵcmp: i0.ɵɵComponentDeclaration<CalendarMonthViewHeaderComponent, "mwl-calendar-month-view-header", never, { "days": { "alias": "days"; "required": false; }; "locale": { "alias": "locale"; "required": false; }; "customTemplate": { "alias": "customTemplate"; "required": false; }; }, { "columnHeaderClicked": "columnHeaderClicked"; }, never, never, true, never>; } /** * @deprecated import the standalone component `CalendarMonthViewComponent` instead */ declare class CalendarMonthModule { static ɵfac: i0.ɵɵFactoryDeclaration<CalendarMonthModule, never>; static ɵmod: i0.ɵɵNgModuleDeclaration<CalendarMonthModule, never, [typeof i1.DragAndDropModule, typeof CalendarCommonModule, typeof CalendarMonthViewComponent, typeof CalendarMonthCellComponent, typeof CalendarOpenDayEventsComponent, typeof CalendarMonthViewHeaderComponent], [typeof i1.DragAndDropModule, typeof CalendarMonthViewComponent, typeof CalendarMonthCellComponent, typeof CalendarOpenDayEventsComponent, typeof CalendarMonthViewHeaderComponent]>; static ɵinj: i0.ɵɵInjectorDeclaration<CalendarMonthModule>; } interface WeekViewAllDayEventResize { originalOffset: number; originalSpan: number; edge: string; } interface CalendarWeekViewBeforeRenderEvent extends WeekView { header: WeekDay[]; } /** * Shows all events on a given week. Example usage: * * ```typescript * <mwl-calendar-week-view * [viewDate]="viewDate" * [events]="events"> * </mwl-calendar-week-view> * ``` */ declare class CalendarWeekViewComponent implements OnChanges, OnInit, OnDestroy, AfterViewInit { /** * 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[]; /** * 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. * This is ignored when the `daysInWeek` input is also set as the `viewDate` will be used as the start of the week instead. * Note, you should also pass this to the calendar title pipe so it shows the same days: {{ viewDate | calendarDate:(view + 'ViewTitle'):locale:weekStartsOn }} * 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 for week view events */ eventTemplate: TemplateRef<any>; /** * A custom template to use for event titles */ eventTitleTemplate: TemplateRef<any>; /** * A custom template to use for event actions */ eventActionsTemplate: TemplateRef<any>; /** * The precision to display events. * `days` will round event start and end dates to the nearest day and `minutes` will not do this rounding */ precision: 'days' | 'minutes'; /** * An array of day indexes (0 = sunday, 1 = monday etc) that indicate which days are weekends */ weekendDays: number[]; /** * Whether to snap events to a grid when dragging */ snapDraggedEvents: boolean; /** * The number of segments in an hour. Must divide equally into 60. */ hourSegments: number; /** * The duration of each segment group in minutes */ hourDuration: number; /** * The height in pixels of each hour segment */ hourSegmentHeight: number; /** * The minimum height in pixels of each event */ minimumEventHeight: number; /** * The day start hours in 24 hour time. Must be 0-23 */ dayStartHour: number; /** * The day start minutes. Must be 0-59 */ dayStartMinute: number; /** * The day end hours in 24 hour time. Must be 0-23 */ dayEndHour: number; /** * The day end minutes. Must be 0-59 */ dayEndMinute: number; /** * A custom template to use to replace the hour segment */ hourSegmentTemplate: TemplateRef<any>; /** * The grid size to snap resizing and dragging of hourly events to */ eventSnapSize: number; /** * A custom template to use for the all day events label text */ allDayEventsLabelTemplate: TemplateRef<any>; /** * The number of days in a week. Can be used to create a shorter or longer week view. * The first day of the week will always be the `viewDate` and `weekStartsOn` if set will be ignored */ daysInWeek: number; /** * A custom template to use for the current time marker */ currentTimeMarkerTemplate: TemplateRef<any>; /** * Allow you to customise where events can be dragged and resized to. * Return true to allow dragging and resizing to the new location, or false to prevent it */ validateEventTimesChanged: (event: CalendarEventTimesChangedEvent) => boolean; /** * Customise the document cursor when dragging to resize an event */ resizeCursors: Partial<Pick<ResizeCursors, 'leftOrRight' | 'topOrBottom'>>; /** * Called when a header week day is clicked. Adding a `cssClass` property on `$event.day` will add that class to the header element */ dayHeaderClicked: EventEmitter<{ day: WeekDay; sourceEvent: MouseEvent; }>; /** * Called when an event title is clicked */ eventClicked: EventEmitter<{ event: CalendarEvent; sourceEvent: MouseEvent | KeyboardEvent; }>; /** * Called when an event is resized or dragged and dropped */ eventTimesChanged: EventEmitter<CalendarEventTimesChangedEvent<any>>; /** * An output that will be called before the view is rendered for the current week. * If you add the `cssClass` property to a day in the header it will add that class to the cell element in the template */ beforeViewRender: EventEmitter<CalendarWeekViewBeforeRenderEvent>; /** * Called when an hour segment is clicked */ hourSegmentClicked: EventEmitter<{ date: Date; sourceEvent: MouseEvent; }>; /** * @hidden */ days: WeekDay[]; /** * @hidden */ view: WeekView; /** * @hidden */ refreshSubscription: Subscription; /** * @hidden */ allDayEventResizes: Map<WeekViewAllDayEvent, WeekViewAllDayEventResize>; /** * @hidden */ timeEventResizes: Map<CalendarEvent, ResizeEvent>; /** * @hidden */ eventDragEnterByType: { allDay: number; time: number; }; /** * @hidden */ dragActive: boolean; /** * @hidden */ dragAlreadyMoved: boolean; /** * @hidden */ validateDrag: ValidateDrag; /** * @hidden */ validateResize: (args: any) => boolean; /** * @hidden */ dayColumnWidth: number; /** * @hidden */ calendarId: symbol; /** * @hidden */ lastDraggedEvent: CalendarEvent; /** * @hidden */ rtl: boolean; /** * @hidden */ private lastDragEnterDate; /** * @hidden */ protected cdr: ChangeDetectorRef; /** * @hidden */ protected utils: CalendarUtils; /** * @hidden */ protected dateAdapter: DateAdapter; /** * @hidden */ protected element: ElementRef<HTMLElement>; /** * @hidden */ ngOnInit(): void; /** * @hidden */ ngOnChanges(changes: any): void; /** * @hidden */ ngOnDestroy(): void; /** * @hidden */ ngAfterViewInit(): void; /** * @hidden */ timeEventResizeStarted(eventsContainer: HTMLElement, timeEvent: WeekViewTimeEvent, resizeEvent: ResizeEvent): void; /** * @hidden */ timeEventResizing(timeEvent: WeekViewTimeEvent, resizeEvent: ResizeEvent): void; /** * @hidden */ timeEventResizeEnded(timeEvent: WeekViewTimeEvent): void; /** * @hidden */ allDayEventResizeStarted(allDayEventsContainer: HTMLElement, allDayEvent: WeekViewAllDayEvent, resizeEvent: ResizeEvent): void; /** * @hidden */ allDayEventResizing(allDayEvent: WeekViewAllDayEvent, resizeEvent: ResizeEvent, dayWidth: number): void; /** * @hidden */ allDayEventResizeEnded(allDayEvent: WeekViewAllDayEvent): void; /** * @hidden */ getDayColumnWidth(eventRowContainer: HTMLElement): number; /** * @hidden */ dateDragEnter(date: Date): void; /** * @hidden */ eventDropped(dropEvent: Pick<DropEvent<{ event?: CalendarEvent; calendarId?: symbol; }>, 'dropData'>, date: Date, allDay: boolean): void; /** * @hidden */ dragEnter(type: 'allDay' | 'time'): void; /** * @hidden */ dragLeave(type: 'allDay' | 'time'): void; /** * @hidden */ dragStarted(eventsContainerElement: HTMLElement, eventElement: HTMLElement, event: WeekViewTimeEvent | WeekViewAllDayEvent, useY: boolean): void; /** * @hidden */ dragMove(dayEvent: WeekViewTimeEvent, dragEvent: DragMoveEvent): void; /** * @hidden */ allDayEventDragMove(): void; /** * @hidden */ dragEnded(weekEvent: WeekViewAllDayEvent | WeekViewTimeEvent, dragEndEvent: DragEndEvent, dayWidth: number, useY?: boolean): void; protected refreshHeader(): void; protected refreshBody(): void; protected refreshAll(): void; protected emitBeforeViewRender():