@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.
1,440 lines (1,394 loc) • 956 kB
JavaScript
/**-----------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the project root for more information
*-------------------------------------------------------------------------------------------*/
import * as i0 from '@angular/core';
import { Directive, Optional, Injectable, EventEmitter, Input, Inject, isDevMode, Component, HostBinding, Output, forwardRef, ViewChild, ViewChildren, ChangeDetectionStrategy, NgZone, ViewContainerRef, ContentChild, ContentChildren, HostListener, ElementRef, TemplateRef, Pipe, NgModule } from '@angular/core';
import * as i1$1 from '@progress/kendo-angular-l10n';
import { LocalizationService, L10N_PREFIX, RTL, ComponentMessages } from '@progress/kendo-angular-l10n';
import * as i7 from '@progress/kendo-angular-common';
import { hasObservers, isDocumentAvailable, isVisible as isVisible$1, scrollbarWidth, isChanged, Keys, ResizeSensorComponent, shouldShowValidationUI, anyChanged, WatermarkOverlayComponent, guid, ResizeBatchService } from '@progress/kendo-angular-common';
import { isEqualDate, ZonedDate, toLocalDate, getDate, timezoneNames, Day, MS_PER_DAY as MS_PER_DAY$1, addDays, firstDayOfMonth, lastDayOfMonth, firstDayInWeek, addMonths, addWeeks, addYears } from '@progress/kendo-date-math';
import { auditTime, buffer, filter, map, debounceTime, take, distinctUntilChanged, switchMap, tap } from 'rxjs/operators';
import { validatePackage } from '@progress/kendo-licensing';
import { PreventableEvent as PreventableEvent$1, DatePickerComponent, DatePickerCustomMessagesComponent, DateTimePickerComponent, DateTimePickerCustomMessagesComponent, CalendarComponent, CalendarCustomMessagesComponent, MultiViewCalendarComponent, MonthCellTemplateDirective, CalendarDOMService, CenturyViewService, DecadeViewService, MonthViewService, YearViewService, NavigationService, TimePickerDOMService, HoursService, MinutesService, SecondsService, MillisecondsService, DayPeriodService } from '@progress/kendo-angular-dateinputs';
import { Subject, BehaviorSubject, fromEvent, Subscription, combineLatest, merge } from 'rxjs';
import * as i4$1 from '@angular/forms';
import { NG_VALUE_ACCESSOR, NgControl, ReactiveFormsModule, FormControl, FormGroup } from '@angular/forms';
import * as i1 from '@progress/kendo-angular-dialog';
import { DialogCloseResult, DialogComponent, DialogActionsComponent, DialogContainerService, DialogService, WindowService, WindowContainerService } from '@progress/kendo-angular-dialog';
import * as i4 from '@progress/kendo-angular-intl';
import { formatDate, DatePipe, parseDate } from '@progress/kendo-angular-intl';
import { MultiSelectComponent, ItemTemplateDirective, TagTemplateDirective, DropDownListComponent, ComboBoxComponent } from '@progress/kendo-angular-dropdowns';
import { NgIf, NgStyle, NgFor, NgTemplateOutlet, AsyncPipe, NgClass } from '@angular/common';
import { saveIcon, cancelOutlineIcon, caretAltLeftIcon, caretAltRightIcon, calendarIcon, filePdfIcon, arrowRotateCwIcon, arrowsNoRepeatIcon, xIcon, moreHorizontalIcon, clockIcon, caretAltUpIcon, caretAltDownIcon } from '@progress/kendo-svg-icons';
import { Button, ButtonGroupComponent, ButtonComponent } from '@progress/kendo-angular-buttons';
import { NumericTextBoxComponent, NumericTextBoxCustomMessagesComponent, FormFieldComponent, TextBoxDirective, CheckBoxDirective, TextAreaDirective } from '@progress/kendo-angular-inputs';
import { parseRule, serializeRule, expand } from '@progress/kendo-recurrence';
import { LabelComponent, LabelDirective } from '@progress/kendo-angular-label';
import * as i1$2 from '@progress/kendo-angular-popup';
import { PopupService } from '@progress/kendo-angular-popup';
import { IconWrapperComponent, IconsService } from '@progress/kendo-angular-icons';
import { drawDOM, exportPDF } from '@progress/kendo-drawing';
import { saveAs } from '@progress/kendo-file-saver';
import { orderBy, groupBy } from '@progress/kendo-data-query';
import { Draggable } from '@progress/kendo-draggable';
import { TooltipDirective } from '@progress/kendo-angular-tooltip';
/**
* @hidden
*/
const packageMetadata = {
name: '@progress/kendo-angular-scheduler',
productName: 'Kendo UI for Angular',
productCode: 'KENDOUIANGULAR',
productCodes: ['KENDOUIANGULAR'],
publishDate: 1744647813,
version: '18.5.1',
licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
};
/**
* Arguments for the `dateChange` event.
*/
class DateChangeEvent {
/**
* The currently selected date of the Scheduler.
*/
selectedDate;
/**
* The date range of the current view.
*/
dateRange;
/**
* A reference to the Scheduler instance that triggered the event.
*/
sender;
/**
* @hidden
*/
constructor(sender, selectedDate, dateRange) {
this.sender = sender;
this.selectedDate = selectedDate;
this.dateRange = dateRange;
}
}
/**
* Arguments for the `navigate` event.
*/
class NavigateEvent extends PreventableEvent$1 {
/**
* The navigation action that triggered the event.
*/
action;
/**
* A reference to the Scheduler instance that triggered the event.
*/
sender;
/**
* @hidden
*/
constructor(sender, action) {
super();
this.sender = sender;
this.action = action;
}
}
/**
* Arguments for `slotClick` and `slotDblClick` events.
*/
class SlotClickEvent {
/**
* The event type.
*/
type;
/**
* The start date of the slot.
*/
start;
/**
* The end date of the slot.
*/
end;
/**
* Indicates if the slot is all-day.
*/
isAllDay;
/**
* The resources of the slot.
*/
resources;
/**
* The original DOM event.
*/
originalEvent;
/**
* A reference to the Scheduler instance that triggered the event.
*/
sender;
/**
* @hidden
*/
constructor(sender, args) {
this.sender = sender;
Object.assign(this, args);
}
}
/**
* Arguments for the `eventClick` and `eventDblClick` events.
*/
class EventClickEvent {
/**
* The event type.
*/
type;
/**
* The original Scheduler event.
*/
event;
/**
* The original DOM event.
*/
originalEvent;
/**
* A reference to the Scheduler instance that triggered the event.
*/
sender;
/**
* @hidden
*/
constructor(sender, args) {
this.sender = sender;
Object.assign(this, args);
}
}
/**
* Arguments for the `eventKeydown` event.
*/
class EventKeydownEvent {
/**
* The original Scheduler event.
*/
event;
/**
* The original DOM event.
*/
originalEvent;
/**
* A reference to the Scheduler instance that triggered the event.
*/
sender;
/**
* @hidden
*/
constructor(sender, args) {
this.sender = sender;
Object.assign(this, args);
}
}
/**
* Arguments for the `create` event.
*/
class CreateEvent {
/**
* The start date of the slot.
*/
start;
/**
* The end date of the slot.
*/
end;
/**
* Indicates if the slot is all-day.
*/
isAllDay;
/**
* The resources of the slot.
*/
resources;
/**
* The original DOM event.
*/
originalEvent;
/**
* A reference to the Scheduler instance that triggered the event.
*/
sender;
/**
* @hidden
*/
constructor(sender, args) {
this.sender = sender;
Object.assign(this, args);
}
}
/**
* @hidden
*/
class PreventableEvent {
prevented = false;
/**
* Prevents the default action for a specified event.
* In this way, the source component suppresses
* the built-in behavior that follows the event.
*/
preventDefault() {
this.prevented = true;
}
/**
* Returns `true` if the event was prevented
* by any of its subscribers.
*
* @returns `true` if the default action was prevented.
* Otherwise, returns `false`.
*/
isDefaultPrevented() {
return this.prevented;
}
}
/**
* Arguments for the `dragEnd` event.
*/
class DragEndEvent extends PreventableEvent {
/**
* The original Scheduler event.
*/
event;
/**
* The `isAllDay` value.
*/
isAllDay;
/**
* The data item of the event.
*/
dataItem;
/**
* The new start date of the event.
*/
start;
/**
* The new end date of the event.
*/
end;
/**
* The resources when ending the dragging.
*/
resources;
/**
* A reference to the Scheduler instance that triggered the event.
*/
sender;
/**
* @hidden
*/
constructor(sender, args) {
super();
this.sender = sender;
Object.assign(this, args);
}
}
/**
* Arguments for the `drag` event.
*/
class DragEvent extends PreventableEvent {
/**
* The original Scheduler event.
*/
event;
/**
* The current `isAllDay` value.
*/
isAllDay;
/**
* The data item of the event.
*/
dataItem;
/**
* The new start date of the event.
*/
start;
/**
* The new end date of the event.
*/
end;
/**
* The current resources while dragging.
*/
resources;
/**
* Sets the class to the drag hint ([see example]({% slug restrictions_scheduler %})).
*/
setHintClass;
/**
* Sets the class to the slot over which the event is dragged.
*/
setSlotClass;
/**
* A reference to the Scheduler instance that triggered the event.
*/
sender;
/**
* @hidden
*/
constructor(sender, args) {
super();
this.sender = sender;
Object.assign(this, args);
}
}
/**
* Arguments for the `dragStart` event.
*/
class DragStartEvent extends PreventableEvent {
/**
* The original Scheduler event.
*/
event;
/**
* The data item of the event.
*/
dataItem;
/**
* A reference to the Scheduler instance that triggered the event.
*/
sender;
/**
* @hidden
*/
constructor(sender, args) {
super();
this.sender = sender;
Object.assign(this, args);
}
}
/**
* Arguments for the `remove` event.
*/
class RemoveEvent extends PreventableEvent {
/**
* The event data item whose **Remove** icon is clicked.
*/
dataItem;
/**
* The event whose **Remove** icon is clicked.
*/
event;
/**
* A reference to the Scheduler instance that triggered the event.
*/
sender;
/**
* @hidden
*/
constructor(sender, args) {
super();
this.sender = sender;
Object.assign(this, args);
}
}
/**
* Arguments for the `resizeEnd` event.
*/
class ResizeEndEvent extends PreventableEvent {
/**
* The original Scheduler event.
*/
event;
/**
* The data item of the event.
*/
dataItem;
/**
* The new start date of the event.
*/
start;
/**
* The new end date of the event.
*/
end;
/**
* A reference to the Scheduler instance that triggered the event.
*/
sender;
/**
* @hidden
*/
constructor(sender, args) {
super();
this.sender = sender;
Object.assign(this, args);
}
}
/**
* Arguments for the `resize` event.
*/
class ResizeEvent extends PreventableEvent {
/**
* The original Scheduler event.
*/
event;
/**
* The data item of the event.
*/
dataItem;
/**
* The new start date of the event.
*/
start;
/**
* The new end date of the event.
*/
end;
/**
* A reference to the Scheduler instance that triggered the event.
*/
sender;
/**
* Sets the class to the resize hint ([see example]({% slug restrictions_scheduler %})).
*/
setHintClass;
/**
* Sets the class to the slot over which the event is resized.
*/
setSlotClass;
/**
* @hidden
*/
constructor(sender, args) {
super();
this.sender = sender;
Object.assign(this, args);
}
}
/**
* Arguments for the `resizeStart` event.
*/
class ResizeStartEvent extends PreventableEvent {
/**
* The original Scheduler event.
*/
event;
/**
* The data item of the event.
*/
dataItem;
/**
* A reference to the Scheduler instance that triggered the event.
*/
sender;
/**
* @hidden
*/
constructor(sender, args) {
super();
this.sender = sender;
Object.assign(this, args);
}
}
/**
* @hidden
*
* Maps the name of the event to the argument type of the event.
*/
const VIEW_EVENT_MAP = {
slotClick: SlotClickEvent,
slotDblClick: SlotClickEvent,
eventClick: EventClickEvent,
eventDblClick: EventClickEvent,
eventKeydown: EventKeydownEvent,
create: CreateEvent,
remove: RemoveEvent,
resizeStart: ResizeStartEvent,
resize: ResizeEvent,
resizeEnd: ResizeEndEvent,
dragStart: DragStartEvent,
drag: DragEvent,
dragEnd: DragEndEvent
};
/**
* @hidden
*/
class EditEventBase {
/**
* Indicates if the event is new or existing.
*/
isNew;
/**
* The edited data item.
*/
dataItem;
/**
* A reference to the Scheduler instance that triggered the event.
*/
sender;
/**
* The type of the action that triggered the event.
*/
action;
/**
* @hidden
*/
constructor(sender, args) {
this.sender = sender;
Object.assign(this, args);
}
}
/**
* Arguments for the `cancel` event.
*/
class CancelEvent extends EditEventBase {
/**
* The edited `formGroup` instance.
*/
formGroup;
}
/**
* Arguments for the `save` event.
*/
class SaveEvent extends EditEventBase {
/**
* The edited `formGroup` instance.
*/
formGroup;
/**
* The selected edit mode.
*/
mode;
}
/**
* Arguments for the `edit` event of the editing directives.
*/
class EditEvent extends PreventableEvent {
/**
* The event data item for which the **Edit** dialog will be opened.
*/
dataItem;
/**
* The event for which the **Edit** dialog will be opened.
*/
event;
/**
* A reference to the Scheduler instance that triggered the event.
*/
sender;
/**
* @hidden
*/
constructor(sender, args) {
super();
this.sender = sender;
Object.assign(this, args);
}
}
/**
* Arguments for the `add` event of the editing directives.
*/
class AddEvent extends PreventableEvent {
/**
* The data for binding the **Add** dialog.
*/
dataItem;
/**
* A reference to the Scheduler instance that triggered the event.
*/
sender;
/**
* @hidden
*/
constructor(sender, args) {
super();
this.sender = sender;
Object.assign(this, args);
}
}
/**
* Arguments for the `slotDragStart` event.
* The event is preventable and if prevented, subsequent `slotDrag`, `slotDragEnd`, and `slotSelectionChange` will not be fired.
*/
class SlotDragStartEvent extends PreventableEvent {
/**
* The start date of the slot selection.
*/
start;
/**
* The end date of the slot selection.
*/
end;
/**
* Indicates if the slot selection consists of all-day slots, or of time slots.
*/
isAllDay;
/**
* The resources for the slot, if grouping by resource; otherwise all Scheduler resources.
*/
resources;
/**
* The original DOM event.
*/
originalEvent;
/**
* A reference to the Scheduler instance that triggered the event.
*/
sender;
/**
* @hidden
*/
constructor(sender, args) {
super();
this.sender = sender;
Object.assign(this, args);
}
}
/**
* Arguments for the `slotDrag` event.
*/
class SlotDragEvent {
/**
* The start date of the slot selection.
*/
start;
/**
* The end date of the slot selection.
*/
end;
/**
* Indicates if the slot selection consists of all-day slots, or of time slots.
*/
isAllDay;
/**
* The resources for the slot, if grouping by resource; otherwise all Scheduler resources.
*/
resources;
/**
* The original DOM event.
*/
originalEvent;
/**
* A reference to the Scheduler instance that triggered the event.
*/
sender;
/**
* @hidden
*/
constructor(sender, args) {
this.sender = sender;
Object.assign(this, args);
}
}
/**
* Arguments for the `slotDragEnd` event.
*/
class SlotDragEndEvent extends SlotDragEvent {
}
/**
* Represents the toolbar template of the Scheduler. To define a toolbar
* template, nest an `<ng-template kendoSchedulerToolbarTemplate>` tag
* inside `<kendo-scheduler>`. For more information and examples, refer to the article on
* [customizing the toolbar]({% slug toolbar_scheduler %}) of the Scheduler.
*
* The template context receives the following template variables:
* * `selectedDate`—The currently selected date.
* * `dateRange`—The currently selected [`DateRange`]({% slug api_scheduler_daterange %}).
* * `views`—A [`SchedulerView`]({% slug api_scheduler_schedulerview %}) array with the available views.
* * `selectedView`—The currently selected [`SchedulerView`]({% slug api_scheduler_schedulerview %}).
*
* You can declare either of the following built-in navigation components in the toolbar template:
* * `kendoSchedulerToolbarNavigation`—Renders navigation buttons, a calendar, and a date-range label.
* * `kendoSchedulerToolbarViewSelector`—Renders the buttons for selecting the view.
*
* To emit navigation events, the components inside the toolbar can inject
* the [`ToolbarService`]({% slug api_scheduler_toolbarservice %}).
*/
class ToolbarTemplateDirective {
templateRef;
constructor(templateRef) {
this.templateRef = templateRef;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolbarTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ToolbarTemplateDirective, isStandalone: true, selector: "[kendoSchedulerToolbarTemplate]", ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolbarTemplateDirective, decorators: [{
type: Directive,
args: [{
selector: '[kendoSchedulerToolbarTemplate]',
standalone: true
}]
}], ctorParameters: function () { return [{ type: i0.TemplateRef, decorators: [{
type: Optional
}] }]; } });
/**
* A service for communication with the toolbar controls
* which is used by the toolbar components for publishing navigation actions
* ([see example]({% slug toolbar_scheduler %}#toc-using-the-toolbar-service)).
*/
class ToolbarService {
/**
* A stream of navigation actions that is intended for consumption by the toolbar.
*
* @hidden
*/
action;
/**
* The context for the built-in navigation components.
*
* @hidden
*/
context;
actionSource = new Subject();
/** @hidden */
constructor() {
this.action = this.actionSource.asObservable();
}
/**
* Emits the specified navigation action.
*
* @param action - The navigation action that will be executed.
*/
navigate(action) {
this.actionSource.next(action);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolbarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolbarService, providedIn: 'root' });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolbarService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root'
}]
}], ctorParameters: function () { return []; } });
/**
* An abstract class which contains meta information about a Scheduler view.
*/
class SchedulerView {
}
/**
* The selected edit mode during the update or removal of events.
* For non-recurring events, set to `Event`.
*/
var EditMode;
(function (EditMode) {
/**
* Edits the selected event.
*/
EditMode[EditMode["Event"] = 0] = "Event";
/**
* Edits the selected occurrence.
*/
EditMode[EditMode["Occurrence"] = 1] = "Occurrence";
/**
* Edits all events in the series.
*/
EditMode[EditMode["Series"] = 2] = "Series";
})(EditMode || (EditMode = {}));
/**
* The selected CRUD operation when the user edits or removes recurring events.
*/
var CrudOperation;
(function (CrudOperation) {
/**
* The user edits the selected recurring event.
*/
CrudOperation[CrudOperation["Edit"] = 0] = "Edit";
/**
* The user removes the selected recurring event.
*/
CrudOperation[CrudOperation["Remove"] = 1] = "Remove";
})(CrudOperation || (CrudOperation = {}));
/**
* The arguments for the [`isSlotSelected`]({% slug api_scheduler_schedulercomponent %}#toc-isslotselected) callback.
*/
class IsSlotSelectedArgs {
/**
* The start date of the slot.
*/
start;
/**
* The end date of the slot.
*/
end;
/**
* Indicates if the slot is an all-day slot, or a time slot.
*/
isAllDay;
/**
* The resources for the slot, if grouping by resource; otherwise all Scheduler resources.
*/
resources;
}
/**
* @hidden
*/
var slotDragEventName;
(function (slotDragEventName) {
slotDragEventName["initDragSelect"] = "initDragSelect";
slotDragEventName["dragSelect"] = "dragSelect";
slotDragEventName["refreshSlotSelection"] = "refreshSlotSelection";
slotDragEventName["dragSelectRelease"] = "dragSelectRelease";
})(slotDragEventName || (slotDragEventName = {}));
/**
* Represents the template which renders the date header in the **Agenda** view.
* To define the date template, nest an `<ng-template>` tag with the `kendoSchedulerAgendaDateTemplate`
* directive inside the `<kendo-scheduler-agenda-view>` or `<kendo-scheduler>` components ([see example](slug:templates_scheduler#toc-agenda-dates)).
*
* The available fields in the template context are:
* - `date`—The header date.
*/
class AgendaDateTemplateDirective {
templateRef;
constructor(templateRef) {
this.templateRef = templateRef;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AgendaDateTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: AgendaDateTemplateDirective, isStandalone: true, selector: "[kendoSchedulerAgendaDateTemplate]", ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AgendaDateTemplateDirective, decorators: [{
type: Directive,
args: [{
selector: '[kendoSchedulerAgendaDateTemplate]',
standalone: true
}]
}], ctorParameters: function () { return [{ type: i0.TemplateRef, decorators: [{
type: Optional
}] }]; } });
/**
* Represents the template which renders the time header in the **Agenda** view.
* To define the time template, nest an `<ng-template>` tag with the `kendoSchedulerAgendaTimeTemplate`
* directive inside the `<kendo-scheduler>` or in the `<kendo-scheduler-agenda-view>` component ([see example](slug:templates_scheduler#toc-agenda-times)).
*
* The available fields in the template context are:
* - `start`—The start date of the event.
* - `end`—The end date of the event.
* - `title`—The title of the event.
* - `description`—The description of the event.
* - `isAllDay`—A Boolean value which indicates if the event is all-day.
* - `resources`—The resources of the event.
*/
class AgendaTimeTemplateDirective {
templateRef;
constructor(templateRef) {
this.templateRef = templateRef;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AgendaTimeTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: AgendaTimeTemplateDirective, isStandalone: true, selector: "[kendoSchedulerAgendaTimeTemplate]", ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AgendaTimeTemplateDirective, decorators: [{
type: Directive,
args: [{
selector: '[kendoSchedulerAgendaTimeTemplate]',
standalone: true
}]
}], ctorParameters: function () { return [{ type: i0.TemplateRef, decorators: [{
type: Optional
}] }]; } });
/**
* Represents the template for and assists the content customization of all-day events.
* To define the all-day event template, nest an `<ng-template>` tag with the `kendoSchedulerAllDayEventTemplate`
* directive inside the `<kendo-scheduler>`, `<kendo-scheduler-day-view>`, or `<kendo-scheduler-week-view>` component ([see example](slug:templates_scheduler#toc-all-day-events)).
*
* The available fields in the template context are:
* - `event`—The event that is associated with the item.
* - `resources`—The resources of the event.
*/
class AllDayEventTemplateDirective {
templateRef;
constructor(templateRef) {
this.templateRef = templateRef;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AllDayEventTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: AllDayEventTemplateDirective, isStandalone: true, selector: "[kendoSchedulerAllDayEventTemplate]", ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AllDayEventTemplateDirective, decorators: [{
type: Directive,
args: [{
selector: '[kendoSchedulerAllDayEventTemplate]',
standalone: true
}]
}], ctorParameters: function () { return [{ type: i0.TemplateRef, decorators: [{
type: Optional
}] }]; } });
/**
* Represents the template for and assists the content customization of all-day slots.
* To define the all-day slot template, nest an `<ng-template>` tag with the `kendoSchedulerAllDaySlotTemplate`
* directive inside the `<kendo-scheduler>`, `<kendo-scheduler-day-view>`, or `<kendo-scheduler-week-view>` component ([see example](slug:templates_scheduler#toc-all-day-slots)).
*
* The available fields in the template context are:
* - `date`—The date of the slot.
* - `resources`—The resources of the slot.
*/
class AllDaySlotTemplateDirective {
templateRef;
constructor(templateRef) {
this.templateRef = templateRef;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AllDaySlotTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: AllDaySlotTemplateDirective, isStandalone: true, selector: "[kendoSchedulerAllDaySlotTemplate]", ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AllDaySlotTemplateDirective, decorators: [{
type: Directive,
args: [{
selector: '[kendoSchedulerAllDaySlotTemplate]',
standalone: true
}]
}], ctorParameters: function () { return [{ type: i0.TemplateRef, decorators: [{
type: Optional
}] }]; } });
/**
* Represents the template which renders the date header in the **Day**, **Week**, and **Timeline** views.
* To define the day template, nest an `<ng-template>` tag with the `kendoSchedulerDateHeaderTemplate`
* directive inside the `<kendo-scheduler>`, or in the `<kendo-scheduler-day-view>`, `<kendo-scheduler-week-view>`,
* `<kendo-scheduler-timeline-view>`, `<kendo-scheduler-timeline-week-view>`, and `<kendo-scheduler-timeline-month-view>` components ([see example](slug:templates_scheduler#toc-date-headers)).
*
* The available fields in the template context are:
* - `date`—The header date.
*/
class DateHeaderTemplateDirective {
templateRef;
constructor(templateRef) {
this.templateRef = templateRef;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DateHeaderTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: DateHeaderTemplateDirective, isStandalone: true, selector: "[kendoSchedulerDateHeaderTemplate]", ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DateHeaderTemplateDirective, decorators: [{
type: Directive,
args: [{
selector: '[kendoSchedulerDateHeaderTemplate]',
standalone: true
}]
}], ctorParameters: function () { return [{ type: i0.TemplateRef, decorators: [{
type: Optional
}] }]; } });
/**
* Represents the template for and assists the content customization of the Scheduler events.
* To define the event template, nest an `<ng-template>` tag with the `kendoSchedulerEventTemplate`
* directive inside the `<kendo-scheduler>`, or in the view components ([see example](slug:templates_scheduler#toc-event-rendering)).
*
* The available fields in the template context are:
* - `event`—The event that is associated with the item.
* - `resources`—The resources of the event.
*/
class EventTemplateDirective {
templateRef;
constructor(templateRef) {
this.templateRef = templateRef;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EventTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: EventTemplateDirective, isStandalone: true, selector: "[kendoSchedulerEventTemplate]", ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EventTemplateDirective, decorators: [{
type: Directive,
args: [{
selector: '[kendoSchedulerEventTemplate]',
standalone: true
}]
}], ctorParameters: function () { return [{ type: i0.TemplateRef, decorators: [{
type: Optional
}] }]; } });
/**
* Represents the template which renders the resource group header in the **Day**, **Week**, and **Timeline** views.
* To define the template, nest an `<ng-template>` tag with the `kendoSchedulerGroupHeaderTemplate`
* directive inside the `<kendo-scheduler>`, or in the `<kendo-scheduler-day-view>`, `<kendo-scheduler-week-view>`,
* `<kendo-scheduler-timeline-view>`, `<kendo-scheduler-timeline-week-view>`, and `<kendo-scheduler-timeline-month-view>` components ([see example](slug:templates_scheduler#toc-group-headers)).
*
* The available fields in the template context are:
* - `resource`—The resource item.
*/
class GroupHeaderTemplateDirective {
templateRef;
constructor(templateRef) {
this.templateRef = templateRef;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GroupHeaderTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: GroupHeaderTemplateDirective, isStandalone: true, selector: "[kendoSchedulerGroupHeaderTemplate]", ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GroupHeaderTemplateDirective, decorators: [{
type: Directive,
args: [{
selector: '[kendoSchedulerGroupHeaderTemplate]',
standalone: true
}]
}], ctorParameters: function () { return [{ type: i0.TemplateRef, decorators: [{
type: Optional
}] }]; } });
/**
* Represents the template for the major-time headers in the **Day** and **Week** views.
* To define the major-time header template, nest an `<ng-template>` tag with the `kendoSchedulerMajorTimeHeaderTemplate`
* directive inside the `<kendo-scheduler>`, or in the `<kendo-scheduler-day-view>` and `<kendo-scheduler-week-view>` components ([see example](slug:templates_scheduler#toc-major-time-headers)).
*
* The available fields in the template context are:
* - `date`—The date of the header.
*/
class MajorTimeHeaderTemplateDirective {
templateRef;
constructor(templateRef) {
this.templateRef = templateRef;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MajorTimeHeaderTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: MajorTimeHeaderTemplateDirective, isStandalone: true, selector: "[kendoSchedulerMajorTimeHeaderTemplate]", ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MajorTimeHeaderTemplateDirective, decorators: [{
type: Directive,
args: [{
selector: '[kendoSchedulerMajorTimeHeaderTemplate]',
standalone: true
}]
}], ctorParameters: function () { return [{ type: i0.TemplateRef, decorators: [{
type: Optional
}] }]; } });
/**
* Represents the template for the minor-time headers in the **Day** and **Week** views.
* To define the minor-time header template, nest an `<ng-template>` tag with the `kendoSchedulerMinorTimeHeaderTemplate`
* directive inside the `<kendo-scheduler>`, or in the `<kendo-scheduler-day-view>` and `<kendo-scheduler-week-view>` components ([see example](slug:templates_scheduler#toc-minor-time-headers)).
*
* The available fields in the template context are:
* - `date`—The date of the header.
*/
class MinorTimeHeaderTemplateDirective {
templateRef;
constructor(templateRef) {
this.templateRef = templateRef;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MinorTimeHeaderTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: MinorTimeHeaderTemplateDirective, isStandalone: true, selector: "[kendoSchedulerMinorTimeHeaderTemplate]", ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MinorTimeHeaderTemplateDirective, decorators: [{
type: Directive,
args: [{
selector: '[kendoSchedulerMinorTimeHeaderTemplate]',
standalone: true
}]
}], ctorParameters: function () { return [{ type: i0.TemplateRef, decorators: [{
type: Optional
}] }]; } });
/**
* Represents the template for rendering the day slots in the **Month** view.
* To define the day template, nest an `<ng-template>` tag with the `kendoSchedulerMonthDaySlotTemplate`
* directive inside the `<kendo-scheduler>`, or in the `<kendo-scheduler-month-view>` component ([see example](slug:templates_scheduler#toc-month-slots)).
*
* The available fields in the template context are:
* - `date`—The date of the slot.
* - `resources`—The resources of the slot.
*/
class MonthDaySlotTemplateDirective {
templateRef;
constructor(templateRef) {
this.templateRef = templateRef;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MonthDaySlotTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: MonthDaySlotTemplateDirective, isStandalone: true, selector: "[kendoSchedulerMonthDaySlotTemplate]", ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MonthDaySlotTemplateDirective, decorators: [{
type: Directive,
args: [{
selector: '[kendoSchedulerMonthDaySlotTemplate]',
standalone: true
}]
}], ctorParameters: function () { return [{ type: i0.TemplateRef, decorators: [{
type: Optional
}] }]; } });
/**
* Represents the template for rendering the day slots in the **Month** view.
* To define the day template, nest an `<ng-template>` tag with the `kendoSchedulerMultiWeekDaySlotTemplate`
* directive inside the `<kendo-scheduler>`, or in the `<kendo-scheduler-month-view>` component ([see example](slug:templates_scheduler#toc-multi-week-slots)).
*
* The available fields in the template context are:
* - `date`—The date of the slot.
* - `resources`—The resources of the slot.
*
*/
class MultiWeekDaySlotTemplateDirective {
templateRef;
constructor(templateRef) {
this.templateRef = templateRef;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MultiWeekDaySlotTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: MultiWeekDaySlotTemplateDirective, isStandalone: true, selector: "[kendoSchedulerMultiWeekDaySlotTemplate]", ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MultiWeekDaySlotTemplateDirective, decorators: [{
type: Directive,
args: [{
selector: '[kendoSchedulerMultiWeekDaySlotTemplate]',
standalone: true
}]
}], ctorParameters: function () { return [{ type: i0.TemplateRef, decorators: [{
type: Optional
}] }]; } });
/**
* Represents the template for the time-slot renderer in the **Day**, **Week**, and **Timeline** views.
* To define the time-slot template, nest an `<ng-template>` tag with the `kendoSchedulerTimeSlotTemplate`
* directive inside the `<kendo-scheduler>`, or in the `<kendo-scheduler-day-view>`, `<kendo-scheduler-week-view>`,
* `<kendo-scheduler-timeline-view>`, `<kendo-scheduler-timeline-week-view>`, and `<kendo-scheduler-timeline-month-view>` components ([see example](slug:templates_scheduler#toc-time-slots)).
*
* The available fields in the template context are:
* - `date`—The date of the slot.
* - `resources`—The resources of the slot.
*/
class TimeSlotTemplateDirective {
templateRef;
constructor(templateRef) {
this.templateRef = templateRef;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TimeSlotTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: TimeSlotTemplateDirective, isStandalone: true, selector: "[kendoSchedulerTimeSlotTemplate]", ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TimeSlotTemplateDirective, decorators: [{
type: Directive,
args: [{
selector: '[kendoSchedulerTimeSlotTemplate]',
standalone: true
}]
}], ctorParameters: function () { return [{ type: i0.TemplateRef, decorators: [{
type: Optional
}] }]; } });
/**
* A service which publishes information from the Scheduler to the views.
* Views subscribe to changes in the context (selected date, event, and resource data) through this service.
*/
class ViewContextService {
/**
* A stream of navigation actions that will be handled by the view.
*/
action;
/**
* A stream that executes methods from the view.
*/
execute;
/**
* A stream of items (events) that will be displayed in the view.
*/
items;
/**
* A stream with the selected date that will be displayed by the view.
*/
selectedDate;
/**
* Fires when the Scheduler element is resized.
*/
resize;
/**
* Fires when the Scheduler options are changed.
*/
optionsChange;
actionSource = new Subject();
itemsSource = new BehaviorSubject([]);
selectedDateSource = new BehaviorSubject(null);
resizeSource = new Subject();
optionsChangeSource = new BehaviorSubject({});
executeSource = new Subject();
constructor() {
this.action = this.actionSource.asObservable();
this.items = this.itemsSource.asObservable();
this.selectedDate = this.selectedDateSource.asObservable();
this.resize = this.resizeSource.asObservable();
this.optionsChange = this.optionsChangeSource.asObservable();
this.execute = this.executeSource.asObservable();
}
/**
* An internal method which is used by the Scheduler to publish unhandled navigation actions.
*
* @hidden
*/
notifyAction(action) {
this.actionSource.next(action);
}
/**
* An internal method which is used by the Scheduler to publish the current set of items.
*
* @hidden
*/
notifyItems(items) {
this.itemsSource.next(items);
}
/**
* An internal method which is used by the Scheduler to publish the currently selected date.
*
* @hidden
*/
notifySelectedDate(date) {
this.selectedDateSource.next(date);
}
/**
* An internal method which is used by the Scheduler to notify that the size changed.
*
* @hidden
*/
notifyResize() {
this.resizeSource.next();
}
/**
* An internal method which is used by the Scheduler to notify that the options changed.
*
* @hidden
*/
notifyOptionsChange(changes) {
this.optionsChangeSource.next(changes);
}
/**
* An internal method which is used by the Scheduler to execute a view method.
*
* @hidden
*/
executeMethod(name, args) {
let result;
this.executeSource.next({ name, args, result: (r) => {
result = r;
} });
return result;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ViewContextService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ViewContextService, providedIn: 'root' });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ViewContextService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root'
}]
}], ctorParameters: function () { return []; } });
const emptyDateRange = () => ({
start: new Date(0),
end: new Date(0),
text: '',
shortText: ''
});
/**
* A service for publishing the view state and actions to the Scheduler.
*/
class ViewStateService {
/**
* A stream for publishing the visible date range of the current view to the Scheduler.
*/
dateRange;
/**
* A stream for publishing the changes to the selected date that are initiated from the view.
*/
nextDate;
/**
* A stream fro navigating from the current to another view.
*/
navigate;
/**
* A stream for navigating from the current to another view.
*/
viewEvent;
/**
* A stream for indicating that the view layout finished.
*/
layoutEnd;
/**
* A stream for indicating that the view options has changed.
*/
optionsChange;
/**
* A stream indicating that the user has started making a new slot selection.
*/
slotSelectionStart;
/**
* A stream indicating that the user has dragged over a different slot while making a selection.
*/
slotSelectionDrag;
/**
* A stream indicating that the user has finished making a slot selection.
*/
slotSelectionEnd;
/**
* @hidden
*/
toggleWorkHours = new Subject();
/**
* @hidden
*/
toolbarVisibilityByView = new Map();
dateRangeSource = new BehaviorSubject(emptyDateRange());
nextDateSource = new Subject();
navigateSource = new Subject();
viewEventSource = new Subject();
layoutEndSource = new Subject();
optionsChangeSource = new Subject();
slotSelectionStartSource = new Subject();
slotSelectionStartDragSource = new Subject();
slotSelectionStartEndSource = new Subject();
constructor() {
this.dateRange = this.dateRangeSource.asObservable();
this.nextDate = this.nextDateSource.asObservable();
this.navigate = this.navigateSource.asObservable();
this.viewEvent = this.viewEventSource.asObservable();
this.layoutEnd = this.layoutEndSource.asObservable();
this.optionsChange = this.optionsChangeSource.asObservable();
this.slotSelectionStart = this.slotSelectionStartSource.asObservable();
this.slotSelectionDrag = this.slotSelectionStartDragSource.asObservable();
this.slotSelectionEnd = this.slotSelectionStartEndSource.asObservable();
}
/**
* Publishes the date that will be displayed by the Scheduler
* typically as a result from processing a navigation action.
*/
notifyNextDate(date) {
this.nextDateSource.next(date);
}
/**
* Publishes the visible date range of the view.
* The view will calculate and set the new data range when
* the selected date changes.
*/
notifyDateRange(range) {
this.dateRangeSource.next(range);
}
/**
* Notifies the Scheduler that the view has completed its layout.
*/
notifyLayoutEnd() {
this.layoutEndSource.next();
}
/**
* Navigates to another view.
*/
navigateTo(args) {
this.navigateSource.next(args);
}
/**
* Notifies the Scheduler that the view options have been changed.
*/
notifyOptionsChange(changes) {
this.optionsChangeSource.next(changes);
}
/**
* Emits a DOM event to the Scheduler.
*/
emitEvent(name, args) {
this.viewEventSource.next({
name: name,
args: args
});
}
/** @hidden */
notifySlotSelectionStart(selection) {
this.slotSelectionStartSource.next(selection);
}
/** @hidden */
notifySlotSelectionDrag(selection) {
this.slotSelectionStartDragSource.next(selection);
}
/** @hidden */
notifySlotSelectionEnd(selection) {
this.slotSelectionStartEndSource.next(selection);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ViewStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ViewStateService, providedIn: 'root' });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ViewStateService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root'
}]
}], ctorParameters: function () { return []; } });
const FIELD_REGEX$1 = /\[(?:(\d+)|['"](.*?)['"])\]|((?:(?!\[.*?\]|\.).)+)/g;
const getterCache = {};
getterCache['undefined'] = () => undefined;
/**
* @hidden
*
* TODO: Move to @progress/kendo-common
*/
function getter(field) {
if (getterCache[field]) {
return getterCache[field];
}
const fields = [];