@progress/kendo-angular-scheduler 4.0.0-next.202204060921 → 4.1.0-dev.202205110813

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (43) hide show
  1. package/bundles/kendo-angular-scheduler.umd.js +1 -1
  2. package/editing-directives/base-edit.service.d.ts +18 -0
  3. package/esm2015/editing/edit-dialog.component.js +176 -162
  4. package/esm2015/editing/recurrence/recurrence-editor.component.js +36 -40
  5. package/esm2015/editing/recurrence/recurrence-end-rule-editor.component.js +14 -16
  6. package/esm2015/editing/recurrence/recurrence-frequency-editor.component.js +27 -25
  7. package/esm2015/editing/recurrence/recurrence-interval-editor.component.js +44 -44
  8. package/esm2015/editing/recurrence/recurrence-monthly-yearly-editor.component.js +12 -14
  9. package/esm2015/editing/recurrence/recurrence-weekday-rule-editor.component.js +27 -25
  10. package/esm2015/editing-directives/base-edit.service.js +18 -0
  11. package/esm2015/package-metadata.js +1 -1
  12. package/esm2015/scheduler.component.js +8 -1
  13. package/esm2015/toolbar/navigation.component.js +1 -1
  14. package/esm2015/toolbar/view-selector.component.js +1 -1
  15. package/esm2015/types/ongoing-events-settings.interface.js +5 -0
  16. package/esm2015/views/common/base-view.js +3 -0
  17. package/esm2015/views/common/configuration-view-base.js +9 -1
  18. package/esm2015/views/common/view-footer.component.js +1 -1
  19. package/esm2015/views/constants.js +6 -0
  20. package/esm2015/views/day-time/day-time-view-base.js +10 -1
  21. package/esm2015/views/day-time/day-time-view.component.js +32 -3
  22. package/esm2015/views/month/month-view-renderer.component.js +44 -7
  23. package/esm2015/views/month/month-view.component.js +3 -1
  24. package/esm2015/views/multi-day/day-view.component.js +2 -0
  25. package/esm2015/views/multi-day/multi-day-view.component.js +2 -0
  26. package/esm2015/views/multi-day/week-view.component.js +2 -0
  27. package/esm2015/views/multi-day/work-week-view.component.js +2 -0
  28. package/esm2015/views/timeline/timeline-month-view.component.js +2 -0
  29. package/esm2015/views/timeline/timeline-view.component.js +2 -0
  30. package/esm2015/views/timeline/timeline-week-view.component.js +2 -0
  31. package/esm2015/views/utils.js +5 -1
  32. package/fesm2015/kendo-angular-scheduler.js +596 -453
  33. package/package.json +16 -18
  34. package/scheduler.component.d.ts +6 -2
  35. package/schematics/ngAdd/index.js +1 -1
  36. package/types/ongoing-events-settings.interface.d.ts +23 -0
  37. package/types.d.ts +1 -0
  38. package/views/common/base-view.d.ts +6 -0
  39. package/views/common/configuration-view-base.d.ts +10 -2
  40. package/views/constants.d.ts +6 -0
  41. package/views/day-time/day-time-view-base.d.ts +10 -2
  42. package/views/day-time/day-time-view.component.d.ts +7 -1
  43. package/views/month/month-view-renderer.component.d.ts +11 -2
@@ -69,8 +69,26 @@ export declare abstract class BaseEditService<TEvent> implements EditService<TEv
69
69
  remove(event: TEvent): void;
70
70
  removeSeries(event: TEvent): void;
71
71
  removeOccurrence(event: TEvent): void;
72
+ /**
73
+ * Returns the master recurring event for a specified recurring event.
74
+ *
75
+ * @param event - An event from the recurrence series.
76
+ * @returns the master recurring event for the series.
77
+ */
72
78
  findRecurrenceMaster(event: TEvent): any;
79
+ /**
80
+ * Checks if the event is part of the recurrence series.
81
+ *
82
+ * @param event - The event that will be checked.
83
+ * @returns `true` if the event is an occurrence, an exception, or a master event. Otherwise, returns `false`.
84
+ */
73
85
  isRecurring(event: any): boolean;
86
+ /**
87
+ * Checks if the event is a recurrence exception.
88
+ *
89
+ * @param event - The event that will be checked.
90
+ * @returns `true` if the event is a unique event which belongs to a recurrence series. Otherwise, returns `false`.
91
+ */
74
92
  isException(event: any): boolean;
