@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.
592 lines (591 loc) • 25.2 kB
TypeScript
/**-----------------------------------------------------------------------------------------
* 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 %}).
*/
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;
/**
* The index of the currently selected view.
*
* By default, the selected view index is `0` and
* indicates that the first declared view is visible.
*/
set selectedViewIndex(index: number);
get selectedViewIndex(): number;
/**
* Specifies if the Scheduler is editable.
*/
editable: boolean | EditableSettings;
/**
* Specifies if the Scheduler's day or time slots are selectable ([see example]({% slug slotselection_scheduler %}#toc-custom-callback)).
*
* When this input is set to `true`, the Scheduler component will emit [`slotDragStart`]({% slug api_scheduler_schedulercomponent %}#toc-slotdragstart), [`slotDrag`]({% slug api_scheduler_schedulercomponent %}#toc-slotdrag), and [`slotDragEnd`]({% slug api_scheduler_schedulercomponent %}#toc-slotdragend) events upon user interaction.
*/
selectable: boolean;
/**
* The minimum date that can be selected by using the navigation of the Scheduler.
*/
min: Date;
/**
* The maximum date that can be selected by using the navigation of the Scheduler.
*/
max: Date;
/**
* The height of the events in the **Month** and **Timeline** views, and the height of the **All day** events in the **Day** and **Week** views.
* @default 25
*/
eventHeight: number;
/**
* Specifies the columns width. Applicable for the **Timeline** views.
* @default 100
*/
columnWidth: number;
/**
* If set to `true`, the view will be initially shown in the business-hours mode.
* By default, the view is displayed in the full-day mode. Applicable for the **Day**, **Week**, and **Timeline** views.
* @default false
*/
showWorkHours: boolean;
/**
* The start time of the view. The Scheduler displays events which start after the start time.
* Accepts string values in the `HH:mm` format. Applicable for the **Day**, **Week**, and **Timeline** views.
* @default '00:00'
*/
startTime: string;
/**
* The end time of the view. The Scheduler displays events which end before the end time.
* Accepts string values in the `HH:mm` format. Applicable for the **Day**, **Week**, and **Timeline** views.
* @default '00:00'
*/
endTime: string;
/**
* The start time of the view when `showWorkHours` is set to `true`.
* Accepts string values in the `HH:mm` format. Applicable for the **Day**, **Week**, and **Timeline** views.
* @default '08:00'
*/
workDayStart: string;
/**
* The end time of the view when `showWorkHours` is set to `true`.
* Accepts string values in the `HH:mm` format. Applicable for the **Day**, **Week**, and **Timeline** views.
* @default '17:00'
*/
workDayEnd: string;
/**
* The start of the work week. Applicable for the **Day**, **Week**, and **Timeline** views.
* @default 1
*/
workWeekStart: Day;
/**
* The end of the work week. Applicable for the **Day**, **Week**, and **Timeline** views.
* @default 5
*/
workWeekEnd: Day;
/**
* The first day of the week. Applicable to **Week**, **Month** and **TimelineWeek** views.
* Defaults to the locale settings.
*/
set weekStart(value: Day);
get weekStart(): Day;
/**
* The duration (in minutes) of the time slots. Applicable for the day, week and timeline views.
* @default 60
*/
slotDuration: number;
/**
* The number of divisions of the time slots. Applicable for the **Day**, **Week**, and **Timeline** views.
* @default 2
*/
slotDivisions: number;
/**
* A numeric value between 0 and 1 that specifies what percentage of the slot will be filled by the events.
* Applicable for the **Day** and **Week** views.
* @default 0.9
*/
slotFill: number;
/**
* Toggles the visibility of the all-day slot.
* Applicable for the **Day**, **Multi-Day**, **Week**, and **Work-Week** views.
* @default true
*/
allDaySlot: boolean;
/**
* The time to which the view will initially be scrolled.
* Accepts string values in the `HH:mm` format or a JavaScript `Date`. Applicable for the **Day**, **Week**, and **Timeline** views.
* @default '08:00'
*/
scrollTime: string | Date;
/**
* Specifies the groups of the Scheduler.
*/
group: Group;
/**
* Specifies the resources of the Scheduler.
*/
resources: Resource[];
/**
* Specifies if the Scheduler will display a loading indicator.
* @default false
*/
loading: boolean;
/**
* Specifies the id of the timezone that will be displayed in the Scheduler.
* For example, `Europe/Sofia`.
* @default 'Etc/UTC'
*/
set timezone(value: string);
get timezone(): string;
/**
* The currently selected view.
*/
selectedView: SchedulerView;
/**
* An array of event instances which will be shown by the Scheduler.
*/
set events(value: any[]);
get events(): any[];
/**
* The currently selected date of the Scheduler.
* Determines the period which is displayed.
*/
set selectedDate(value: Date);
get selectedDate(): Date;
/**
* The names of the model fields from which the Scheduler will read its data
* ([see example]({% slug databinding_scheduler %}#toc-binding-to-models)).
*/
set modelFields(value: SchedulerModelFields);
get modelFields(): SchedulerModelFields;
/**
* Specifies the Scheduler current time marker settings.
* @default true
*/
currentTimeMarker: boolean | CurrentTimeSettings;
/**
* Specifies the settings for the ongoing events highlight of the Scheduler.
* @default true
*/
highlightOngoingEvents: boolean | OngoingEventsSettings;
/**
* Specifies whether to display the toolbar of the Scheduler.
* @default true
*/
showToolbar: boolean;
/**
* Specifies whether to display the footer of the Scheduler.
* @default true
*/
showFooter: boolean;
/**
* Defines a function that is executed for every slot in the view.
* The function returns a value which is 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 which is 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 which is supported by [`ngStyle`](link:site.data.urls.angular['ngstyleapi']).
*/
eventStyles: (args: EventStyleArgs) => any;
/**
* A callback that executes 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>;
/**
* Fires when the Scheduler is about to execute a navigation action
* (a view, date, or focus change).
*/
navigate: EventEmitter<NavigateEvent>;
/**
* Fires when the date range that is displayed in the Scheduler changes.
*/
dateChange: EventEmitter<DateChangeEvent>;
/**
* Fires when a Scheduler view slot is clicked.
*/
slotClick: EventEmitter<SlotClickEvent>;
/**
* Fires when a Scheduler view slot is double-clicked.
*/
slotDblClick: EventEmitter<SlotClickEvent>;
/**
* Fires 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>;
/**
* Fires when a key is pressed 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>;
/**
* Fires when 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 when 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 when 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
*/
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>;
}