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
TypeScript
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():