75
93
  /**
76
94
  * Returns a Boolean value which indicates if the event is new.
@@ -61,7 +61,7 @@ export class EditDialogComponent {
61
61
  if (this.editTemplate) {
62
62
  return this.editTemplate.autoFocusedElement;
63
63
  }
64
- return '.k-edit-field input';
64
+ return '.k-form-field-wrap input';
65
65
  }
66
66
  get isEditingSeries() {
67
67
  return this.editMode === 2 /* Series */ && Boolean(this.formGroup.get(this.fields.recurrenceRule));
@@ -230,113 +230,120 @@ export class EditDialogComponent {
230
230
  }
231
231
  EditDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", 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 });
232
232
  EditDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: EditDialogComponent, 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: `
233
- <kendo-dialog (close)='onClose()' [minWidth]='700' *ngIf='isActive' title='{{ textFor("editorTitle") }}' class='k-scheduler-edit-dialog' [autoFocusedElement]="autoFocusedElement">
233
+ <kendo-dialog (close)='onClose()' [minWidth]='750' *ngIf='isActive' title='{{ textFor("editorTitle") }}' class='k-scheduler-edit-dialog' [autoFocusedElement]="autoFocusedElement">
234
234
  <ng-container *ngIf='!editTemplate'>
235
- <div class='k-scheduler-edit-form'>
236
- <div class='k-edit-form-container'>
237
- <form novalidate [formGroup]='formGroup'>
238
- <div class='k-edit-label'>
239
- <label for='k-event-title'>{{ textFor('editorEventTitle') }}</label>
240
- </div>
241
- <div class='k-edit-field'>
235
+ <div class='k-form k-form-horizontal'>
236
+ <form novalidate [formGroup]='formGroup'>
237
+ <!-- Title -->
238
+ <div class='k-form-field'>
239
+ <label for='k-event-title' class='k-form-label'>{{ textFor('editorEventTitle') }}</label>
240
+ <div class='k-form-field-wrap'>
242
241
  <input #title id='k-event-title' kendoTextBox placeholder='Title' [formControl]='getControl(fields.title)' />
243
242
  </div>
243
+ </div>
244
244
 
245
- <div class='k-edit-label'>
246
- <label (click)="startDateTimePicker.focus()">{{ textFor('editorEventStart') }}</label>
247
- </div>
248
- <div class='k-edit-field'>
245
+ <!-- Start -->
246
+ <div class='k-form-field'>
247
+ <label class='k-form-label' (click)="startDateTimePicker.focus()">{{ textFor('editorEventStart') }}</label>
248
+ <div class='k-form-field-wrap'>
249
249
  <kendo-scheduler-datetime-picker #startDateTimePicker [formControl]='getControl(fields.start)'
250
250
  [isAllDay]='getFormValue(fields.isAllDay)?.value'>
251
251
  </kendo-scheduler-datetime-picker>
252
252
  </div>
253
+ </div>
253
254
 
254
- <ng-container *ngIf="isStartTimeZoneVisible">
255
- <div class='k-edit-label'>
256
- <label (click)="startTzPicker.focus()">{{ textFor('editorEventStartTimeZone') }}</label>
257
- </div>
255
+ <div class='k-form-field' *ngIf="hasStartTimeZone">
256
+ <label class='k-form-label' for='k-set-timezone'>{{ textFor('editorEventTimeZone') }}</label>
257
+ <div class='k-form-field-wrap'>
258
+ <input type='checkbox' id='k-set-timezone' kendoCheckBox formControlName='startTimezoneCheckbox' />
259
+ </div>
260
+ </div>
258
261
 
259
- <div class='k-edit-field'>
260
- <kendo-timezone-editor #startTzPicker [formControl]='getControl(fields.startTimezone)'></kendo-timezone-editor>
261
- </div>
262
- </ng-container>
262
+ <ng-container *ngIf="isStartTimeZoneVisible">
263
+ <div class='k-form-field'>
264
+ <label class='k-form-label' (click)="startTzPicker.focus()">{{ textFor('editorEventStartTimeZone') }}</label>
263
265
 
264
- <div class='k-edit-label'>
265
- <label (click)="endDateTimePicker.focus()">{{ textFor('editorEventEnd') }}</label>
266
+ <div class='k-form-field-wrap'>
267
+ <kendo-timezone-editor [width]="undefined" #startTzPicker [formControl]='getControl(fields.startTimezone)'></kendo-timezone-editor>
268
+ </div>
266
269
  </div>
267
- <div class='k-edit-field'>
270
+ </ng-container>
271
+
272
+ <!-- End -->
273
+ <div class='k-form-field'>
274
+ <label class='k-form-label' (click)="endDateTimePicker.focus()">{{ textFor('editorEventEnd') }}</label>
275
+ <div class='k-form-field-wrap'>
268
276
  <kendo-scheduler-datetime-picker #endDateTimePicker [formControl]='getControl(fields.end)'
269
277
  [isAllDay]='getFormValue(fields.isAllDay)?.value'>
270
278
  </kendo-scheduler-datetime-picker>
271
279
  </div>
280
+ </div>
272
281
 
273
- <ng-container *ngIf="isEndTimeZoneVisible">
274
- <div class='k-edit-label'>
275
- <label (click)="endTzPicker.focus()">{{ textFor('editorEventEndTimeZone') }}</label>
276
- </div>
282
+ <div class='k-form-field' *ngIf="isStartTimeZoneVisible && hasEndTimeZone">
283
+ <label class='k-form-label' for='k-use-separate'>{{ textFor('editorEventSeparateTimeZones') }}</label>
284
+ <div class='k-form-field-wrap'>
285
+ <input type='checkbox' id='k-use-separate' kendoCheckBox formControlName='endTimezoneCheckbox' />
286
+ </div>
287
+ </div>
288
+
289
+ <ng-container *ngIf="isEndTimeZoneVisible">
290
+ <div class='k-form-field'>
291
+ <label class='k-form-label' (click)="endTzPicker.focus()">{{ textFor('editorEventEndTimeZone') }}</label>
277
292
 
278
- <div class='k-edit-field'>
279
- <kendo-timezone-editor #endTzPicker [formControl]='getControl(fields.endTimezone)'></kendo-timezone-editor>
293
+ <div class='k-form-field-wrap'>
294
+ <kendo-timezone-editor [width]="undefined" #endTzPicker [formControl]='getControl(fields.endTimezone)'></kendo-timezone-editor>
280
295
  </div>
281
- </ng-container>
296
+ </div>
297
+ </ng-container>
298
+
299
+ <!-- All day -->
300
+ <div class='k-form-field'>
301
+ <label class='k-form-label' for='k-is-allday-chkbox'>{{ textFor('editorEventAllDay') }}</label>
282
302
 
283
- <div class='k-edit-field' *ngIf="hasAllDay">
303
+ <div class='k-form-field-wrap' *ngIf="hasAllDay">
284
304
  <input type='checkbox' id='k-is-allday-chkbox' kendoCheckBox [formControl]='getControl(fields.isAllDay)' />
285
- <label class='k-checkbox-label' for='k-is-allday-chkbox'>{{ textFor('editorEventAllDay') }}</label>
286
305
  </div>
306
+ </div>
287
307
 
288
- <div class='k-edit-field' *ngIf="hasStartTimeZone">
289
- <input type='checkbox' id='k-set-timezone' kendoCheckBox
290
- formControlName='startTimezoneCheckbox' />
291
- <label class='k-checkbox-label' for='k-set-timezone'>{{ textFor('editorEventTimeZone') }}</label>
308
+ <!-- Series -->
309
+ <kendo-recurrence-editor
310
+ *ngIf="isEditingSeries"
311
+ [formControl]='getControl(fields.recurrenceRule)'
312
+ [start]='recurrenceStart'
313
+ [timezone]='eventTimezone'
314
+ [weekStart]='weekStart'
315
+ ></kendo-recurrence-editor>
292
316
 
293
- <ng-container *ngIf="isStartTimeZoneVisible && hasEndTimeZone">
294
- <input type='checkbox' id='k-use-separate' kendoCheckBox formControlName='endTimezoneCheckbox' />
295
- <label class='k-checkbox-label' for='k-use-separate'>{{ textFor('editorEventSeparateTimeZones') }}</label>
296
- </ng-container>
317
+ <!-- Description -->
318
+ <div class='k-form-field' *ngIf='getFormValue(fields.description)'>
319
+ <label class='k-form-label' for='k-event-description'>{{ textFor('editorEventDescription') }}</label>
320
+
321
+ <div class='k-form-field-wrap'>
322
+ <textarea id='k-event-description' kendoTextArea [formControl]='getControl(fields.description)'></textarea>
297
323
  </div>
324
+ </div>
298
325
 
299
- <ng-container *ngIf="isEditingSeries">
300
- <kendo-recurrence-editor
301
- [formControl]='getControl(fields.recurrenceRule)'
302
- [start]='recurrenceStart'
303
- [timezone]='eventTimezone'
304
- [weekStart]='weekStart'
305
- ></kendo-recurrence-editor>
306
- </ng-container>
307
-
308
- <ng-container *ngIf='getFormValue(fields.description)'>
309
- <div class='k-edit-label'>
310
- <label for='k-event-description'>{{ textFor('editorEventDescription') }}</label>
311
- </div>
312
- <div class='k-edit-field'>
313
- <textarea id='k-event-description' kendoTextArea [formControl]='getControl(fields.description)'></textarea>
326
+ <!-- Resources -->
327
+ <ng-container *ngFor='let resource of resources'>
328
+ <div class='k-form-field' *ngIf='getFormValue(resource.field)'>
329
+ <label class='k-form-label' (click)="onResourceClick(resource)">
330
+ {{ resource.name ? resource.name : resource.field }}
331
+ </label>
332
+ <div class='k-form-field-wrap'>
333
+ <kendo-multiple-resource-editor
334
+ *ngIf='resource.multiple'
335
+ [formControl]='getControl(resource.field)'
336
+ [resource]='resource'>
337
+ </kendo-multiple-resource-editor>
338
+ <kendo-single-resource-editor
339
+ *ngIf='!resource.multiple'
340
+ [formControl]='getControl(resource.field)'
341
+ [resource]='resource'>
342
+ </kendo-single-resource-editor>
314
343
  </div>
315
- </ng-container>
316
-
317
- <ng-container *ngFor='let resource of resources'>
318
- <ng-container *ngIf='getFormValue(resource.field)'>
319
- <div class='k-edit-label'>
320
- <label (click)="onResourceClick(resource)">
321
- {{ resource.name ? resource.name : resource.field }}
322
- </label>
323
- </div>
324
- <div class='k-edit-field'>
325
- <kendo-multiple-resource-editor
326
- *ngIf='resource.multiple'
327
- [formControl]='getControl(resource.field)'
328
- [resource]='resource'>
329
- </kendo-multiple-resource-editor>
330
- <kendo-single-resource-editor
331
- *ngIf='!resource.multiple'
332
- [formControl]='getControl(resource.field)'
333
- [resource]='resource'>
334
- </kendo-single-resource-editor>
335
- </div>
336
- </ng-container>
337
- </ng-container>
338
- </form>
339
- </div>
344
+ </div>
345
+ </ng-container>
346
+ </form>
340
347
  </div>
341
348
  </ng-container>
342
349
 
@@ -359,119 +366,126 @@ EditDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
359
366
  <button kendoButton themeColor="primary" (click)="onSave($event)" [disabled]="!formGroup.valid">{{ textFor('save') }}</button>
360
367
  </kendo-dialog-actions>
361
368
  </kendo-dialog>
362
- `, isInline: true, components: [{ type: i4.DialogComponent, selector: "kendo-dialog", inputs: ["actions", "actionsLayout", "autoFocusedElement", "title", "width", "minWidth", "maxWidth", "height", "minHeight", "maxHeight"], outputs: ["action", "close"], exportAs: ["kendoDialog"] }, { type: i5.SchedulerDateTimePickerComponent, selector: "kendo-scheduler-datetime-picker", inputs: ["isAllDay"], outputs: ["valueChange"] }, { type: i6.TimeZoneEditorComponent, selector: "kendo-timezone-editor", inputs: ["width"], outputs: ["valueChange"] }, { type: i7.RecurrenceEditorComponent, selector: "kendo-recurrence-editor", inputs: ["start", "timezone", "weekStart", "repeatEveryOptions", "endAfterOptions", "repeatOnOptions", "endOnOptions"], outputs: ["valueChange"], exportAs: ["kendoRecurrenceEditor"] }, { type: i8.MultipleResourceEditorComponent, selector: "kendo-multiple-resource-editor" }, { type: i9.SingleResourceEditorComponent, selector: "kendo-single-resource-editor" }, { type: i4.DialogActionsComponent, selector: "kendo-dialog-actions", inputs: ["actions", "layout"], outputs: ["action"] }], directives: [{ type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i11.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i11.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i11.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i12.TextBoxDirective, selector: "input[kendoTextBox]", inputs: ["value"] }, { type: i11.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i11.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i11.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i11.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i12.CheckBoxDirective, selector: "input[kendoCheckBox]", inputs: ["size", "rounded"] }, { type: i11.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i12.TextAreaDirective, selector: "textarea[kendoTextArea]", inputs: ["autoSize", "value"], outputs: ["valueChange"] }, { type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i13.ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "shape", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
369
+ `, isInline: true, components: [{ type: i4.DialogComponent, selector: "kendo-dialog", inputs: ["actions", "actionsLayout", "autoFocusedElement", "title", "width", "minWidth", "maxWidth", "height", "minHeight", "maxHeight"], outputs: ["action", "close"], exportAs: ["kendoDialog"] }, { type: i5.SchedulerDateTimePickerComponent, selector: "kendo-scheduler-datetime-picker", inputs: ["isAllDay"], outputs: ["valueChange"] }, { type: i6.TimeZoneEditorComponent, selector: "kendo-timezone-editor", inputs: ["width"], outputs: ["valueChange"] }, { type: i7.RecurrenceEditorComponent, selector: "kendo-recurrence-editor", inputs: ["start", "timezone", "weekStart", "repeatEveryOptions", "endAfterOptions", "repeatOnOptions", "endOnOptions"], outputs: ["valueChange"], exportAs: ["kendoRecurrenceEditor"] }, { type: i8.MultipleResourceEditorComponent, selector: "kendo-multiple-resource-editor" }, { type: i9.SingleResourceEditorComponent, selector: "kendo-single-resource-editor" }, { type: i4.DialogActionsComponent, selector: "kendo-dialog-actions", inputs: ["actions", "layout"], outputs: ["action"] }], directives: [{ type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i11.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i11.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i11.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i12.TextBoxDirective, selector: "input[kendoTextBox]", inputs: ["value"] }, { type: i11.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i11.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i11.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i11.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i12.CheckBoxDirective, selector: "input[kendoCheckBox]", inputs: ["size", "rounded"] }, { type: i11.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i12.TextAreaDirective, selector: "textarea[kendoTextArea]", inputs: ["autoSize", "value"], outputs: ["valueChange"] }, { type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i13.ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
363
370
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: EditDialogComponent, decorators: [{
364
371
  type: Component,
365
372
  args: [{
366
373
  selector: 'kendo-scheduler-edit-dialog',
367
374
  template: `
368
- <kendo-dialog (close)='onClose()' [minWidth]='700' *ngIf='isActive' title='{{ textFor("editorTitle") }}' class='k-scheduler-edit-dialog' [autoFocusedElement]="autoFocusedElement">
375
+ <kendo-dialog (close)='onClose()' [minWidth]='750' *ngIf='isActive' title='{{ textFor("editorTitle") }}' class='k-scheduler-edit-dialog' [autoFocusedElement]="autoFocusedElement">
369
376
  <ng-container *ngIf='!editTemplate'>
370
- <div class='k-scheduler-edit-form'>
371
- <div class='k-edit-form-container'>
372
- <form novalidate [formGroup]='formGroup'>
373
- <div class='k-edit-label'>
374
- <label for='k-event-title'>{{ textFor('editorEventTitle') }}</label>
375
- </div>
376
- <div class='k-edit-field'>
377
+ <div class='k-form k-form-horizontal'>
378
+ <form novalidate [formGroup]='formGroup'>
379
+ <!-- Title -->
380
+ <div class='k-form-field'>
381
+ <label for='k-event-title' class='k-form-label'>{{ textFor('editorEventTitle') }}</label>
382
+ <div class='k-form-field-wrap'>
377
383
  <input #title id='k-event-title' kendoTextBox placeholder='Title' [formControl]='getControl(fields.title)' />
378
384
  </div>
385
+ </div>
379
386
 
380
- <div class='k-edit-label'>
381
- <label (click)="startDateTimePicker.focus()">{{ textFor('editorEventStart') }}</label>
382
- </div>
383
- <div class='k-edit-field'>
387
+ <!-- Start -->
388
+ <div class='k-form-field'>
389
+ <label class='k-form-label' (click)="startDateTimePicker.focus()">{{ textFor('editorEventStart') }}</label>
390
+ <div class='k-form-field-wrap'>
384
391
  <kendo-scheduler-datetime-picker #startDateTimePicker [formControl]='getControl(fields.start)'
385
392
  [isAllDay]='getFormValue(fields.isAllDay)?.value'>
386
393
  </kendo-scheduler-datetime-picker>
387
394
  </div>
395
+ </div>
388
396
 
389
- <ng-container *ngIf="isStartTimeZoneVisible">
390
- <div class='k-edit-label'>
391
- <label (click)="startTzPicker.focus()">{{ textFor('editorEventStartTimeZone') }}</label>
392
- </div>
397
+ <div class='k-form-field' *ngIf="hasStartTimeZone">
398
+ <label class='k-form-label' for='k-set-timezone'>{{ textFor('editorEventTimeZone') }}</label>
399
+ <div class='k-form-field-wrap'>
400
+ <input type='checkbox' id='k-set-timezone' kendoCheckBox formControlName='startTimezoneCheckbox' />
401
+ </div>
402
+ </div>
393
403
 
394
- <div class='k-edit-field'>
395
- <kendo-timezone-editor #startTzPicker [formControl]='getControl(fields.startTimezone)'></kendo-timezone-editor>
396
- </div>
397
- </ng-container>
404
+ <ng-container *ngIf="isStartTimeZoneVisible">
405
+ <div class='k-form-field'>
406
+ <label class='k-form-label' (click)="startTzPicker.focus()">{{ textFor('editorEventStartTimeZone') }}</label>
398
407
 
399
- <div class='k-edit-label'>
400
- <label (click)="endDateTimePicker.focus()">{{ textFor('editorEventEnd') }}</label>
408
+ <div class='k-form-field-wrap'>
409
+ <kendo-timezone-editor [width]="undefined" #startTzPicker [formControl]='getControl(fields.startTimezone)'></kendo-timezone-editor>
410
+ </div>
401
411
  </div>
402
- <div class='k-edit-field'>
412
+ </ng-container>
413
+
414
+ <!-- End -->
415
+ <div class='k-form-field'>
416
+ <label class='k-form-label' (click)="endDateTimePicker.focus()">{{ textFor('editorEventEnd') }}</label>
417
+ <div class='k-form-field-wrap'>
403
418
  <kendo-scheduler-datetime-picker #endDateTimePicker [formControl]='getControl(fields.end)'
404
419
  [isAllDay]='getFormValue(fields.isAllDay)?.value'>
405
420
  </kendo-scheduler-datetime-picker>
406
421
  </div>
422
+ </div>
407
423
 
408
- <ng-container *ngIf="isEndTimeZoneVisible">
409
- <div class='k-edit-label'>
410
- <label (click)="endTzPicker.focus()">{{ textFor('editorEventEndTimeZone') }}</label>
411
- </div>
424
+ <div class='k-form-field' *ngIf="isStartTimeZoneVisible && hasEndTimeZone">
425
+ <label class='k-form-label' for='k-use-separate'>{{ textFor('editorEventSeparateTimeZones') }}</label>
426
+ <div class='k-form-field-wrap'>
427
+ <input type='checkbox' id='k-use-separate' kendoCheckBox formControlName='endTimezoneCheckbox' />
428
+ </div>
429
+ </div>
430
+
431
+ <ng-container *ngIf="isEndTimeZoneVisible">
432
+ <div class='k-form-field'>
433
+ <label class='k-form-label' (click)="endTzPicker.focus()">{{ textFor('editorEventEndTimeZone') }}</label>
412
434
 
413
- <div class='k-edit-field'>
414
- <kendo-timezone-editor #endTzPicker [formControl]='getControl(fields.endTimezone)'></kendo-timezone-editor>
435
+ <div class='k-form-field-wrap'>
436
+ <kendo-timezone-editor [width]="undefined" #endTzPicker [formControl]='getControl(fields.endTimezone)'></kendo-timezone-editor>
415
437
  </div>
416
- </ng-container>
438
+ </div>
439
+ </ng-container>
440
+
441
+ <!-- All day -->
442
+ <div class='k-form-field'>
443
+ <label class='k-form-label' for='k-is-allday-chkbox'>{{ textFor('editorEventAllDay') }}</label>
417
444
 
418
- <div class='k-edit-field' *ngIf="hasAllDay">
445
+ <div class='k-form-field-wrap' *ngIf="hasAllDay">
419
446
  <input type='checkbox' id='k-is-allday-chkbox' kendoCheckBox [formControl]='getControl(fields.isAllDay)' />
420
- <label class='k-checkbox-label' for='k-is-allday-chkbox'>{{ textFor('editorEventAllDay') }}</label>
421
447
  </div>
448
+ </div>
422
449
 
423
- <div class='k-edit-field' *ngIf="hasStartTimeZone">
424
- <input type='checkbox' id='k-set-timezone' kendoCheckBox
425
- formControlName='startTimezoneCheckbox' />
426
- <label class='k-checkbox-label' for='k-set-timezone'>{{ textFor('editorEventTimeZone') }}</label>
450
+ <!-- Series -->
451
+ <kendo-recurrence-editor
452
+ *ngIf="isEditingSeries"
453
+ [formControl]='getControl(fields.recurrenceRule)'
454
+ [start]='recurrenceStart'
455
+ [timezone]='eventTimezone'
456
+ [weekStart]='weekStart'
457
+ ></kendo-recurrence-editor>
427
458
 
428
- <ng-container *ngIf="isStartTimeZoneVisible && hasEndTimeZone">
429
- <input type='checkbox' id='k-use-separate' kendoCheckBox formControlName='endTimezoneCheckbox' />
430
- <label class='k-checkbox-label' for='k-use-separate'>{{ textFor('editorEventSeparateTimeZones') }}</label>
431
- </ng-container>
459
+ <!-- Description -->
460
+ <div class='k-form-field' *ngIf='getFormValue(fields.description)'>
461
+ <label class='k-form-label' for='k-event-description'>{{ textFor('editorEventDescription') }}</label>
462
+
463
+ <div class='k-form-field-wrap'>
464
+ <textarea id='k-event-description' kendoTextArea [formControl]='getControl(fields.description)'></textarea>
432
465
  </div>
466
+ </div>
433
467
 
434
- <ng-container *ngIf="isEditingSeries">
435
- <kendo-recurrence-editor
436
- [formControl]='getControl(fields.recurrenceRule)'
437
- [start]='recurrenceStart'
438
- [timezone]='eventTimezone'
439
- [weekStart]='weekStart'
440
- ></kendo-recurrence-editor>
441
- </ng-container>
442
-
443
- <ng-container *ngIf='getFormValue(fields.description)'>
444
- <div class='k-edit-label'>
445
- <label for='k-event-description'>{{ textFor('editorEventDescription') }}</label>
446
- </div>
447
- <div class='k-edit-field'>
448
- <textarea id='k-event-description' kendoTextArea [formControl]='getControl(fields.description)'></textarea>
468
+ <!-- Resources -->
469
+ <ng-container *ngFor='let resource of resources'>
470
+ <div class='k-form-field' *ngIf='getFormValue(resource.field)'>
471
+ <label class='k-form-label' (click)="onResourceClick(resource)">
472
+ {{ resource.name ? resource.name : resource.field }}
473
+ </label>
474
+ <div class='k-form-field-wrap'>
475
+ <kendo-multiple-resource-editor
476
+ *ngIf='resource.multiple'
477
+ [formControl]='getControl(resource.field)'
478
+ [resource]='resource'>
479
+ </kendo-multiple-resource-editor>
480
+ <kendo-single-resource-editor
481
+ *ngIf='!resource.multiple'
482
+ [formControl]='getControl(resource.field)'
483
+ [resource]='resource'>
484
+ </kendo-single-resource-editor>
449
485
  </div>
450
- </ng-container>
451
-
452
- <ng-container *ngFor='let resource of resources'>
453
- <ng-container *ngIf='getFormValue(resource.field)'>
454
- <div class='k-edit-label'>
455
- <label (click)="onResourceClick(resource)">
456
- {{ resource.name ? resource.name : resource.field }}
457
- </label>
458
- </div>
459
- <div class='k-edit-field'>
460
- <kendo-multiple-resource-editor
461
- *ngIf='resource.multiple'
462
- [formControl]='getControl(resource.field)'
463
- [resource]='resource'>
464
- </kendo-multiple-resource-editor>
465
- <kendo-single-resource-editor
466
- *ngIf='!resource.multiple'
467
- [formControl]='getControl(resource.field)'
468
- [resource]='resource'>
469
- </kendo-single-resource-editor>
470
- </div>
471
- </ng-container>
472
- </ng-container>
473
- </form>
474
- </div>
486
+ </div>
487
+ </ng-container>
488
+ </form>
475
489
  </div>
476
490
  </ng-container>
477
491
 
@@ -224,26 +224,24 @@ RecurrenceEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
224
224
  <kendo-recurrence-frequency-editor>
225
225
  </kendo-recurrence-frequency-editor>
226
226
 
227
- <div class='k-recur-view'>
228
- <kendo-recurrence-interval-editor
229
- *ngIf="currentFreq !== 'never'"
230
- [userNumericOptions]="repeatEveryOptions">
231
- </kendo-recurrence-interval-editor>
232
-
233
- <kendo-recurrence-weekday-rule-editor *ngIf="currentFreq === 'weekly'">
234
- </kendo-recurrence-weekday-rule-editor>
235
-
236
- <kendo-recurrence-monthly-yearly-editor
237
- *ngIf="currentFreq === 'monthly' || currentFreq === 'yearly'"
238
- [userNumericOptions]="repeatOnOptions">
239
- </kendo-recurrence-monthly-yearly-editor>
240
-
241
- <kendo-recurrence-end-rule-editor
242
- *ngIf="currentFreq !== 'never'"
243
- [userNumericOptions]="endAfterOptions"
244
- [userDatePickerOptions]="endOnOptions">
245
- </kendo-recurrence-end-rule-editor>
246
- </div>
227
+ <kendo-recurrence-interval-editor
228
+ *ngIf="currentFreq !== 'never'"
229
+ [userNumericOptions]="repeatEveryOptions">
230
+ </kendo-recurrence-interval-editor>
231
+
232
+ <kendo-recurrence-weekday-rule-editor *ngIf="currentFreq === 'weekly'">
233
+ </kendo-recurrence-weekday-rule-editor>
234
+
235
+ <kendo-recurrence-monthly-yearly-editor
236
+ *ngIf="currentFreq === 'monthly' || currentFreq === 'yearly'"
237
+ [userNumericOptions]="repeatOnOptions">
238
+ </kendo-recurrence-monthly-yearly-editor>
239
+
240
+ <kendo-recurrence-end-rule-editor
241
+ *ngIf="currentFreq !== 'never'"
242
+ [userNumericOptions]="endAfterOptions"
243
+ [userDatePickerOptions]="endOnOptions">
244
+ </kendo-recurrence-end-rule-editor>
247
245
  `, isInline: true, components: [{ type: i3.RecurrenceFrequencyEditorComponent, selector: "kendo-recurrence-frequency-editor" }, { type: i4.RecurrenceIntervalEditorComponent, selector: "kendo-recurrence-interval-editor", inputs: ["userNumericOptions"] }, { type: i5.RecurrenceWeekdayRuleEditorComponent, selector: "kendo-recurrence-weekday-rule-editor" }, { type: i6.RecurrenceMonthlyYearlyEditorComponent, selector: "kendo-recurrence-monthly-yearly-editor", inputs: ["userNumericOptions"] }, { type: i7.RecurrenceEndRuleEditorComponent, selector: "kendo-recurrence-end-rule-editor", inputs: ["userNumericOptions", "userDatePickerOptions"] }], directives: [{ type: i8.RecurrenceEditorLocalizedMessagesDirective, selector: "[kendoRecurrenceEditorLocalizedMessages]" }, { type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
248
246
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: RecurrenceEditorComponent, decorators: [{
249
247
  type: Component,
@@ -366,26 +364,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
366
364
  <kendo-recurrence-frequency-editor>
367
365
  </kendo-recurrence-frequency-editor>
368
366
 
369
- <div class='k-recur-view'>
370
- <kendo-recurrence-interval-editor
371
- *ngIf="currentFreq !== 'never'"
372
- [userNumericOptions]="repeatEveryOptions">
373
- </kendo-recurrence-interval-editor>
374
-
375
- <kendo-recurrence-weekday-rule-editor *ngIf="currentFreq === 'weekly'">
376
- </kendo-recurrence-weekday-rule-editor>
377
-
378
- <kendo-recurrence-monthly-yearly-editor
379
- *ngIf="currentFreq === 'monthly' || currentFreq === 'yearly'"
380
- [userNumericOptions]="repeatOnOptions">
381
- </kendo-recurrence-monthly-yearly-editor>
382
-
383
- <kendo-recurrence-end-rule-editor
384
- *ngIf="currentFreq !== 'never'"
385
- [userNumericOptions]="endAfterOptions"
386
- [userDatePickerOptions]="endOnOptions">
387
- </kendo-recurrence-end-rule-editor>
388
- </div>
367
+ <kendo-recurrence-interval-editor
368
+ *ngIf="currentFreq !== 'never'"
369
+ [userNumericOptions]="repeatEveryOptions">
370
+ </kendo-recurrence-interval-editor>
371
+
372
+ <kendo-recurrence-weekday-rule-editor *ngIf="currentFreq === 'weekly'">
373
+ </kendo-recurrence-weekday-rule-editor>
374
+
375
+ <kendo-recurrence-monthly-yearly-editor
376
+ *ngIf="currentFreq === 'monthly' || currentFreq === 'yearly'"
377
+ [userNumericOptions]="repeatOnOptions">
378
+ </kendo-recurrence-monthly-yearly-editor>
379
+
380
+ <kendo-recurrence-end-rule-editor
381
+ *ngIf="currentFreq !== 'never'"
382
+ [userNumericOptions]="endAfterOptions"
383
+ [userDatePickerOptions]="endOnOptions">
384
+ </kendo-recurrence-end-rule-editor>
389
385
  `
390
386
  }]
391
387
  }], ctorParameters: function () { return [{ type: i1.RecurrenceService }, { type: i2.IntlService }]; }, propDecorators: { cssClass: [{