@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,435 lines (1,391 loc) • 969 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 { getter, setter, hasObservers, isDocumentAvailable, isVisible as isVisible$1, scrollbarWidth, isChanged, Keys, ResizeSensorComponent, getLicenseMessage, shouldShowValidationUI, anyChanged, WatermarkOverlayComponent, guid, normalizeNumpadKeys, 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: 1761290571,
version: '20.1.1',
licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
};
/**
* Represents the arguments for the `dateChange` event.
*/
class DateChangeEvent {
/**
* Provides the currently selected date of the Scheduler.
*/
selectedDate;
/**
* Provides the date range of the current view.
*/
dateRange;
/**
* Provides 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;
}
}
/**
* Represents the arguments for the `navigate` event.
*/
class NavigateEvent extends PreventableEvent$1 {
/**
* Provides the navigation action that triggered the event.
*/
action;
/**
* Provides a reference to the Scheduler instance that triggered the event.
*/
sender;
/**
* @hidden
*/
constructor(sender, action) {
super();
this.sender = sender;
this.action = action;
}
}
/**
* Represents the arguments for the `slotClick` and `slotDblClick` events.
*/
class SlotClickEvent {
/**
* Provides the event type.
*/
type;
/**
* Provides the start date of the slot.
*/
start;
/**
* Provides the end date of the slot.
*/
end;
/**
* Indicates if the slot is all-day.
*/
isAllDay;
/**
* Provides the resources of the slot.
*/
resources;
/**
* Provides the original DOM event.
*/
originalEvent;
/**
* Provides a reference to the Scheduler instance that triggered the event.
*/
sender;
/**
* @hidden
*/
constructor(sender, args) {
this.sender = sender;
Object.assign(this, args);
}
}
/**
* Represents the arguments for the `eventClick` and `eventDblClick` events.
*/
class EventClickEvent {
/**
* Provides the event type.
*/
type;
/**
* Provides the original Scheduler event.
*/
event;
/**
* Provides the original DOM event.
*/
originalEvent;
/**
* Provides a reference to the Scheduler instance that triggered the event.
*/
sender;
/**
* @hidden
*/
constructor(sender, args) {
this.sender = sender;
Object.assign(this, args);
}
}
/**
* Represents the arguments for the `eventKeydown` event.
*/
class EventKeydownEvent {
/**
* Provides the original Scheduler event.
*/
event;
/**
* Provides the original DOM event.
*/
originalEvent;
/**
* Provides a reference to the Scheduler instance that triggered the event.
*/
sender;
/**
* @hidden
*/
constructor(sender, args) {
this.sender = sender;
Object.assign(this, args);
}
}
/**
* Represents the arguments for the `create` event.
*/
class CreateEvent {
/**
* Provides the start date of the slot.
*/
start;
/**
* Provides the end date of the slot.
*/
end;
/**
* Indicates if the slot is all-day.
*/
isAllDay;
/**
* Provides the resources of the slot.
*/
resources;
/**
* Provides the original DOM event.
*/
originalEvent;
/**
* Provides 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;
}
}
/**
* Represents the arguments for the `dragEnd` event.
*/
class DragEndEvent extends PreventableEvent {
/**
* Provides the original Scheduler event.
*/
event;
/**
* Provides the `isAllDay` value.
*/
isAllDay;
/**
* Provides the data item of the event.
*/
dataItem;
/**
* Provides the new start date of the event.
*/
start;
/**
* Provides the new end date of the event.
*/
end;
/**
* Provides the resources when ending the dragging.
*/
resources;
/**
* Provides a reference to the Scheduler instance that triggered the event.
*/
sender;
/**
* @hidden
*/
constructor(sender, args) {
super();
this.sender = sender;
Object.assign(this, args);
}
}
/**
* Represents the arguments for the `drag` event.
*/
class DragEvent extends PreventableEvent {
/**
* Provides the original Scheduler event.
*/
event;
/**
* Provides the current `isAllDay` value.
*/
isAllDay;
/**
* Provides the data item of the event.
*/
dataItem;
/**
* Provides the new start date of the event.
*/
start;
/**
* Provides the new end date of the event.
*/
end;
/**
* Provides 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;
/**
* Provides a reference to the Scheduler instance that triggered the event.
*/
sender;
/**
* @hidden
*/
constructor(sender, args) {
super();
this.sender = sender;
Object.assign(this, args);
}
}
/**
* Represents the arguments for the `dragStart` event.
*/
class DragStartEvent extends PreventableEvent {
/**
* Provides the original Scheduler event.
*/
event;
/**
* Provides the data item of the event.
*/
dataItem;
/**
* Provides a reference to the Scheduler instance that triggered the event.
*/
sender;
/**
* @hidden
*/
constructor(sender, args) {
super();
this.sender = sender;
Object.assign(this, args);
}
}
/**
* Represents the arguments for the `remove` event.
*/
class RemoveEvent extends PreventableEvent {
/**
* Provides the event data item whose **Remove** icon is clicked.
*/
dataItem;
/**
* Provides the event whose **Remove** icon is clicked.
*/
event;
/**
* Provides a reference to the Scheduler instance that triggered the event.
*/
sender;
/**
* @hidden
*/
constructor(sender, args) {
super();
this.sender = sender;
Object.assign(this, args);
}
}
/**
* Represents the arguments for the `resizeEnd` event.
*/
class ResizeEndEvent extends PreventableEvent {
/**
* Provides the original Scheduler event.
*/
event;
/**
* Provides the data item of the event.
*/
dataItem;
/**
* Provides the new start date of the event.
*/
start;
/**
* Provides the new end date of the event.
*/
end;
/**
* Provides a reference to the Scheduler instance that triggered the event.
*/
sender;
/**
* @hidden
*/
constructor(sender, args) {
super();
this.sender = sender;
Object.assign(this, args);
}
}
/**
* Represents the arguments for the `resize` event.
*/
class ResizeEvent extends PreventableEvent {
/**
* Provides the original Scheduler event.
*/
event;
/**
* Provides the data item of the event.
*/
dataItem;
/**
* Provides the new start date of the event.
*/
start;
/**
* Provides the new end date of the event.
*/
end;
/**
* Provides a reference to the Scheduler instance that triggered the event.
*/
sender;
/**
* Provides a method to set the class to the resize hint.
*/
setHintClass;
/**
* Provides a method to set the class to the slot over which the event is resized.
*/
setSlotClass;
/**
* @hidden
*/
constructor(sender, args) {
super();
this.sender = sender;
Object.assign(this, args);
}
}
/**
* Represents the arguments for the `resizeStart` event.
*/
class ResizeStartEvent extends PreventableEvent {
/**
* Provides the original Scheduler event.
*/
event;
/**
* Provides the data item of the event.
*/
dataItem;
/**
* Provides 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);
}
}
/**
* Represents the arguments for the `cancel` event.
*/
class CancelEvent extends EditEventBase {
/**
* Provides the edited `formGroup` instance.
*/
formGroup;
}
/**
* Represents the arguments for the `save` event.
*/
class SaveEvent extends EditEventBase {
/**
* Provides the edited `formGroup` instance.
*/
formGroup;
/**
* Provides the selected edit mode.
*/
mode;
}
/**
* Represents the arguments for the `edit` event of the editing directives.
*/
class EditEvent extends PreventableEvent {
/**
* Provides the event data item for which the **Edit** dialog will be opened.
*/
dataItem;
/**
* Provides the event for which the **Edit** dialog will be opened.
*/
event;
/**
* Provides a reference to the Scheduler instance that triggered the event.
*/
sender;
/**
* @hidden
*/
constructor(sender, args) {
super();
this.sender = sender;
Object.assign(this, args);
}
}
/**
* Represents the arguments for the `add` event of the editing directives.
*/
class AddEvent extends PreventableEvent {
/**
* Provides the data for binding the **Add** dialog.
*/
dataItem;
/**
* Provides a reference to the Scheduler instance that triggered the event.
*/
sender;
/**
* @hidden
*/
constructor(sender, args) {
super();
this.sender = sender;
Object.assign(this, args);
}
}
/**
* Represents the arguments for the `slotDragStart` event.
*
* The event is preventable. If prevented, subsequent `slotDrag`, `slotDragEnd`, and `slotSelectionChange` events will not be fired.
*/
class SlotDragStartEvent extends PreventableEvent {
/**
* Provides the start date of the slot selection.
*/
start;
/**
* Provides the end date of the slot selection.
*/
end;
/**
* Indicates if the slot selection consists of all-day slots, or of time slots.
*/
isAllDay;
/**
* Provides the resources for the slot, if grouping by resource; otherwise all Scheduler resources.
*/
resources;
/**
* Provides the original DOM event.
*/
originalEvent;
/**
* Provides a reference to the Scheduler instance that triggered the event.
*/
sender;
/**
* @hidden
*/
constructor(sender, args) {
super();
this.sender = sender;
Object.assign(this, args);
}
}
/**
* Represents the arguments for the `slotDrag` event.
*/
class SlotDragEvent {
/**
* Provides the start date of the slot selection.
*/
start;
/**
* Provides the end date of the slot selection.
*/
end;
/**
* Indicates if the slot selection consists of all-day slots, or of time slots.
*/
isAllDay;
/**
* Provides the resources for the slot, if grouping by resource; otherwise all Scheduler resources.
*/
resources;
/**
* Provides the original DOM event.
*/
originalEvent;
/**
* Provides a reference to the Scheduler instance that triggered the event.
*/
sender;
/**
* @hidden
*/
constructor(sender, args) {
this.sender = sender;
Object.assign(this, args);
}
}
/**
* Represents the 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 the `<kendo-scheduler>`. For more information and examples, see [customizing the toolbar](slug:toolbar_scheduler) article.
*
* The template context provides the following variables:
* * `selectedDate`—The currently selected date.
* * `dateRange`—The currently selected [`DateRange`](slug:api_scheduler_daterange).
* * `views`—An array of [`SchedulerView`](slug:api_scheduler_schedulerview) instances 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, components inside the toolbar can inject the [`ToolbarService`](slug:api_scheduler_toolbarservice).
*
* @example
* ```html
* <kendo-scheduler>
* <ng-template kendoSchedulerToolbarTemplate let-selectedDate="selectedDate">
* <div class="custom-toolbar">
* <span>Selected Date: {{ selectedDate | date: 'longDate' }}</span>
* <button kendoButton (click)="navigateToToday()">Today</button>
* </div>
* </ng-template>
* </kendo-scheduler>
* ```
*/
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
}] }]; } });
/**
* Represents a service for communication with toolbar controls. Toolbar components use this service to publish 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 to execute.
*/
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 []; } });
/**
* Contains meta information about a Scheduler view.
*/
class SchedulerView {
}
/**
* Represents the selected edit mode when you update or remove events.
* For non-recurring events, use `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 = {}));
/**
* Represents the selected CRUD operation when the user edits or removes recurring events.
*/
var CrudOperation;
(function (CrudOperation) {
/**
* Indicates that the selected recurring event is edited.
*/
CrudOperation[CrudOperation["Edit"] = 0] = "Edit";
/**
* Indicates that the selected recurring event is removed.
*/
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 = {}));
/**
* Use this directive to customize the date header in the **Agenda** view of the Scheduler.
*
* To define a date template, nest an `<ng-template>` tag with the `kendoSchedulerAgendaDateTemplate` directive inside the
* `<kendo-scheduler-agenda-view>` or `<kendo-scheduler>` component ([see example](slug:templates_scheduler#toc-agenda-dates).
*
* The available fields in the template context are:
* - `date`—The header date.
*
* @example
* ```html
* <kendo-scheduler-agenda-view>
* <ng-template kendoSchedulerAgendaDateTemplate let-date="date">
* <!-- custom date header -->
* </ng-template>
* </kendo-scheduler-agenda-view>
* ```
*/
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
}] }]; } });
/**
* Use this directive to customize the time header in the **Agenda** view of the Scheduler.
*
* To define a time template, nest an `<ng-template>` tag with the `kendoSchedulerAgendaTimeTemplate` directive inside the
* `<kendo-scheduler>` or `<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.
*
* @example
* ```html
* <kendo-scheduler-agenda-view>
* <ng-template kendoSchedulerAgendaTimeTemplate let-start="start" let-end="end" let-title="title" let-description="description" let-isAllDay="isAllDay" let-resources="resources">
* <!-- custom time header -->
* </ng-template>
* </kendo-scheduler-agenda-view>
* ```
*/
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
}] }]; } });
/**
* Use this directive to customize the content of all-day events in the Scheduler.
*
* To define an 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.
*
* @example
* ```html
* <kendo-scheduler-day-view>
* <ng-template kendoSchedulerAllDayEventTemplate let-event="event" let-resources="resources">
* <!-- custom all-day event -->
* </ng-template>
* </kendo-scheduler-day-view>
* ```
*/
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
}] }]; } });
/**
* Use this directive to customize the content of all-day slots in the Scheduler.
*
* To define an all-dat slot template, nest an `<ng-template>` tag with the `kendoSchedulerAllDaySlotTemplate` directive inside the
* `<kendo-scheduler>`, `<kendo-scheduler-day-view>`, or `<kendo-scheduler-week-view>` components ([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.
*
* @example
* ```html
* <kendo-scheduler-week-view>
* <ng-template kendoSchedulerAllDaySlotTemplate let-date="date" let-resources="resources">
* <!-- custom all-day slot -->
* </ng-template>
* </kendo-scheduler-week-view>
* ```
*/
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
}] }]; } });
/**
* Use this directive to customize the date header in **Day**, **Week**, and **Timeline** views of the Scheduler.
*
* To define a date header template, nest an `<ng-template>` tag with the `kendoSchedulerDateHeaderTemplate` directive inside the
* `<kendo-scheduler>`, `<kendo-scheduler-day-view>`, `<kendo-scheduler-week-view>`,
* `<kendo-scheduler-timeline-view>`, `<kendo-scheduler-timeline-week-view>`, or `<kendo-scheduler-timeline-month-view>` component ([see example](slug:templates_scheduler#toc-date-headers)).
*
* The available fields in the template context are:
* - `date`—The header date.
*
* @example
* ```html
* <kendo-scheduler-week-view>
* <ng-template kendoSchedulerDateHeaderTemplate let-date="date">
* <!-- custom date header -->
* </ng-template>
* </kendo-scheduler-week-view>
* ```
*/
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
}] }]; } });
/**
* Use this directive to customize the rendering of Scheduler events.
*
* To define an event template, nest an `<ng-template>` tag with the `kendoSchedulerEventTemplate` directive inside the
* `<kendo-scheduler>` or any view component ([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.
*
* @example
* ```html
* <kendo-scheduler>
* <ng-template kendoSchedulerEventTemplate let-event="event" let-resources="resources">
* <!-- custom event rendering -->
* </ng-template>
* </kendo-scheduler>
* ```
*/
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
}] }]; } });
/**
* Use this directive to customize the resource group header in **Day**, **Week**, and **Timeline** views of the Scheduler.
*
* To defina a group header template, nest an `<ng-template>` tag with the `kendoSchedulerGroupHeaderTemplate` directive inside the
* `<kendo-scheduler>`, `<kendo-scheduler-day-view>`, `<kendo-scheduler-week-view>`,
* `<kendo-scheduler-timeline-view>`, `<kendo-scheduler-timeline-week-view>`, or `<kendo-scheduler-timeline-month-view>` component ([see example](slug:templates_scheduler#toc-group-headers)).
*
* The available fields in the template context are:
* - `resource`—The resource item.
*
* @example
* ```html
* <kendo-scheduler-timeline-view>
* <ng-template kendoSchedulerGroupHeaderTemplate let-resource="resource">
* <!-- custom group header -->
* </ng-template>
* </kendo-scheduler-timeline-view>
* ```
*/
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
}] }]; } });
/**
* Use this directive to customize the major-time headers in **Day** and **Week** views of the Scheduler.
*
* To define a major-time header template, nest an `<ng-template>` tag with the `kendoSchedulerMajorTimeHeaderTemplate` directive inside the
* `<kendo-scheduler>`, `<kendo-scheduler-day-view>`, or `<kendo-scheduler-week-view>` component ([see example](slug:templates_scheduler#toc-major-time-headers)).
*
* The available fields in the template context are:
* - `date`—The date of the header.
*
* @example
* ```html
* <kendo-scheduler-day-view>
* <ng-template kendoSchedulerMajorTimeHeaderTemplate let-date="date">
* <!-- custom major time header -->
* </ng-template>
* </kendo-scheduler-day-view>
* ```
*/
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
}] }]; } });
/**
* Use this directive to customize the minor-time headers in the **Day** and **Week** views of the Scheduler.
*
* To define a minor-time header template, nest an `<ng-template>` tag with the `kendoSchedulerMinorTimeHeaderTemplate` directive inside the
* `<kendo-scheduler>`, `<kendo-scheduler-day-view>`, or `<kendo-scheduler-week-view>` component ([see example](slug:templates_scheduler#toc-minor-time-headers)).
*
* The available fields in the template context are:
* - `date`—The date of the header.
*
* @example
* ```html
* <kendo-scheduler-week-view>
* <ng-template kendoSchedulerMinorTimeHeaderTemplate let-date="date">
* <!-- custom minor time header -->
* </ng-template>
* </kendo-scheduler-week-view>
* ```
*/
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
}] }]; } });
/**
* Use this directive to customize the day slots in the **Month** view of the Scheduler.
*
* To define a day slot template, nest an `<ng-template>` tag with the `kendoSchedulerMonthDaySlotTemplate` directive inside the
* `<kendo-scheduler>` or `<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.
*
* @example
* ```html
* <kendo-scheduler-month-view>
* <ng-template kendoSchedulerMonthDaySlotTemplate let-date="date" let-resources="resources">
* <!-- custom month day slot -->
* </ng-template>
* </kendo-scheduler-month-view>
* ```
*/
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
}] }]; } });
/**
* Use this directive to customize the day slots in the **Multi-Week** view of the Scheduler.
*
* To defina a day slot template, nest an `<ng-template>` tag with the `kendoSchedulerMultiWeekDaySlotTemplate` directive inside the
* `<kendo-scheduler>` or `<kendo-scheduler-multi-week-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.
*
* @example
* ```html
* <kendo-scheduler-multi-week-view>
* <ng-template kendoSchedulerMultiWeekDaySlotTemplate let-date="date" let-resources="resources">
* <!-- custom multi-week day slot -->
* </ng-template>
* <kendo-scheduler-multi-week-view>
* ```
*/
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 a time-slot template, nest an `<ng-template>` tag with the `kendoSchedulerTimeSlotTemplate`
* directive inside the `<kendo-scheduler>`, `<kendo-scheduler-day-view>`, `<kendo-scheduler-week-view>`,
* `<kendo-scheduler-timeline-view>`, `<kendo-scheduler-timeline-week-view>`, or `<kendo-scheduler-timeline-month-view>` component ([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.
*
* @example
* ```html
* <kendo-scheduler-week-view>
* <ng-template kendoSchedulerTimeSlotTemplate let-date="date" let-resources="resources">
* <!-- custom time slot -->
* </ng-template>
* </kendo-scheduler-week-view>
* ```
*/
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 {
/**
* Represents a stream that publishes navigation actions to the view.
*/
action;
/**
* Represents a stream that executes methods from the view.
*/
execute;
/**
* Represents a stream of items (events) to be displayed in the view.
*/
items;
/**
* Represents a stream with the selected date to be displayed in the view.
*/
selectedDate;
/**
* Emits when the Scheduler element is resized.
*/
resize;
/**
* Emits when the Scheduler options change.
*/
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 {
/**
* Represents a stream that publishes the visible date range for the current view to the Scheduler.
*/
dateRange;
/**
* Represents a stream that publishes changes to the selected date, which initiate from the view.
*/
nextDate;
/**
* Represents a stream