UNPKG

angular-calendar-scheduler

Version:

This project provide a scheduler view component for [mattlewis92/angular-calendar](https://github.com/mattlewis92/angular-calendar).

284 lines (283 loc) 8.16 kB
import { EventEmitter, ChangeDetectorRef, OnChanges, OnInit, OnDestroy, TemplateRef } from '@angular/core'; import { Subject, Subscription } from 'rxjs'; import { DayViewHour } from 'calendar-utils'; import { ResizeEvent } from 'angular-resizable-element'; import { SchedulerConfig } from './scheduler-config'; import { DateAdapter } from 'angular-calendar'; import { DragMoveEvent, DragEndEvent, DropEvent } from 'angular-draggable-droppable'; import { CalendarSchedulerEvent, SchedulerViewDay, SchedulerViewHour, SchedulerViewHourSegment, SchedulerEventTimesChangedEvent, SchedulerViewEvent, SchedulerView } from './models'; import { CalendarSchedulerUtils } from './utils/calendar-scheduler-utils.provider'; /** * [ngClass]="getPositioningClasses(event)" * * [style.top.px]="event.top" * [style.height.px]="event.height" * [style.left.%]="event.left" * [style.width.%]="event.width" * * DRAG & DROP & RESIZE -> https://github.com/mattlewis92/angular-calendar/blob/master/projects/angular-calendar/src/modules/week/calendar-week-view.component.ts * FLEXBOX -> https://css-tricks.com/snippets/css/a-guide-to-flexbox/ */ export declare class CalendarSchedulerViewComponent implements OnChanges, OnInit, OnDestroy { private cdr; private config; private utils; private dateAdapter; /** * The current view date */ viewDate: Date; /** * An array of events to display on view */ events: CalendarSchedulerEvent[]; /** * The number of segments in an hour. Must be one of 1, 2, 4, 6 */ hourSegments: 1 | 2 | 4 | 6; /** * The height in pixels of each hour segment */ hourSegmentHeight: number; /** * An array of day indexes (0 = sunday, 1 = monday etc) that will be hidden on the view */ excludeDays: number[]; /** * Specify if the first day of current scheduler view has to be today or the first day of the week */ startsWithToday: boolean; /** * Specify if content must be shown or not */ showEventContent: boolean; /** * Specify if actions must be shown or not */ showEventActions: boolean; /** * Specify if status must be shown or not */ showEventStatus: boolean; /** * Specify if hour must be shown on segment or not */ showSegmentHour: boolean; /** * A function that will be called before each cell is rendered. The first argument will contain the calendar (day, hour or segment) cell. * If you add the `cssClass` property to the cell it will add that class to the cell in the template */ dayModifier: Function; hourModifier: Function; segmentModifier: Function; eventModifier: Function; /** * An observable that when emitted on will re-render the current view */ refresh: Subject<any>; /** * The locale used to format dates */ locale: string; /** * The grid size to snap resizing and dragging of events to */ eventSnapSize: number; /** * Whether to snap events to a grid when dragging */ snapDraggedEvents: boolean; /** * The start number of the week */ 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 week view events */ eventTemplate: TemplateRef<any>; /** * A custom template to use for event titles */ eventTitleTemplate: TemplateRef<any>; /** * A custom template to use for all day events */ allDayEventTemplate: TemplateRef<any>; /** * An array of day indexes (0 = sunday, 1 = monday etc) that indicate which days are weekends */ weekendDays: 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; /** * The width in pixels of each event on the view */ eventWidthPercent: number; /** * Called when a header week day is clicked */ dayHeaderClicked: EventEmitter<{ day: SchedulerViewDay; }>; /** * Called when the hour is clicked */ hourClicked: EventEmitter<{ hour: SchedulerViewHour; }>; /** * Called when the segment is clicked */ segmentClicked: EventEmitter<{ segment: SchedulerViewHourSegment; }>; /** * Called when the event is clicked */ eventClicked: EventEmitter<{ event: CalendarSchedulerEvent; }>; /** * Called when an event is resized or dragged and dropped */ eventTimesChanged: EventEmitter<SchedulerEventTimesChangedEvent>; /** * @hidden */ view: SchedulerView; /** * @hidden */ refreshSubscription: Subscription; /** * @hidden */ days: SchedulerViewDay[]; /** * @hidden */ hours: DayViewHour[]; /** * @hidden */ resizes: Map<CalendarSchedulerEvent, ResizeEvent>; /** * @hidden */ eventDragEnter: number; /** * @hidden */ dragActive: boolean; /** * @hidden */ validateResize: (args: any) => boolean; /** * @hidden */ validateDrag: (args: any) => boolean; /** * @hidden */ dayColumnWidth: number; /** * @hidden */ calendarId: symbol; /** * @hidden */ trackByHourColumn: (index: number, day: SchedulerViewDay) => string | SchedulerViewDay; /** * @hidden */ trackByDayOrEvent: (index: number, event: SchedulerViewEvent) => string | CalendarSchedulerEvent; /** * @hidden */ trackByHour: (index: number, hour: SchedulerViewHour | DayViewHour) => string; /** * @hidden */ trackByHourSegment: (index: number, segment: SchedulerViewHourSegment) => string; /** * @hidden */ constructor(cdr: ChangeDetectorRef, locale: string, config: SchedulerConfig, utils: CalendarSchedulerUtils, dateAdapter: DateAdapter); /** * @hidden */ ngOnInit(): void; /** * @hidden */ ngOnChanges(changes: any): void; /** * @hidden */ ngOnDestroy(): void; getPositioningClasses(day: SchedulerViewDay, event: CalendarSchedulerEvent): string; private getDayClass; private getTimeClass; private getLengthClass; private refreshHourGrid; private refreshHeader; private refreshBody; private refreshAll; private getSchedulerView; private scaleOverlappingEvents; /** * @hidden */ resizeStarted(eventsContainer: HTMLElement, event: SchedulerViewEvent, resizeEvent: ResizeEvent): void; /** * @hidden */ resizing(event: SchedulerViewEvent, resizeEvent: ResizeEvent): void; /** * @hidden */ resizeEnded(event: SchedulerViewEvent): void; private getResizedEventDates; /** * @hidden */ eventDropped(dropEvent: DropEvent<{ event?: CalendarSchedulerEvent; calendarId?: symbol; }>, date: Date): void; /** * @hidden */ dragStarted(eventsContainer: HTMLElement, eventContainer: HTMLElement, event?: SchedulerViewEvent): void; /** * @hidden */ dragMove(event: SchedulerViewEvent, dragEvent: DragMoveEvent): void; dragEnded(event: SchedulerViewEvent, dragEndEvent: DragEndEvent, dayWidth: number, useY?: boolean): void; private getDragMovedEventTimes; private restoreOriginalEvents; }