@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.
680 lines (679 loc) • 34 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 { Component, Input, NgZone, ChangeDetectorRef, ViewChildren, QueryList, ElementRef } from '@angular/core';
import { FormControl, ReactiveFormsModule } from '@angular/forms';
import { LocalizationService } from '@progress/kendo-angular-l10n';
import { EditService } from './edit.service';
import { fromEvent } from 'rxjs';
import { isPresent } from '../common/util';
import { EditMode } from '../types';
import { EditDialogTemplateDirective } from './edit-dialog-template.directive';
import { MultipleResourceEditorComponent } from './resource-multiple-editor.component';
import { SingleResourceEditorComponent } from './resource-single-editor.component';
import { Keys } from '@progress/kendo-angular-common';
import { filter } from 'rxjs/operators';
import { withModifiers, Modifiers } from '../common/modifiers';
import { FocusService } from '../navigation';
import { Day, ZonedDate, toLocalDate } from '@progress/kendo-date-math';
import { toUTCDateTime, formValueOrDefault } from '../views/utils';
import { cancelOutlineIcon, saveIcon } from '@progress/kendo-svg-icons';
import { ButtonComponent } from '@progress/kendo-angular-buttons';
import { DialogComponent, DialogActionsComponent } from '@progress/kendo-angular-dialog';
import { TextAreaDirective, CheckBoxDirective, TextBoxDirective, FormFieldComponent } from '@progress/kendo-angular-inputs';
import { RecurrenceEditorComponent } from './recurrence/recurrence-editor.component';
import { TimeZoneEditorComponent } from './timezone-editor.component';
import { LabelDirective, LabelComponent } from '@progress/kendo-angular-label';
import { SchedulerDateTimePickerComponent } from './date-time-picker.component';
import { NgTemplateOutlet } from '@angular/common';
import * as i0 from "@angular/core";
import * as i1 from "./edit.service";
import * as i2 from "@progress/kendo-angular-l10n";
import * as i3 from "../navigation";
import * as i4 from "@angular/forms";
/**
* @hidden
*/
export class EditDialogComponent {
ngZone;
editService;
localization;
changeDetector;
element;
focusService;
multipleResourceEditors;
singleResourceEditors;
resources = [];
timezone = 'Etc/UTC';
weekStart;
fields;
editTemplate;
get autoFocusedElement() {
if (this.editTemplate) {
return this.editTemplate.autoFocusedElement;
}
return '.k-form-field input';
}
dialogTitle;
isActive;
editMode;
get isEditingSeries() {
return this.editMode === EditMode.Series && Boolean(this.formGroup.get(this.fields.recurrenceRule));
}
get eventTimezone() {
return formValueOrDefault(this.formGroup, this.fields.startTimezone, this.timezone);
}
get endTimezone() {
return formValueOrDefault(this.formGroup, this.fields.endTimezone, this.eventTimezone);
}
recurrenceStart;
setTimeZone = false;
setSeparateStartEndTimeZones = false;
formGroup;
editedEvent;
isNew;
saveIcon = saveIcon;
cancelIcon = cancelOutlineIcon;
subs;
constructor(ngZone, editService, localization, changeDetector, element, focusService) {
this.ngZone = ngZone;
this.editService = editService;
this.localization = localization;
this.changeDetector = changeDetector;
this.element = element;
this.focusService = focusService;
this.subs = this.editService.changed.subscribe(() => {
this.ngZone.run(() => { this.onChange(); });
});
this.subs.add(fromEvent(this.element.nativeElement, 'keydown')
.pipe(filter(() => this.isActive))
.subscribe((e) => {
if (e.code === Keys.Escape) {
this.reset();
}
if ((e.code === Keys.Enter || e.code === Keys.NumpadEnter) && (withModifiers(e, Modifiers.CtrlKey) || withModifiers(e, Modifiers.MetaKey))) {
this.onSave(e);
}
e.stopPropagation();
}));
}
onChange() {
this.changeDetector.markForCheck();
if (this.editService.hasNewEvent) {
this.editMode = EditMode.Series;
this.formGroup = this.editService.context.formGroup;
this.isNew = true;
this.applyLocalTimezone();
}
else if (this.editService.isEditing()) {
const { dataItem, mode } = this.editService.context;
this.formGroup = this.editService.context.formGroup;
this.isNew = false;
this.editedEvent = dataItem;
this.editMode = isPresent(mode) ? mode : EditMode.Series;
this.applyLocalTimezone();
}
else {
this.reset();
return;
}
if (!this.editTemplate) {
this.addTimeZoneCheckboxesToFormGroup();
this.subscribeToFormGroupChanges();
}
if (isPresent(this.formGroup)) {
this.recurrenceStart = this.formGroup.get(this.fields.start).value;
}
this.isActive = true;
}
ngOnDestroy() {
if (this.subs) {
this.subs.unsubscribe();
}
}
onCancel(e) {
e.preventDefault();
this.onClose();
this.changeDetector.markForCheck();
}
onSave(e) {
e.preventDefault();
this.applyTimezone();
this.editService.save();
this.changeDetector.markForCheck();
}
onClose() {
this.editService.endEdit();
this.changeDetector.markForCheck();
this.focusService.focus();
}
get hasAllDay() {
return Boolean(this.formGroup.get(this.fields.isAllDay));
}
get hasStartTimeZone() {
return Boolean(this.formGroup.get(this.fields.startTimezone));
}
get isStartTimeZoneVisible() {
return this.formGroup && this.formGroup.get('startTimezoneCheckbox').value;
}
get hasEndTimeZone() {
return Boolean(this.formGroup.get(this.fields.endTimezone));
}
get isEndTimeZoneVisible() {
return this.formGroup && this.formGroup.get('endTimezoneCheckbox').value;
}
getFormValue(field) {
if (field) {
return this.formGroup.get(field);
}
}
textFor(key) {
return this.localization.get(key);
}
onResourceClick(resource) {
const resourceEditors = resource.multiple ? this.multipleResourceEditors : this.singleResourceEditors;
const currentEditor = resourceEditors.filter((editor) => editor.resource.field === resource.field).pop();
if (currentEditor) {
currentEditor.focus();
}
}
getControl(name) {
return this.formGroup.get(name);
}
reset() {
this.isActive = false;
this.setTimeZone = false;
this.setSeparateStartEndTimeZones = false;
this.removeTimeZoneCheckboxesFromFormGroup();
this.focusService.focus();
}
addTimeZoneCheckboxesToFormGroup() {
if (isPresent(this.formGroup)) {
const startField = this.fields.startTimezone;
this.formGroup.addControl('startTimezoneCheckbox', new FormControl(this.formGroup.contains(startField) &&
this.formGroup.get(startField).value));
const endField = this.fields.endTimezone;
this.formGroup.addControl('endTimezoneCheckbox', new FormControl(this.formGroup.contains(endField) &&
this.formGroup.get(endField).value));
}
}
removeTimeZoneCheckboxesFromFormGroup() {
if (isPresent(this.formGroup)) {
this.formGroup.removeControl('startTimezoneCheckbox');
this.formGroup.removeControl('endTimezoneCheckbox');
}
}
subscribeToFormGroupChanges() {
if (isPresent(this.formGroup)) {
const fields = this.fields;
this.formGroup.get('startTimezoneCheckbox').valueChanges.subscribe(isTrue => {
if (!isTrue) {
this.formGroup.get(fields.startTimezone).setValue(null, { emitEvent: false });
this.formGroup.get(fields.endTimezone).setValue(null, { emitEvent: false });
this.formGroup.get('endTimezoneCheckbox').setValue(false, { emitEvent: false });
}
});
this.formGroup.get('endTimezoneCheckbox').valueChanges.subscribe(isTrue => {
if (!isTrue) {
this.formGroup.get(fields.endTimezone).setValue(null, { emitEvent: false });
}
});
this.formGroup.get(fields.start).valueChanges.subscribe((newStart) => {
this.recurrenceStart = newStart;
});
}
}
/**
* Converts the event dates to "display dates" that look like the original date in its time zone.
* The result does not represent the same moment in time and must be converted back to local dates.
*/
applyLocalTimezone() {
const fields = this.fields;
const start = this.readDateAsLocal(fields.start, this.eventTimezone);
const end = this.readDateAsLocal(fields.end, this.endTimezone);
this.formGroup.get(fields.start).reset(start);
this.formGroup.get(fields.end).reset(end);
}
/**
* Converts the "display dates" used by the editors back to local dates that represent the true moment in time.
*/
applyTimezone() {
const fields = this.fields;
const start = this.readDateWithTimezone(fields.start, this.eventTimezone);
const end = this.readDateWithTimezone(fields.end, this.endTimezone);
this.formGroup.get(fields.start).reset(start);
this.formGroup.get(fields.end).reset(end);
}
readDateWithTimezone(field, timezone) {
const value = this.formGroup.get(field).value;
return ZonedDate.fromUTCDate(toUTCDateTime(value), timezone).toLocalDate();
}
readDateAsLocal(field, timezone) {
const value = this.formGroup.get(field).value;
return toLocalDate(ZonedDate.fromLocalDate(value, timezone).toUTCDate());
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: EditDialogComponent, deps: [{ token: i0.NgZone }, { token: i1.EditService }, { token: i2.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i3.FocusService }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: EditDialogComponent, isStandalone: true, selector: "kendo-scheduler-edit-dialog", inputs: { resources: "resources", timezone: "timezone", weekStart: "weekStart", fields: "fields", editTemplate: "editTemplate" }, viewQueries: [{ propertyName: "multipleResourceEditors", predicate: MultipleResourceEditorComponent, descendants: true }, { propertyName: "singleResourceEditors", predicate: SingleResourceEditorComponent, descendants: true }], ngImport: i0, template: `
@if (isActive) {
<kendo-dialog (close)='onClose()' [minWidth]='400' title='{{ textFor("editorTitle") }}' class='k-scheduler-edit-dialog' [autoFocusedElement]="autoFocusedElement">
@if (!editTemplate) {
<form
class='k-scheduler-edit-form k-form k-form-md'
novalidate
[formGroup]='formGroup'
>
<!-- Title -->
<kendo-formfield>
<kendo-label
[for]="title"
[text]="textFor('editorEventTitle')"
labelCssClass="k-form-label"
></kendo-label>
<input
#title
kendoTextBox
[attr.placeholder]="textFor('editorEventTitle')"
[formControl]='getControl(fields.title)'
/>
</kendo-formfield>
<!-- Start -->
<kendo-formfield>
<kendo-label
[for]="startDateTimePicker"
[text]="textFor('editorEventStart')"
labelCssClass="k-form-label"
></kendo-label>
<kendo-scheduler-datetime-picker
#startDateTimePicker
[formControl]='getControl(fields.start)'
[isAllDay]='getFormValue(fields.isAllDay)?.value'
></kendo-scheduler-datetime-picker>
</kendo-formfield>
@if (hasStartTimeZone) {
<kendo-formfield>
<ng-container>
<span class="k-checkbox-wrap">
<input
id='k-set-timezone'
type='checkbox'
kendoCheckBox
formControlName='startTimezoneCheckbox'
/>
</span>
<label [labelClass]="false" class='k-checkbox-label' for='k-set-timezone'>{{ textFor('editorEventTimeZone') }}</label>
</ng-container>
</kendo-formfield>
}
@if (isStartTimeZoneVisible) {
<kendo-formfield>
<kendo-label
[for]="startTzPicker"
[text]="textFor('editorEventStartTimeZone')"
labelCssClass="k-form-label"
></kendo-label>
<kendo-timezone-editor
#startTzPicker
[width]="undefined"
[formControl]='getControl(fields.startTimezone)'
></kendo-timezone-editor>
</kendo-formfield>
}
<!-- End -->
<kendo-formfield>
<kendo-label
[for]="endDateTimePicker"
[text]="textFor('editorEventEnd')"
labelCssClass="k-form-label"
></kendo-label>
<kendo-scheduler-datetime-picker
#endDateTimePicker
[formControl]='getControl(fields.end)'
[isAllDay]='getFormValue(fields.isAllDay)?.value'
></kendo-scheduler-datetime-picker>
</kendo-formfield>
@if (isStartTimeZoneVisible && hasEndTimeZone) {
<kendo-formfield>
<ng-container>
<span class="k-checkbox-wrap">
<input
id='k-use-separate'
type='checkbox'
kendoCheckBox
formControlName='endTimezoneCheckbox'
/>
</span>
<label [labelClass]="false" class='k-checkbox-label' for='k-use-separate'>{{ textFor('editorEventSeparateTimeZones') }}</label>
</ng-container>
</kendo-formfield>
}
@if (isEndTimeZoneVisible) {
<kendo-formfield>
<kendo-label
[for]="endTzPicker"
[text]="textFor('editorEventEndTimeZone')"
labelCssClass="k-form-label"
></kendo-label>
<kendo-timezone-editor
#endTzPicker
[width]="undefined"
[formControl]='getControl(fields.endTimezone)'
></kendo-timezone-editor>
</kendo-formfield>
}
<!-- All day -->
@if (hasAllDay) {
<kendo-formfield>
<ng-container>
<span class="k-checkbox-wrap">
<input
id='k-is-allday-chkbox'
type='checkbox'
kendoCheckBox
[formControl]='getControl(fields.isAllDay)'
/>
</span>
<label [labelClass]="false" class='k-checkbox-label' for='k-is-allday-chkbox'>{{ textFor('editorEventAllDay') }}</label>
</ng-container>
</kendo-formfield>
}
<!-- Series -->
@if (isEditingSeries) {
<kendo-recurrence-editor
[formControl]='getControl(fields.recurrenceRule)'
[start]='recurrenceStart'
[timezone]='eventTimezone'
[weekStart]='weekStart'
></kendo-recurrence-editor>
}
<!-- Description -->
@if (getFormValue(fields.description)) {
<kendo-formfield>
<kendo-label
[for]="description"
[text]="textFor('editorEventDescription')"
labelCssClass="k-form-label"
></kendo-label>
<textarea #description kendoTextArea [formControl]='getControl(fields.description)'></textarea>
</kendo-formfield>
}
<!-- Resources -->
@for (resource of resources; track resource) {
@if (getFormValue(resource.field)) {
<kendo-formfield>
<label class='k-label k-form-label' (click)="onResourceClick(resource)">
{{ resource.name ? resource.name : resource.field }}
</label>
@if (resource.multiple) {
<kendo-multiple-resource-editor
[formControl]='getControl(resource.field)'
[resource]='resource'>
</kendo-multiple-resource-editor>
}
@if (!resource.multiple) {
<kendo-single-resource-editor
[formControl]='getControl(resource.field)'
[resource]='resource'>
</kendo-single-resource-editor>
}
</kendo-formfield>
}
}
</form>
}
@if (editTemplate) {
<form novalidate [formGroup]='formGroup'>
<ng-container [ngTemplateOutlet]='editTemplate.templateRef'
[ngTemplateOutletContext]="{
$implicit: formGroup,
formGroup: formGroup,
dataItem: editedEvent,
editMode: editMode,
isNew: isNew
}">
</ng-container>
</form>
}
<kendo-dialog-actions layout="start">
<button
kendoButton
themeColor="primary"
icon="save"
[svgIcon]="saveIcon"
[disabled]="!formGroup.valid"
(click)="onSave($event)"
>{{ textFor('save') }}</button>
<button
kendoButton
icon="cancel-outline"
[svgIcon]="cancelIcon"
(click)="onCancel($event)"
>{{ textFor('cancel') }}</button>
</kendo-dialog-actions>
</kendo-dialog>
}
`, isInline: true, dependencies: [{ kind: "component", type: DialogComponent, selector: "kendo-dialog", inputs: ["actions", "actionsLayout", "autoFocusedElement", "title", "width", "minWidth", "maxWidth", "height", "minHeight", "maxHeight", "animation", "themeColor"], outputs: ["action", "close"], exportAs: ["kendoDialog"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: FormFieldComponent, selector: "kendo-formfield", inputs: ["showHints", "orientation", "showErrors", "colSpan"] }, { kind: "component", type: LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional", "labelCssStyle", "labelCssClass"], exportAs: ["kendoLabel"] }, { kind: "directive", type: TextBoxDirective, selector: "input[kendoTextBox]", inputs: ["value"] }, { kind: "component", type: SchedulerDateTimePickerComponent, selector: "kendo-scheduler-datetime-picker", inputs: ["isAllDay"], outputs: ["valueChange"] }, { kind: "directive", type: CheckBoxDirective, selector: "input[kendoCheckBox]", inputs: ["size", "rounded"] }, { kind: "directive", type: LabelDirective, selector: "label[for]", inputs: ["for", "labelClass"] }, { kind: "component", type: TimeZoneEditorComponent, selector: "kendo-timezone-editor", inputs: ["width"], outputs: ["valueChange"] }, { kind: "component", type: RecurrenceEditorComponent, selector: "kendo-recurrence-editor", inputs: ["start", "timezone", "weekStart", "repeatEveryOptions", "endAfterOptions", "repeatOnOptions", "endOnOptions"], outputs: ["valueChange"], exportAs: ["kendoRecurrenceEditor"] }, { kind: "directive", type: TextAreaDirective, selector: "textarea[kendoTextArea]", inputs: ["autoSize", "value"], outputs: ["valueChange"] }, { kind: "component", type: MultipleResourceEditorComponent, selector: "kendo-multiple-resource-editor" }, { kind: "component", type: SingleResourceEditorComponent, selector: "kendo-single-resource-editor" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DialogActionsComponent, selector: "kendo-dialog-actions", inputs: ["actions", "layout"], outputs: ["action"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: EditDialogComponent, decorators: [{
type: Component,
args: [{
selector: 'kendo-scheduler-edit-dialog',
template: `
@if (isActive) {
<kendo-dialog (close)='onClose()' [minWidth]='400' title='{{ textFor("editorTitle") }}' class='k-scheduler-edit-dialog' [autoFocusedElement]="autoFocusedElement">
@if (!editTemplate) {
<form
class='k-scheduler-edit-form k-form k-form-md'
novalidate
[formGroup]='formGroup'
>
<!-- Title -->
<kendo-formfield>
<kendo-label
[for]="title"
[text]="textFor('editorEventTitle')"
labelCssClass="k-form-label"
></kendo-label>
<input
#title
kendoTextBox
[attr.placeholder]="textFor('editorEventTitle')"
[formControl]='getControl(fields.title)'
/>
</kendo-formfield>
<!-- Start -->
<kendo-formfield>
<kendo-label
[for]="startDateTimePicker"
[text]="textFor('editorEventStart')"
labelCssClass="k-form-label"
></kendo-label>
<kendo-scheduler-datetime-picker
#startDateTimePicker
[formControl]='getControl(fields.start)'
[isAllDay]='getFormValue(fields.isAllDay)?.value'
></kendo-scheduler-datetime-picker>
</kendo-formfield>
@if (hasStartTimeZone) {
<kendo-formfield>
<ng-container>
<span class="k-checkbox-wrap">
<input
id='k-set-timezone'
type='checkbox'
kendoCheckBox
formControlName='startTimezoneCheckbox'
/>
</span>
<label [labelClass]="false" class='k-checkbox-label' for='k-set-timezone'>{{ textFor('editorEventTimeZone') }}</label>
</ng-container>
</kendo-formfield>
}
@if (isStartTimeZoneVisible) {
<kendo-formfield>
<kendo-label
[for]="startTzPicker"
[text]="textFor('editorEventStartTimeZone')"
labelCssClass="k-form-label"
></kendo-label>
<kendo-timezone-editor
#startTzPicker
[width]="undefined"
[formControl]='getControl(fields.startTimezone)'
></kendo-timezone-editor>
</kendo-formfield>
}
<!-- End -->
<kendo-formfield>
<kendo-label
[for]="endDateTimePicker"
[text]="textFor('editorEventEnd')"
labelCssClass="k-form-label"
></kendo-label>
<kendo-scheduler-datetime-picker
#endDateTimePicker
[formControl]='getControl(fields.end)'
[isAllDay]='getFormValue(fields.isAllDay)?.value'
></kendo-scheduler-datetime-picker>
</kendo-formfield>
@if (isStartTimeZoneVisible && hasEndTimeZone) {
<kendo-formfield>
<ng-container>
<span class="k-checkbox-wrap">
<input
id='k-use-separate'
type='checkbox'
kendoCheckBox
formControlName='endTimezoneCheckbox'
/>
</span>
<label [labelClass]="false" class='k-checkbox-label' for='k-use-separate'>{{ textFor('editorEventSeparateTimeZones') }}</label>
</ng-container>
</kendo-formfield>
}
@if (isEndTimeZoneVisible) {
<kendo-formfield>
<kendo-label
[for]="endTzPicker"
[text]="textFor('editorEventEndTimeZone')"
labelCssClass="k-form-label"
></kendo-label>
<kendo-timezone-editor
#endTzPicker
[width]="undefined"
[formControl]='getControl(fields.endTimezone)'
></kendo-timezone-editor>
</kendo-formfield>
}
<!-- All day -->
@if (hasAllDay) {
<kendo-formfield>
<ng-container>
<span class="k-checkbox-wrap">
<input
id='k-is-allday-chkbox'
type='checkbox'
kendoCheckBox
[formControl]='getControl(fields.isAllDay)'
/>
</span>
<label [labelClass]="false" class='k-checkbox-label' for='k-is-allday-chkbox'>{{ textFor('editorEventAllDay') }}</label>
</ng-container>
</kendo-formfield>
}
<!-- Series -->
@if (isEditingSeries) {
<kendo-recurrence-editor
[formControl]='getControl(fields.recurrenceRule)'
[start]='recurrenceStart'
[timezone]='eventTimezone'
[weekStart]='weekStart'
></kendo-recurrence-editor>
}
<!-- Description -->
@if (getFormValue(fields.description)) {
<kendo-formfield>
<kendo-label
[for]="description"
[text]="textFor('editorEventDescription')"
labelCssClass="k-form-label"
></kendo-label>
<textarea #description kendoTextArea [formControl]='getControl(fields.description)'></textarea>
</kendo-formfield>
}
<!-- Resources -->
@for (resource of resources; track resource) {
@if (getFormValue(resource.field)) {
<kendo-formfield>
<label class='k-label k-form-label' (click)="onResourceClick(resource)">
{{ resource.name ? resource.name : resource.field }}
</label>
@if (resource.multiple) {
<kendo-multiple-resource-editor
[formControl]='getControl(resource.field)'
[resource]='resource'>
</kendo-multiple-resource-editor>
}
@if (!resource.multiple) {
<kendo-single-resource-editor
[formControl]='getControl(resource.field)'
[resource]='resource'>
</kendo-single-resource-editor>
}
</kendo-formfield>
}
}
</form>
}
@if (editTemplate) {
<form novalidate [formGroup]='formGroup'>
<ng-container [ngTemplateOutlet]='editTemplate.templateRef'
[ngTemplateOutletContext]="{
$implicit: formGroup,
formGroup: formGroup,
dataItem: editedEvent,
editMode: editMode,
isNew: isNew
}">
</ng-container>
</form>
}
<kendo-dialog-actions layout="start">
<button
kendoButton
themeColor="primary"
icon="save"
[svgIcon]="saveIcon"
[disabled]="!formGroup.valid"
(click)="onSave($event)"
>{{ textFor('save') }}</button>
<button
kendoButton
icon="cancel-outline"
[svgIcon]="cancelIcon"
(click)="onCancel($event)"
>{{ textFor('cancel') }}</button>
</kendo-dialog-actions>
</kendo-dialog>
}
`,
standalone: true,
imports: [DialogComponent, ReactiveFormsModule, FormFieldComponent, LabelComponent, TextBoxDirective, SchedulerDateTimePickerComponent, CheckBoxDirective, LabelDirective, TimeZoneEditorComponent, RecurrenceEditorComponent, TextAreaDirective, MultipleResourceEditorComponent, SingleResourceEditorComponent, NgTemplateOutlet, DialogActionsComponent, ButtonComponent]
}]
}], ctorParameters: () => [{ type: i0.NgZone }, { type: i1.EditService }, { type: i2.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i3.FocusService }], propDecorators: { multipleResourceEditors: [{
type: ViewChildren,
args: [MultipleResourceEditorComponent]
}], singleResourceEditors: [{
type: ViewChildren,
args: [SingleResourceEditorComponent]
}], resources: [{
type: Input
}], timezone: [{
type: Input
}], weekStart: [{
type: Input
}], fields: [{
type: Input
}], editTemplate: [{
type: Input
}] } });