UNPKG

14 kBTypeScriptView Raw
1import { EventEmitter, ChangeDetectorRef, OnChanges, OnInit, OnDestroy, TemplateRef, ElementRef, AfterViewInit } from '@angular/core';
2import { Subject, Subscription } from 'rxjs';
3import { WeekDay, CalendarEvent, WeekViewAllDayEvent, WeekView, WeekViewHourColumn, WeekViewTimeEvent, WeekViewHourSegment, WeekViewHour, WeekViewAllDayEventRow } from 'calendar-utils';
4import { ResizeEvent } from 'angular-resizable-element';
5import { ResizeCursors } from 'angular-resizable-element';
6import { CalendarEventTimesChangedEvent } from '../../common/calendar-event-times-changed-event/calendar-event-times-changed-event.interface';
7import { CalendarUtils } from '../../common/calendar-utils/calendar-utils.provider';
8import { DateAdapter } from '../../../date-adapters/date-adapter';
9import { DragEndEvent, DropEvent, DragMoveEvent, ValidateDrag } from 'angular-draggable-droppable';
10import { PlacementArray } from 'positioning';
11import * as i0 from "@angular/core";
12export interface WeekViewAllDayEventResize {
13 originalOffset: number;
14 originalSpan: number;
15 edge: string;
16}
17export interface CalendarWeekViewBeforeRenderEvent extends WeekView {
18 header: WeekDay[];
19}
20/**
21 * Shows all events on a given week. Example usage:
22 *
23 * ```typescript
24 * <mwl-calendar-week-view
25 * [viewDate]="viewDate"
26 * [events]="events">
27 * </mwl-calendar-week-view>
28 * ```
29 */
30export declare class CalendarWeekViewComponent implements OnChanges, OnInit, OnDestroy, AfterViewInit {
31 protected cdr: ChangeDetectorRef;
32 protected utils: CalendarUtils;
33 protected dateAdapter: DateAdapter;
34 protected element: ElementRef<HTMLElement>;
35 /**
36 * The current view date
37 */
38 viewDate: Date;
39 /**
40 * An array of events to display on view
41 * The schema is available here: https://github.com/mattlewis92/calendar-utils/blob/c51689985f59a271940e30bc4e2c4e1fee3fcb5c/src/calendarUtils.ts#L49-L63
42 */
43 events: CalendarEvent[];
44 /**
45 * An array of day indexes (0 = sunday, 1 = monday etc) that will be hidden on the view
46 */
47 excludeDays: number[];
48 /**
49 * An observable that when emitted on will re-render the current view
50 */
51 refresh: Subject<any>;
52 /**
53 * The locale used to format dates
54 */
55 locale: string;
56 /**
57 * The placement of the event tooltip
58 */
59 tooltipPlacement: PlacementArray;
60 /**
61 * A custom template to use for the event tooltips
62 */
63 tooltipTemplate: TemplateRef<any>;
64 /**
65 * Whether to append tooltips to the body or next to the trigger element
66 */
67 tooltipAppendToBody: boolean;
68 /**
69 * The delay in milliseconds before the tooltip should be displayed. If not provided the tooltip
70 * will be displayed immediately.
71 */
72 tooltipDelay: number | null;
73 /**
74 * The start number of the week.
75 * This is ignored when the `daysInWeek` input is also set as the `viewDate` will be used as the start of the week instead.
76 * Note, you should also pass this to the calendar title pipe so it shows the same days: {{ viewDate | calendarDate:(view + 'ViewTitle'):locale:weekStartsOn }}
77 * If using the moment date adapter this option won't do anything and you'll need to set it globally like so:
78 * ```
79 * moment.updateLocale('en', {
80 * week: {
81 * dow: 1, // set start of week to monday instead
82 * doy: 0,
83 * },
84 * });
85 * ```
86 */
87 weekStartsOn: number;
88 /**
89 * A custom template to use to replace the header
90 */
91 headerTemplate: TemplateRef<any>;
92 /**
93 * A custom template to use for week view events
94 */
95 eventTemplate: TemplateRef<any>;
96 /**
97 * A custom template to use for event titles
98 */
99 eventTitleTemplate: TemplateRef<any>;
100 /**
101 * A custom template to use for event actions
102 */
103 eventActionsTemplate: TemplateRef<any>;
104 /**
105 * The precision to display events.
106 * `days` will round event start and end dates to the nearest day and `minutes` will not do this rounding
107 */
108 precision: 'days' | 'minutes';
109 /**
110 * An array of day indexes (0 = sunday, 1 = monday etc) that indicate which days are weekends
111 */
112 weekendDays: number[];
113 /**
114 * Whether to snap events to a grid when dragging
115 */
116 snapDraggedEvents: boolean;
117 /**
118 * The number of segments in an hour. Must divide equally into 60.
119 */
120 hourSegments: number;
121 /**
122 * The duration of each segment group in minutes
123 */
124 hourDuration: number;
125 /**
126 * The height in pixels of each hour segment
127 */
128 hourSegmentHeight: number;
129 /**
130 * The minimum height in pixels of each event
131 */
132 minimumEventHeight: number;
133 /**
134 * The day start hours in 24 hour time. Must be 0-23
135 */
136 dayStartHour: number;
137 /**
138 * The day start minutes. Must be 0-59
139 */
140 dayStartMinute: number;
141 /**
142 * The day end hours in 24 hour time. Must be 0-23
143 */
144 dayEndHour: number;
145 /**
146 * The day end minutes. Must be 0-59
147 */
148 dayEndMinute: number;
149 /**
150 * A custom template to use to replace the hour segment
151 */
152 hourSegmentTemplate: TemplateRef<any>;
153 /**
154 * The grid size to snap resizing and dragging of hourly events to
155 */
156 eventSnapSize: number;
157 /**
158 * A custom template to use for the all day events label text
159 */
160 allDayEventsLabelTemplate: TemplateRef<any>;
161 /**
162 * The number of days in a week. Can be used to create a shorter or longer week view.
163 * The first day of the week will always be the `viewDate` and `weekStartsOn` if set will be ignored
164 */
165 daysInWeek: number;
166 /**
167 * A custom template to use for the current time marker
168 */
169 currentTimeMarkerTemplate: TemplateRef<any>;
170 /**
171 * Allow you to customise where events can be dragged and resized to.
172 * Return true to allow dragging and resizing to the new location, or false to prevent it
173 */
174 validateEventTimesChanged: (event: CalendarEventTimesChangedEvent) => boolean;
175 /**
176 * Customise the document cursor when dragging to resize an event
177 */
178 resizeCursors: Partial<Pick<ResizeCursors, 'leftOrRight' | 'topOrBottom'>>;
179 /**
180 * Called when a header week day is clicked. Adding a `cssClass` property on `$event.day` will add that class to the header element
181 */
182 dayHeaderClicked: EventEmitter<{
183 day: WeekDay;
184 sourceEvent: MouseEvent;
185 }>;
186 /**
187 * Called when an event title is clicked
188 */
189 eventClicked: EventEmitter<{
190 event: CalendarEvent;
191 sourceEvent: MouseEvent | KeyboardEvent;
192 }>;
193 /**
194 * Called when an event is resized or dragged and dropped
195 */
196 eventTimesChanged: EventEmitter<CalendarEventTimesChangedEvent<any>>;
197 /**
198 * An output that will be called before the view is rendered for the current week.
199 * If you add the `cssClass` property to a day in the header it will add that class to the cell element in the template
200 */
201 beforeViewRender: EventEmitter<CalendarWeekViewBeforeRenderEvent>;
202 /**
203 * Called when an hour segment is clicked
204 */
205 hourSegmentClicked: EventEmitter<{
206 date: Date;
207 sourceEvent: MouseEvent;
208 }>;
209 /**
210 * @hidden
211 */
212 days: WeekDay[];
213 /**
214 * @hidden
215 */
216 view: WeekView;
217 /**
218 * @hidden
219 */
220 refreshSubscription: Subscription;
221 /**
222 * @hidden
223 */
224 allDayEventResizes: Map<WeekViewAllDayEvent, WeekViewAllDayEventResize>;
225 /**
226 * @hidden
227 */
228 timeEventResizes: Map<CalendarEvent, ResizeEvent>;
229 /**
230 * @hidden
231 */
232 eventDragEnterByType: {
233 allDay: number;
234 time: number;
235 };
236 /**
237 * @hidden
238 */
239 dragActive: boolean;
240 /**
241 * @hidden
242 */
243 dragAlreadyMoved: boolean;
244 /**
245 * @hidden
246 */
247 validateDrag: ValidateDrag;
248 /**
249 * @hidden
250 */
251 validateResize: (args: any) => boolean;
252 /**
253 * @hidden
254 */
255 dayColumnWidth: number;
256 /**
257 * @hidden
258 */
259 calendarId: symbol;
260 /**
261 * @hidden
262 */
263 lastDraggedEvent: CalendarEvent;
264 /**
265 * @hidden
266 */
267 rtl: boolean;
268 /**
269 * @hidden
270 */
271 trackByWeekDayHeaderDate: (index: number, day: WeekDay) => string;
272 /**
273 * @hidden
274 */
275 trackByHourSegment: (index: number, segment: WeekViewHourSegment) => string;
276 /**
277 * @hidden
278 */
279 trackByHour: (index: number, hour: WeekViewHour) => string;
280 /**
281 * @hidden
282 */
283 trackByWeekAllDayEvent: (index: number, weekEvent: WeekViewAllDayEvent) => string | number | CalendarEvent<any>;
284 /**
285 * @hidden
286 */
287 trackByWeekTimeEvent: (index: number, weekEvent: WeekViewTimeEvent) => string | number | CalendarEvent<any>;
288 /**
289 * @hidden
290 */
291 private lastDragEnterDate;
292 /**
293 * @hidden
294 */
295 constructor(cdr: ChangeDetectorRef, utils: CalendarUtils, locale: string, dateAdapter: DateAdapter, element: ElementRef<HTMLElement>);
296 /**
297 * @hidden
298 */
299 trackByHourColumn: (index: number, column: WeekViewHourColumn) => string | WeekViewHourColumn;
300 /**
301 * @hidden
302 */
303 trackById: (index: number, row: WeekViewAllDayEventRow) => string;
304 /**
305 * @hidden
306 */
307 ngOnInit(): void;
308 /**
309 * @hidden
310 */
311 ngOnChanges(changes: any): void;
312 /**
313 * @hidden
314 */
315 ngOnDestroy(): void;
316 /**
317 * @hidden
318 */
319 ngAfterViewInit(): void;
320 /**
321 * @hidden
322 */
323 timeEventResizeStarted(eventsContainer: HTMLElement, timeEvent: WeekViewTimeEvent, resizeEvent: ResizeEvent): void;
324 /**
325 * @hidden
326 */
327 timeEventResizing(timeEvent: WeekViewTimeEvent, resizeEvent: ResizeEvent): void;
328 /**
329 * @hidden
330 */
331 timeEventResizeEnded(timeEvent: WeekViewTimeEvent): void;
332 /**
333 * @hidden
334 */
335 allDayEventResizeStarted(allDayEventsContainer: HTMLElement, allDayEvent: WeekViewAllDayEvent, resizeEvent: ResizeEvent): void;
336 /**
337 * @hidden
338 */
339 allDayEventResizing(allDayEvent: WeekViewAllDayEvent, resizeEvent: ResizeEvent, dayWidth: number): void;
340 /**
341 * @hidden
342 */
343 allDayEventResizeEnded(allDayEvent: WeekViewAllDayEvent): void;
344 /**
345 * @hidden
346 */
347 getDayColumnWidth(eventRowContainer: HTMLElement): number;
348 /**
349 * @hidden
350 */
351 dateDragEnter(date: Date): void;
352 /**
353 * @hidden
354 */
355 eventDropped(dropEvent: Pick<DropEvent<{
356 event?: CalendarEvent;
357 calendarId?: symbol;
358 }>, 'dropData'>, date: Date, allDay: boolean): void;
359 /**
360 * @hidden
361 */
362 dragEnter(type: 'allDay' | 'time'): void;
363 /**
364 * @hidden
365 */
366 dragLeave(type: 'allDay' | 'time'): void;
367 /**
368 * @hidden
369 */
370 dragStarted(eventsContainerElement: HTMLElement, eventElement: HTMLElement, event: WeekViewTimeEvent | WeekViewAllDayEvent, useY: boolean): void;
371 /**
372 * @hidden
373 */
374 dragMove(dayEvent: WeekViewTimeEvent, dragEvent: DragMoveEvent): void;
375 /**
376 * @hidden
377 */
378 allDayEventDragMove(): void;
379 /**
380 * @hidden
381 */
382 dragEnded(weekEvent: WeekViewAllDayEvent | WeekViewTimeEvent, dragEndEvent: DragEndEvent, dayWidth: number, useY?: boolean): void;
383 protected refreshHeader(): void;
384 protected refreshBody(): void;
385 protected refreshAll(): void;
386 protected emitBeforeViewRender(): void;
387 protected getWeekView(events: CalendarEvent[]): WeekView;
388 protected getDragMovedEventTimes(weekEvent: WeekViewAllDayEvent | WeekViewTimeEvent, dragEndEvent: DragEndEvent | DragMoveEvent, dayWidth: number, useY: boolean): {
389 start: Date;
390 end: Date;
391 };
392 protected restoreOriginalEvents(tempEvents: CalendarEvent[], adjustedEvents: Map<CalendarEvent, CalendarEvent>, snapDraggedEvents?: boolean): void;
393 protected getTimeEventResizedDates(calendarEvent: CalendarEvent, resizeEvent: ResizeEvent): {
394 start: Date;
395 end: Date;
396 };
397 protected resizeStarted(eventsContainer: HTMLElement, event: WeekViewTimeEvent | WeekViewAllDayEvent, dayWidth?: number): void;
398 /**
399 * @hidden
400 */
401 protected getAllDayEventResizedDates(event: CalendarEvent, daysDiff: number, beforeStart: boolean): {
402 start: Date;
403 end: Date;
404 };
405 static ɵfac: i0.ɵɵFactoryDeclaration<CalendarWeekViewComponent, never>;
406 static ɵcmp: i0.ɵɵComponentDeclaration<CalendarWeekViewComponent, "mwl-calendar-week-view", never, { "viewDate": "viewDate"; "events": "events"; "excludeDays": "excludeDays"; "refresh": "refresh"; "locale": "locale"; "tooltipPlacement": "tooltipPlacement"; "tooltipTemplate": "tooltipTemplate"; "tooltipAppendToBody": "tooltipAppendToBody"; "tooltipDelay": "tooltipDelay"; "weekStartsOn": "weekStartsOn"; "headerTemplate": "headerTemplate"; "eventTemplate": "eventTemplate"; "eventTitleTemplate": "eventTitleTemplate"; "eventActionsTemplate": "eventActionsTemplate"; "precision": "precision"; "weekendDays": "weekendDays"; "snapDraggedEvents": "snapDraggedEvents"; "hourSegments": "hourSegments"; "hourDuration": "hourDuration"; "hourSegmentHeight": "hourSegmentHeight"; "minimumEventHeight": "minimumEventHeight"; "dayStartHour": "dayStartHour"; "dayStartMinute": "dayStartMinute"; "dayEndHour": "dayEndHour"; "dayEndMinute": "dayEndMinute"; "hourSegmentTemplate": "hourSegmentTemplate"; "eventSnapSize": "eventSnapSize"; "allDayEventsLabelTemplate": "allDayEventsLabelTemplate"; "daysInWeek": "daysInWeek"; "currentTimeMarkerTemplate": "currentTimeMarkerTemplate"; "validateEventTimesChanged": "validateEventTimesChanged"; "resizeCursors": "resizeCursors"; }, { "dayHeaderClicked": "dayHeaderClicked"; "eventClicked": "eventClicked"; "eventTimesChanged": "eventTimesChanged"; "beforeViewRender": "beforeViewRender"; "hourSegmentClicked": "hourSegmentClicked"; }, never, never, false, never>;
407}