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