UNPKG

7.15 kBTypeScriptView Raw
1import { OnChanges, EventEmitter, ChangeDetectorRef, OnInit, OnDestroy, TemplateRef } from '@angular/core';
2import { CalendarEvent, WeekDay, MonthView, MonthViewDay, ViewPeriod } from 'calendar-utils';
3import { Subject, Subscription } from 'rxjs';
4import { CalendarEventTimesChangedEvent } from '../../common/calendar-event-times-changed-event/calendar-event-times-changed-event.interface';
5import { CalendarUtils } from '../../common/calendar-utils/calendar-utils.provider';
6import { DateAdapter } from '../../../date-adapters/date-adapter';
7import { PlacementArray } from 'positioning';
8import * as i0 from "@angular/core";
9export interface CalendarMonthViewBeforeRenderEvent {
10 header: WeekDay[];
11 body: MonthViewDay[];
12 period: ViewPeriod;
13}
14export interface CalendarMonthViewEventTimesChangedEvent<EventMetaType = any, DayMetaType = any> extends CalendarEventTimesChangedEvent<EventMetaType> {
15 day: MonthViewDay<DayMetaType>;
16}
17/**
18 * Shows all events on a given month. Example usage:
19 *
20 * ```typescript
21 * <mwl-calendar-month-view
22 * [viewDate]="viewDate"
23 * [events]="events">
24 * </mwl-calendar-month-view>
25 * ```
26 */
27export declare class CalendarMonthViewComponent implements OnChanges, OnInit, OnDestroy {
28 protected cdr: ChangeDetectorRef;
29 protected utils: CalendarUtils;
30 protected dateAdapter: DateAdapter;
31 /**
32 * The current view date
33 */
34 viewDate: Date;
35 /**
36 * An array of events to display on view.
37 * The schema is available here: https://github.com/mattlewis92/calendar-utils/blob/c51689985f59a271940e30bc4e2c4e1fee3fcb5c/src/calendarUtils.ts#L49-L63
38 */
39 events: CalendarEvent[];
40 /**
41 * An array of day indexes (0 = sunday, 1 = monday etc) that will be hidden on the view
42 */
43 excludeDays: number[];
44 /**
45 * Whether the events list for the day of the `viewDate` option is visible or not
46 */
47 activeDayIsOpen: boolean;
48 /**
49 * If set will be used to determine the day that should be open. If not set, the `viewDate` is used
50 */
51 activeDay: Date;
52 /**
53 * An observable that when emitted on will re-render the current view
54 */
55 refresh: Subject<any>;
56 /**
57 * The locale used to format dates
58 */
59 locale: string;
60 /**
61 * The placement of the event tooltip
62 */
63 tooltipPlacement: PlacementArray;
64 /**
65 * A custom template to use for the event tooltips
66 */
67 tooltipTemplate: TemplateRef<any>;
68 /**
69 * Whether to append tooltips to the body or next to the trigger element
70 */
71 tooltipAppendToBody: boolean;
72 /**
73 * The delay in milliseconds before the tooltip should be displayed. If not provided the tooltip
74 * will be displayed immediately.
75 */
76 tooltipDelay: number | null;
77 /**
78 * The start number of the week.
79 * If using the moment date adapter this option won't do anything and you'll need to set it globally like so:
80 * ```
81 * moment.updateLocale('en', {
82 * week: {
83 * dow: 1, // set start of week to monday instead
84 * doy: 0,
85 * },
86 * });
87 * ```
88 */
89 weekStartsOn: number;
90 /**
91 * A custom template to use to replace the header
92 */
93 headerTemplate: TemplateRef<any>;
94 /**
95 * A custom template to use to replace the day cell
96 */
97 cellTemplate: TemplateRef<any>;
98 /**
99 * A custom template to use for the slide down box of events for the active day
100 */
101 openDayEventsTemplate: TemplateRef<any>;
102 /**
103 * A custom template to use for event titles
104 */
105 eventTitleTemplate: TemplateRef<any>;
106 /**
107 * A custom template to use for event actions
108 */
109 eventActionsTemplate: TemplateRef<any>;
110 /**
111 * An array of day indexes (0 = sunday, 1 = monday etc) that indicate which days are weekends
112 */
113 weekendDays: number[];
114 /**
115 * An output that will be called before the view is rendered for the current month.
116 * If you add the `cssClass` property to a day in the body it will add that class to the cell element in the template
117 */
118 beforeViewRender: EventEmitter<CalendarMonthViewBeforeRenderEvent>;
119 /**
120 * Called when the day cell is clicked
121 */
122 dayClicked: EventEmitter<{
123 day: MonthViewDay;
124 sourceEvent: MouseEvent | KeyboardEvent;
125 }>;
126 /**
127 * Called when the event title is clicked
128 */
129 eventClicked: EventEmitter<{
130 event: CalendarEvent;
131 sourceEvent: MouseEvent | KeyboardEvent;
132 }>;
133 /**
134 * Called when a header week day is clicked. Returns ISO day number.
135 */
136 columnHeaderClicked: EventEmitter<{
137 isoDayNumber: number;
138 sourceEvent: MouseEvent | KeyboardEvent;
139 }>;
140 /**
141 * Called when an event is dragged and dropped
142 */
143 eventTimesChanged: EventEmitter<CalendarMonthViewEventTimesChangedEvent<any, any>>;
144 /**
145 * @hidden
146 */
147 columnHeaders: WeekDay[];
148 /**
149 * @hidden
150 */
151 view: MonthView;
152 /**
153 * @hidden
154 */
155 openRowIndex: number;
156 /**
157 * @hidden
158 */
159 openDay: MonthViewDay;
160 /**
161 * @hidden
162 */
163 refreshSubscription: Subscription;
164 /**
165 * @hidden
166 */
167 constructor(cdr: ChangeDetectorRef, utils: CalendarUtils, locale: string, dateAdapter: DateAdapter);
168 /**
169 * @hidden
170 */
171 trackByRowOffset: (index: number, offset: number) => string;
172 /**
173 * @hidden
174 */
175 trackByDate: (index: number, day: MonthViewDay) => string;
176 /**
177 * @hidden
178 */
179 ngOnInit(): void;
180 /**
181 * @hidden
182 */
183 ngOnChanges(changes: any): void;
184 /**
185 * @hidden
186 */
187 ngOnDestroy(): void;
188 /**
189 * @hidden
190 */
191 toggleDayHighlight(event: CalendarEvent, isHighlighted: boolean): void;
192 /**
193 * @hidden
194 */
195 eventDropped(droppedOn: MonthViewDay, event: CalendarEvent, draggedFrom?: MonthViewDay): void;
196 protected refreshHeader(): void;
197 protected refreshBody(): void;
198 protected checkActiveDayIsOpen(): void;
199 protected refreshAll(): void;
200 protected emitBeforeViewRender(): void;
201 static ɵfac: i0.ɵɵFactoryDeclaration<CalendarMonthViewComponent, never>;
202 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>;
203}