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
TypeScript
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>;
}