UNPKG

@progress/kendo-angular-scheduler

Version:

Kendo UI Scheduler Angular - Outlook or Google-style angular scheduler calendar. Full-featured and customizable embedded scheduling from the creator developers trust for professional UI components.

602 lines (601 loc) 26.5 kB
/**----------------------------------------------------------------------------------------- * Copyright © 2025 Progress Software Corporation. All rights reserved. * Licensed under commercial license. See LICENSE.md in the project root for more information *-------------------------------------------------------------------------------------------*/ import { AfterContentInit, EventEmitter, NgZone, OnDestroy, OnInit, QueryList, ViewContainerRef, ChangeDetectorRef, ElementRef, Renderer2 } from '@angular/core'; import { LocalizationService } from '@progress/kendo-angular-l10n'; import { ResizeSensorComponent } from '@progress/kendo-angular-common'; import { Day } from '@progress/kendo-date-math'; import { Observable } from 'rxjs'; import { DateChangeEvent, NavigateEvent, SlotClickEvent, EventClickEvent } from './events'; import { ToolbarTemplateDirective } from './toolbar/toolbar-template.directive'; import { DateRange, Group, NavigationAction, Resource, SchedulerModelFields, SchedulerView, EditMode, CrudOperation, EditableSettings, CurrentTimeSettings, OngoingEventsSettings, SlotClassArgs, EventStyleArgs, SchedulerSlot } from './types'; import { AgendaDateTemplateDirective } from './views/templates/agenda-date-template.directive'; import { AgendaTimeTemplateDirective } from './views/templates/agenda-time-template.directive'; import { AllDayEventTemplateDirective } from './views/templates/all-day-event-template.directive'; import { AllDaySlotTemplateDirective } from './views/templates/all-day-slot-template.directive'; import { DateHeaderTemplateDirective } from './views/templates/date-header-template.directive'; import { EventTemplateDirective } from './views/templates/event-template.directive'; import { GroupHeaderTemplateDirective } from './views/templates/group-header-template.directive'; import { MajorTimeHeaderTemplateDirective } from './views/templates/major-time-header-template.directive'; import { MinorTimeHeaderTemplateDirective } from './views/templates/minor-time-header-template.directive'; import { MonthDaySlotTemplateDirective } from './views/templates/month-day-slot-template.directive'; import { MultiWeekDaySlotTemplateDirective } from './views/templates/multi-week-day-slot-template.directive'; import { TimeSlotTemplateDirective } from './views/templates/time-slot-template.directive'; import { ViewContextService } from './views/view-context.service'; import { ViewStateService } from './views/view-state.service'; import { EditService } from './editing/edit.service'; import { EditDialogTemplateDirective } from './editing/edit-dialog-template.directive'; import { CancelEvent, SaveEvent, RemoveEvent, ResizeStartEvent, ResizeEvent, ResizeEndEvent, DragStartEvent, DragEvent, DragEndEvent } from './events'; import { FormGroup } from '@angular/forms'; import { DialogsService } from './editing/dialogs.service'; import { IntlService } from '@progress/kendo-angular-intl'; import { EditEventArgs } from './types/edit-event-args.interface'; import { PDFService } from './pdf/pdf.service'; import { PDFExportEvent } from './pdf/pdf-export-event'; import { LoadingComponent } from './loading.component'; import { FocusService, FocusPosition } from './navigation'; import { DomEventsService } from './views/common/dom-events.service'; import { CreateEvent } from './events/create-event'; import { SchedulerEvent } from './types/scheduler-event'; import { EventKeydownEvent } from './events/event-keydown-event'; import { IsSlotSelectedArgs } from './types/slot-selection'; import { SlotDragStartEvent } from './events/slot-drag-start-event'; import { SlotDragEvent } from './events/slot-drag-event'; import { SlotDragEndEvent } from './events/slot-drag-end-event'; import * as i0 from "@angular/core"; /** * Represents the [Kendo UI Scheduler component for Angular](slug:overview_scheduler). * * @example * ```html * <kendo-scheduler [kendoSchedulerBinding]="events" [selectedDate]="selectedDate"> * <kendo-scheduler-day-view></kendo-scheduler-day-view> * </kendo-scheduler> * ``` * * @remarks * Supported children components are: {@link AgendaViewComponent}, * {@link WeekViewComponent}, {@link WorkWeekViewComponent}, {@link YearViewComponent}, * {@link SchedulerCustomMessagesComponent}, {@link TimelineMonthViewComponent}, * {@link TimelineViewComponent}, {@link TimelineWeekViewComponent}, {@link DayViewComponent}, * {@link MonthViewComponent}, {@link MultiDayViewComponent}, {@link MultiWeekViewComponent}, * {@link PDFComponent}, {@link TimeZoneEditorComponent}, {@link RecurrenceEditorComponent} */ export declare class SchedulerComponent implements AfterContentInit, OnDestroy, OnInit { wrapper: ElementRef; private viewContext; private viewState; private editService; private dialogsService; private intlService; private changeDetector; private zone; private pdfService; private localization; private domEvents; private renderer; private focusService; hostClasses: boolean; ariaRole: string; rtl: boolean; get dir(): string; /** * Sets the index of the currently selected view. The default value is `0`, which shows the first declared view. * @default 0 */ set selectedViewIndex(index: number); get selectedViewIndex(): number; /** * Specifies whether the Scheduler is editable. * When you use an `EditableSettings` object, you can control which actions are enabled, such as adding, editing, dragging, removing, or resizing events. * @default false */ editable: boolean | EditableSettings; /** * Specifies whether the Scheduler's day or time slots are selectable ([see example](slug:slotselection_scheduler#custom-callback)). * When set to `true`, the Scheduler emits [`slotDragStart`]({% slug api_scheduler_schedulercomponent %}#toc-slotdragstart), [`slotDrag`]({% slug api_scheduler_schedulercomponent %}#toc-slotdrag), and [`slotDragEnd`]({% slug api_scheduler_schedulercomponent %}#toc-slotdragend) events on user interaction. * @default false */ selectable: boolean; /** * Sets the minimum date that you can select using the Scheduler navigation. */ min: Date; /** * Sets the maximum date that you can select using the Scheduler navigation. */ max: Date; /** * Sets the height of events in the **Month** and **Timeline** views, and the height of **All day** events in the **Day** and **Week** views. * @default 25 */ eventHeight: number; /** * Sets the column width for **Timeline** views. * @default 100 */ columnWidth: number; /** * Sets whether the view shows business hours on initialization. By default, the view shows full-day hours. Applies to **Day**, **Week**, and **Timeline** views. * @default false */ showWorkHours: boolean; /** * Sets the start time of the view. Accepts a string in `HH:mm` format. Applies to **Day**, **Week**, and **Timeline** views. * @default '00:00' */ startTime: string; /** * Sets the end time of the view. Accepts a string in `HH:mm` format. Applies to **Day**, **Week**, and **Timeline** views. * @default '00:00' */ endTime: string; /** * Sets the start time of the view when `showWorkHours` is `true`. Accepts a string in `HH:mm` format. Applies to **Day**, **Week**, and **Timeline** views. * @default '08:00' */ workDayStart: string; /** * Sets the end time of the view when `showWorkHours` is `true`. Accepts a string in `HH:mm` format. Applies to **Day**, **Week**, and **Timeline** views. * @default '17:00' */ workDayEnd: string; /** * Sets the start of the work week. Applies to **Day**, **Week**, and **Timeline** views. * @default 1 */ workWeekStart: Day; /** * Sets the end of the work week. Applies to **Day**, **Week**, and **Timeline** views. * @default 5 */ workWeekEnd: Day; /** * Sets the first day of the week. Applies to **Week**, **Month**, and **TimelineWeek** views. Defaults to the locale settings. */ set weekStart(value: Day); get weekStart(): Day; /** * Sets the duration (in minutes) of the time slots. Applies to **Day**, **Week**, and **Timeline** views. * @default 60 */ slotDuration: number; /** * Sets the number of divisions for the time slots. Applies to **Day**, **Week**, and **Timeline** views. * @default 2 */ slotDivisions: number; /** * Sets the percentage of the slot filled by events. Accepts a value between 0 and 1. Applies to **Day** and **Week** views. * @default 0.9 */ slotFill: number; /** * Toggles the visibility of the all-day slot. Applies to **Day**, **Multi-Day**, **Week**, and **Work-Week** views. * @default true */ allDaySlot: boolean; /** * Sets the time to which the view initially scrolls. Accepts a string in `HH:mm` format or a JavaScript `Date` object. Applies to **Day**, **Week**, and **Timeline** views. * @default '08:00' */ scrollTime: string | Date; /** * Configures resource-based grouping in the Scheduler. When set, the Scheduler arranges events into separate lanes or columns according to the resources defined in the `resources` property. Use to enable visual separation and hierarchical organization of events by resource type. */ group: Group; /** * Specifies the collection of resources available for event assignment in the Scheduler. Each resource describes a category and provides metadata. */ resources: Resource[]; /** * Specifies whether the Scheduler displays a loading indicator. * @default false */ loading: boolean; /** * Sets the timezone ID displayed in the Scheduler. For example, `Europe/Sofia`. * @default 'Etc/UTC' */ set timezone(value: string); get timezone(): string; /** * The currently selected view. */ selectedView: SchedulerView; /** * Sets the array of event instances shown by the Scheduler. * * Provide an array of [`SchedulerEvent`](slug:api_scheduler_schedulerevent) objects to display events in the Scheduler. * To bind data from custom object schemas, configure the [`modelFields`](slug:api_scheduler_schedulercomponent#modelfields) property to map your custom fields to the Scheduler event fields. */ set events(value: any[]); get events(): any[]; /** * Sets the currently selected date of the Scheduler. Determines the displayed period. */ set selectedDate(value: Date); get selectedDate(): Date; /** * Sets the names of the model fields from which the Scheduler reads its data ([see example])(slug:databinding_scheduler#binding-to-custom-object-schemas). * * Use `modelFields` when you want to bind custom event objects with property names that differ from the default [`SchedulerEvent`](slug:api_scheduler_schedulerevent) fields. This lets you map your data to the Scheduler's expected fields. */ set modelFields(value: SchedulerModelFields); get modelFields(): SchedulerModelFields; /** * Sets the Scheduler current time marker settings. * @default true */ currentTimeMarker: boolean | CurrentTimeSettings; /** * Defines the settings for highlighting ongoing events in the Scheduler. * @default true */ highlightOngoingEvents: boolean | OngoingEventsSettings; /** * Specifies whether to display the Scheduler toolbar. * @default true */ showToolbar: boolean; /** * Specifies whether to display the Scheduler footer. * @default true */ showFooter: boolean; /** * Defines a function that is executed for every slot in the view. * The function returns a value supported by [`ngClass`](link:site.data.urls.angular['ngclassapi']). */ slotClass: (args: SlotClassArgs) => any; /** * Defines a function that is executed for every event in the view. * The function returns a value supported by [`ngClass`](link:site.data.urls.angular['ngclassapi']). */ eventClass: (args: EventStyleArgs) => any; /** * Defines a function that is executed for every event in the view. * The function returns a value supported by [`ngStyle`](link:site.data.urls.angular['ngstyleapi']). */ eventStyles: (args: EventStyleArgs) => any; /** * A callback that is executed for each slot of the Scheduler view. * If it returns `true`, the `k-selected` CSS class will be added to the cell, making it visibly selected. * @default () => false */ isSlotSelected: (args: IsSlotSelectedArgs) => boolean; /** * @hidden */ selectedViewIndexChange: EventEmitter<number>; /** * Emits when the Scheduler is about to perform a navigation action, such as changing the view, date, or focus. */ navigate: EventEmitter<NavigateEvent>; /** * Emits when the displayed date range in the Scheduler changes. */ dateChange: EventEmitter<DateChangeEvent>; /** * Emits when a Scheduler view slot is clicked. */ slotClick: EventEmitter<SlotClickEvent>; /** * Fires when a Scheduler view slot is double-clicked. */ slotDblClick: EventEmitter<SlotClickEvent>; /** * Emits when the user creates a new event using the `'c'` key ([see example](slug:keyboard_navigation_scheduler)). */ create: EventEmitter<CreateEvent>; /** * Fires when a Scheduler event is clicked. */ eventClick: EventEmitter<EventClickEvent>; /** * Fires when a Scheduler event is double-clicked. */ eventDblClick: EventEmitter<EventClickEvent>; /** * Emits when you press a key on a focused Scheduler event. */ eventKeydown: EventEmitter<EventKeydownEvent>; /** * Fires when the user cancels the editing by clicking the **Cancel** command button. */ cancel: EventEmitter<CancelEvent>; /** * Fires when the user clicks the **Save** command button to save the changes of the edited event. */ save: EventEmitter<SaveEvent>; /** * Fires when the user clicks the **Remove** icon of a Scheduler event. */ remove: EventEmitter<RemoveEvent>; /** * Fires when the user starts resizing a Scheduler event. */ resizeStart: EventEmitter<ResizeStartEvent>; /** * Emits while the user is resizing a Scheduler event. */ resize: EventEmitter<ResizeEvent>; /** * Fires when the user stops resizing a Scheduler event. */ resizeEnd: EventEmitter<ResizeEndEvent>; /** * Fires when the user starts dragging a Scheduler event. */ dragStart: EventEmitter<DragStartEvent>; /** * Fires while the user is dragging a Scheduler event. */ drag: EventEmitter<DragEvent>; /** * Fires when the user stops dragging a Scheduler event. */ dragEnd: EventEmitter<DragEndEvent>; /** * Fires when the user starts drag-selecting a Scheduler slot range. */ slotDragStart: EventEmitter<SlotDragStartEvent>; /** * Fires while the user is drag-selecting a Scheduler slot range. */ slotDrag: EventEmitter<SlotDragEvent>; /** * Fires when the user stops drag-selecting a Scheduler slot range. */ slotDragEnd: EventEmitter<SlotDragEndEvent>; /** * Fires when the user clicks the **PDF export** command button. */ pdfExport: EventEmitter<PDFExportEvent>; /** * Fires when the Scheduler is resized horizontally. */ schedulerResize: EventEmitter<number>; /** * @hidden */ dragEndConfirmed: EventEmitter<DragEndEvent>; /** * @hidden */ resizeEndConfirmed: EventEmitter<ResizeEndEvent>; /** * @hidden */ removeConfirmed: EventEmitter<RemoveEvent>; /** * @hidden */ editDialogTemplate: EditDialogTemplateDirective; /** * @hidden */ toolbarTemplate: ToolbarTemplateDirective; /** * @hidden */ dateRangeStream: Observable<DateRange>; /** * @hidden */ selectedDateStream: Observable<Date>; /** * @hidden */ views: QueryList<SchedulerView>; /** * @hidden */ resizeSensor: ResizeSensorComponent; /** * @hidden */ confirmationDialogContainerRef: ViewContainerRef; /** * @hidden */ loadingComponent: LoadingComponent; /** * @hidden */ allDayEventTemplate: QueryList<AllDayEventTemplateDirective>; /** * @hidden */ eventTemplate: QueryList<EventTemplateDirective>; /** * @hidden */ timeSlotTemplate: QueryList<TimeSlotTemplateDirective>; /** * @hidden */ minorTimeHeaderTemplate: QueryList<MinorTimeHeaderTemplateDirective>; /** * @hidden */ majorTimeHeaderTemplate: QueryList<MajorTimeHeaderTemplateDirective>; /** * @hidden */ monthDaySlotTemplate: QueryList<MonthDaySlotTemplateDirective>; /** * @hidden */ multiWeekDaySlotTemplate: QueryList<MultiWeekDaySlotTemplateDirective>; /** * @hidden */ dateHeaderTemplate: QueryList<DateHeaderTemplateDirective>; /** * @hidden */ allDaySlotTemplate: QueryList<AllDaySlotTemplateDirective>; /** * @hidden */ groupHeaderTemplate: QueryList<GroupHeaderTemplateDirective>; /** * @hidden */ agendaDateTemplate: QueryList<AgendaDateTemplateDirective>; /** * @hidden */ agendaTimeTemplate: QueryList<AgendaTimeTemplateDirective>; /** * @hidden */ showLicenseWatermark: boolean; /** * @hidden */ licenseMessage?: string; /** * @hidden */ get viewToolbar(): boolean; private direction; private subs; private viewIndex; private _selectedDate; private _events; private _timezone; private _modelFields; private viewItems; private detachElementEventHandlers; private _weekStart; constructor(wrapper: ElementRef, viewContext: ViewContextService, viewState: ViewStateService, editService: EditService, dialogsService: DialogsService, intlService: IntlService, changeDetector: ChangeDetectorRef, zone: NgZone, pdfService: PDFService, localization: LocalizationService, domEvents: DomEventsService, renderer: Renderer2, focusService: FocusService); ngOnInit(): void; ngAfterContentInit(): void; ngOnChanges(changes: any): void; ngOnDestroy(): void; /** * @hidden */ onResize(_event?: any): void; /** * @hidden */ onNavigationAction(action: NavigationAction): boolean; /** * @hidden */ onToolbarWidthChange(width: number): void; /** * Creates a popup editor for the new event. * * @param group - The [`FormGroup`](https://angular.io/docs/ts/latest/api/forms/index/FormGroup-class.html) that describes * the edit form. If called with a data item, the parameter will build the `FormGroup` from the data item fields. */ addEvent(group: FormGroup | any): void; /** * Switches the specified event in edit mode. * * @param dataItem - The event that will be switched to edit mode. * @param options - An object which contains the form `group` that will be bound in the edit dialog and the current edit `mode`. * */ editEvent(dataItem: any, options?: EditEventArgs): void; /** * Closes the event editor, if open. */ closeEvent(): void; /** * Returns a flag which indicates if an event is currently edited. * * @return {boolean} - A flag which indicates if an event is currently edited. */ isEditing(): boolean; /** * Opens the built-in confirmation dialog for defining the edit mode * that will be used when the user edits or removes a recurring event. * * @param operation - The type of operation that will be confirmed. Has to be either **Edit** or **Remove**. * * @returns the result from the confirmation dialog. */ openRecurringConfirmationDialog(operation: CrudOperation): Observable<EditMode>; /** * Opens the built-in removal confirmation dialog. * * @return the result from the confirmation dialog. */ openRemoveConfirmationDialog(): Observable<boolean>; /** * Saves the current view as PDF. */ saveAsPDF(): void; /** * Scrolls the view to the specified time. */ scrollToTime(time: string | Date): void; /** * Returns the current view slot that matches the passed document position. * * @param x - The x document position. * @param y - The y document position. * * @return {SchedulerSlot} - The slot. */ slotByPosition(x: number, y: number): SchedulerSlot; /** * Returns the event associated with the specified DOM element, if any. * * @param element - The DOM element document position. * @return the event instance, if found. */ eventFromElement(element: Element): SchedulerEvent; /** * Gets the currently active event, if any. * The active event is the event that can currently receive focus. */ get activeEvent(): SchedulerEvent; /** * Focuses the next event or an event at a specified relative position. * The `options` parameter can be used to set a positive or negative offset * that is relative to the currently focused event ([see example](slug:keyboard_navigation_scheduler#toc-event-navigation-with-the-tab-key)). * A `nowrap` flag toggles the wrapping to the first or to the last item. * * @param position The relative position of the event to focus. * @returns `true` if the focused event changed. Otherwise, returns `false`. */ focusNext(position?: FocusPosition): boolean; /** * Focuses the previous event or an event at a specified relative position. * The `options` parameter can be used to set a positive or negative offset * that is relative to the currently focused event ([see example](slug:keyboard_navigation_scheduler#toc-event-navigation-with-the-tab-key)). * A `nowrap` flag toggles the wrapping to the first or to the last item. * * @param position The relative position of the event to focus. * @returns `true` if the focused event changed. Otherwise, returns `false`. */ focusPrev(position: FocusPosition): boolean; /** * Focuses the last focused scheduler element or the Scheduler element, if no events are available. */ focus(): void; /** * @hidden */ get toolbarVisibilityState(): boolean; private isInRange; private notifyOptionsChange; private get workWeek(); private resetViewIndex; private onViewIndexChange; private setViewIndex; private processEvents; private attachEditHandlers; private emitCRUDEvent; private intlChange; private attachElementEventHandlers; static ɵfac: i0.ɵɵFactoryDeclaration<SchedulerComponent, never>; static ɵcmp: i0.ɵɵComponentDeclaration<SchedulerComponent, "kendo-scheduler", never, { "selectedViewIndex": { "alias": "selectedViewIndex"; "required": false; }; "editable": { "alias": "editable"; "required": false; }; "selectable": { "alias": "selectable"; "required": false; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "eventHeight": { "alias": "eventHeight"; "required": false; }; "columnWidth": { "alias": "columnWidth"; "required": false; }; "showWorkHours": { "alias": "showWorkHours"; "required": false; }; "startTime": { "alias": "startTime"; "required": false; }; "endTime": { "alias": "endTime"; "required": false; }; "workDayStart": { "alias": "workDayStart"; "required": false; }; "workDayEnd": { "alias": "workDayEnd"; "required": false; }; "workWeekStart": { "alias": "workWeekStart"; "required": false; }; "workWeekEnd": { "alias": "workWeekEnd"; "required": false; }; "weekStart": { "alias": "weekStart"; "required": false; }; "slotDuration": { "alias": "slotDuration"; "required": false; }; "slotDivisions": { "alias": "slotDivisions"; "required": false; }; "slotFill": { "alias": "slotFill"; "required": false; }; "allDaySlot": { "alias": "allDaySlot"; "required": false; }; "scrollTime": { "alias": "scrollTime"; "required": false; }; "group": { "alias": "group"; "required": false; }; "resources": { "alias": "resources"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "timezone": { "alias": "timezone"; "required": false; }; "events": { "alias": "events"; "required": false; }; "selectedDate": { "alias": "selectedDate"; "required": false; }; "modelFields": { "alias": "modelFields"; "required": false; }; "currentTimeMarker": { "alias": "currentTimeMarker"; "required": false; }; "highlightOngoingEvents": { "alias": "highlightOngoingEvents"; "required": false; }; "showToolbar": { "alias": "showToolbar"; "required": false; }; "showFooter": { "alias": "showFooter"; "required": false; }; "slotClass": { "alias": "slotClass"; "required": false; }; "eventClass": { "alias": "eventClass"; "required": false; }; "eventStyles": { "alias": "eventStyles"; "required": false; }; "isSlotSelected": { "alias": "isSlotSelected"; "required": false; }; }, { "selectedViewIndexChange": "selectedViewIndexChange"; "navigate": "navigate"; "dateChange": "dateChange"; "slotClick": "slotClick"; "slotDblClick": "slotDblClick"; "create": "create"; "eventClick": "eventClick"; "eventDblClick": "eventDblClick"; "eventKeydown": "eventKeydown"; "cancel": "cancel"; "save": "save"; "remove": "remove"; "resizeStart": "resizeStart"; "resize": "resize"; "resizeEnd": "resizeEnd"; "dragStart": "dragStart"; "drag": "drag"; "dragEnd": "dragEnd"; "slotDragStart": "slotDragStart"; "slotDrag": "slotDrag"; "slotDragEnd": "slotDragEnd"; "pdfExport": "pdfExport"; "schedulerResize": "schedulerResize"; }, ["editDialogTemplate", "toolbarTemplate", "views", "allDayEventTemplate", "eventTemplate", "timeSlotTemplate", "minorTimeHeaderTemplate", "majorTimeHeaderTemplate", "monthDaySlotTemplate", "multiWeekDaySlotTemplate", "dateHeaderTemplate", "allDaySlotTemplate", "groupHeaderTemplate", "agendaDateTemplate", "agendaTimeTemplate"], never, true, never>; }