@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
@@ -43,7 +43,7 @@ const packageMetadata = {
43
43
  name: '@progress/kendo-angular-scheduler',
44
44
  productName: 'Kendo UI for Angular',
45
45
  productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
46
- publishDate: 1649236481,
46
+ publishDate: 1652256738,
47
47
  version: '',
48
48
  licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
49
49
  };
@@ -2066,7 +2066,11 @@ function eventResources(event, { taskResources, hasGroups, spans, allResources =
2066
2066
  for (let valueIdx = 0; valueIdx < values.length; valueIdx++) {
2067
2067
  const dataIdx = getDataIdx(values[valueIdx], resource);
2068
2068
  if (dataIdx < 0) {
2069
- return [{ leafIdx: hasGroups ? -1 : 0, resources: [] }];
2069
+ if (hasGroups) {
2070
+ // No match for this resource, but the event might still match other resources.
2071
+ continue;
2072
+ }
2073
+ return [{ leafIdx: 0, resources: [] }];
2070
2074
  }
2071
2075
  const item = resource.data[dataIdx];
2072
2076
  // has groups - need all copies of the multiple resource
@@ -2440,7 +2444,7 @@ ToolbarNavigationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
2440
2444
  </kendo-calendar-messages>
2441
2445
  </kendo-calendar>
2442
2446
  </ng-template>
2443
- `, isInline: true, components: [{ type: i4.CalendarComponent, selector: "kendo-calendar", inputs: ["id", "focusedDate", "min", "max", "rangeValidation", "selection", "value", "disabled", "tabindex", "tabIndex", "disabledDates", "navigation", "activeView", "bottomView", "topView", "type", "animateNavigation", "weekNumber", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "navigationItemTemplate"], outputs: ["activeViewChange", "navigate", "activeViewDateChange", "valueChange"], exportAs: ["kendo-calendar"] }, { type: i4.CalendarCustomMessagesComponent, selector: "kendo-calendar-messages" }], directives: [{ type: i3.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"] }], pipes: { "async": i10.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
2447
+ `, isInline: true, components: [{ type: i4.CalendarComponent, selector: "kendo-calendar", inputs: ["id", "focusedDate", "min", "max", "rangeValidation", "selection", "value", "disabled", "tabindex", "tabIndex", "disabledDates", "navigation", "activeView", "bottomView", "topView", "type", "animateNavigation", "weekNumber", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "navigationItemTemplate"], outputs: ["activeViewChange", "navigate", "activeViewDateChange", "valueChange"], exportAs: ["kendo-calendar"] }, { type: i4.CalendarCustomMessagesComponent, selector: "kendo-calendar-messages" }], directives: [{ type: i3.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"] }], pipes: { "async": i10.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
2444
2448
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ToolbarNavigationComponent, decorators: [{
2445
2449
  type: Component,
2446
2450
  args: [{
@@ -2602,7 +2606,7 @@ ToolbarViewSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
2602
2606
  </span>
2603
2607
  </button>
2604
2608
  </span>
2605
- `, isInline: true, directives: [{ type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.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"] }] });
2609
+ `, isInline: true, directives: [{ type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.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"] }] });
2606
2610
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ToolbarViewSelectorComponent, decorators: [{
2607
2611
  type: Component,
2608
2612
  args: [{
@@ -3471,37 +3475,39 @@ class RecurrenceFrequencyEditorComponent {
3471
3475
  }
3472
3476
  RecurrenceFrequencyEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: RecurrenceFrequencyEditorComponent, deps: [{ token: RecurrenceService }, { token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
3473
3477
  RecurrenceFrequencyEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: RecurrenceFrequencyEditorComponent, selector: "kendo-recurrence-frequency-editor", viewQueries: [{ propertyName: "weekDayButtons", predicate: Button, descendants: true }], ngImport: i0, template: `
3474
- <div class='k-edit-label'>
3475
- <label (click)="onFrequencyClick()">{{ textFor('repeat') }}</label>
3476
- </div>
3477
- <div class='k-edit-field'>
3478
- <kendo-buttongroup [selection]="'single'">
3479
- <button *ngFor='let freq of frequencies' kendoButton
3480
- [style.width.px]="100"
3481
- [togglable]="true"
3482
- [selected]="freq.value === selected"
3483
- (click)="onClick(freq)"
3484
- >{{ freq.text }}</button>
3485
- </kendo-buttongroup>
3478
+ <div class='k-form-field'>
3479
+ <label class="k-form-label" (click)="onFrequencyClick()">{{ textFor('repeat') }}</label>
3480
+
3481
+ <div class='k-form-field-wrap'>
3482
+ <kendo-buttongroup [selection]="'single'">
3483
+ <button *ngFor='let freq of frequencies' kendoButton
3484
+ [style.width.px]="100"
3485
+ [togglable]="true"
3486
+ [selected]="freq.value === selected"
3487
+ (click)="onClick(freq)"
3488
+ >{{ freq.text }}</button>
3489
+ </kendo-buttongroup>
3490
+ </div>
3486
3491
  </div>
3487
- `, isInline: true, components: [{ type: i3.ButtonGroupComponent, selector: "kendo-buttongroup", inputs: ["disabled", "selection", "width", "tabIndex"], outputs: ["navigate"], exportAs: ["kendoButtonGroup"] }], directives: [{ type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.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"] }] });
3492
+ `, isInline: true, components: [{ type: i3.ButtonGroupComponent, selector: "kendo-buttongroup", inputs: ["disabled", "selection", "width", "tabIndex"], outputs: ["navigate"], exportAs: ["kendoButtonGroup"] }], directives: [{ type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.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"] }] });
3488
3493
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: RecurrenceFrequencyEditorComponent, decorators: [{
3489
3494
  type: Component,
3490
3495
  args: [{
3491
3496
  selector: 'kendo-recurrence-frequency-editor',
3492
3497
  template: `
3493
- <div class='k-edit-label'>
3494
- <label (click)="onFrequencyClick()">{{ textFor('repeat') }}</label>
3495
- </div>
3496
- <div class='k-edit-field'>
3497
- <kendo-buttongroup [selection]="'single'">
3498
- <button *ngFor='let freq of frequencies' kendoButton
3499
- [style.width.px]="100"
3500
- [togglable]="true"
3501
- [selected]="freq.value === selected"
3502
- (click)="onClick(freq)"
3503
- >{{ freq.text }}</button>
3504
- </kendo-buttongroup>
3498
+ <div class='k-form-field'>
3499
+ <label class="k-form-label" (click)="onFrequencyClick()">{{ textFor('repeat') }}</label>
3500
+
3501
+ <div class='k-form-field-wrap'>
3502
+ <kendo-buttongroup [selection]="'single'">
3503
+ <button *ngFor='let freq of frequencies' kendoButton
3504
+ [style.width.px]="100"
3505
+ [togglable]="true"
3506
+ [selected]="freq.value === selected"
3507
+ (click)="onClick(freq)"
3508
+ >{{ freq.text }}</button>
3509
+ </kendo-buttongroup>
3510
+ </div>
3505
3511
  </div>
3506
3512
  `
3507
3513
  }]
@@ -3578,30 +3584,30 @@ class RecurrenceIntervalEditorComponent {
3578
3584
  }
3579
3585
  RecurrenceIntervalEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: RecurrenceIntervalEditorComponent, deps: [{ token: RecurrenceService }, { token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
3580
3586
  RecurrenceIntervalEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: RecurrenceIntervalEditorComponent, selector: "kendo-recurrence-interval-editor", inputs: { userNumericOptions: "userNumericOptions" }, ngImport: i0, template: `
3581
- <div class="k-edit-label">
3582
- <label (click)="intervalNumeric.focus()">{{ textForRepeatEvery() }}</label>
3583
- </div>
3584
-
3585
- <div class="k-edit-field">
3586
- <kendo-numerictextbox
3587
- #intervalNumeric
3588
- [style.width.px]="70"
3589
- [min]="numericOptions.min"
3590
- [max]="numericOptions.max"
3591
- [decimals]="0"
3592
- [format]="numericOptions.format"
3593
- [autoCorrect]="numericOptions.autoCorrect"
3594
- [readonly]="numericOptions.readonly"
3595
- [selectOnFocus]="numericOptions.selectOnFocus"
3596
- [spinners]="numericOptions.spinners"
3597
- [step]="numericOptions.step"
3598
- [title]="numericOptions.title"
3599
- [(value)]="intervalValue"
3600
- (blur)="onIntervalBlur()"
3601
- (valueChange)="onIntervalChange($event)">
3602
- </kendo-numerictextbox>
3603
-
3604
- <span>{{ textForFrequency() }}</span>
3587
+ <div class='k-form-field'>
3588
+ <label class="k-form-label" (click)="intervalNumeric.focus()">{{ textForRepeatEvery() }}</label>
3589
+
3590
+ <div class="k-form-field-wrap">
3591
+ <kendo-numerictextbox
3592
+ #intervalNumeric
3593
+ [style.width.px]="70"
3594
+ [min]="numericOptions.min"
3595
+ [max]="numericOptions.max"
3596
+ [decimals]="0"
3597
+ [format]="numericOptions.format"
3598
+ [autoCorrect]="numericOptions.autoCorrect"
3599
+ [readonly]="numericOptions.readonly"
3600
+ [selectOnFocus]="numericOptions.selectOnFocus"
3601
+ [spinners]="numericOptions.spinners"
3602
+ [step]="numericOptions.step"
3603
+ [title]="numericOptions.title"
3604
+ [(value)]="intervalValue"
3605
+ (blur)="onIntervalBlur()"
3606
+ (valueChange)="onIntervalChange($event)">
3607
+ </kendo-numerictextbox>
3608
+
3609
+ <span>{{ textForFrequency() }}</span>
3610
+ </div>
3605
3611
  </div>
3606
3612
  `, isInline: true, components: [{ type: i12.NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur"], exportAs: ["kendoNumericTextBox"] }] });
3607
3613
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: RecurrenceIntervalEditorComponent, decorators: [{
@@ -3609,30 +3615,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
3609
3615
  args: [{
3610
3616
  selector: 'kendo-recurrence-interval-editor',
3611
3617
  template: `
3612
- <div class="k-edit-label">
3613
- <label (click)="intervalNumeric.focus()">{{ textForRepeatEvery() }}</label>
3614
- </div>
3615
-
3616
- <div class="k-edit-field">
3617
- <kendo-numerictextbox
3618
- #intervalNumeric
3619
- [style.width.px]="70"
3620
- [min]="numericOptions.min"
3621
- [max]="numericOptions.max"
3622
- [decimals]="0"
3623
- [format]="numericOptions.format"
3624
- [autoCorrect]="numericOptions.autoCorrect"
3625
- [readonly]="numericOptions.readonly"
3626
- [selectOnFocus]="numericOptions.selectOnFocus"
3627
- [spinners]="numericOptions.spinners"
3628
- [step]="numericOptions.step"
3629
- [title]="numericOptions.title"
3630
- [(value)]="intervalValue"
3631
- (blur)="onIntervalBlur()"
3632
- (valueChange)="onIntervalChange($event)">
3633
- </kendo-numerictextbox>
3634
-
3635
- <span>{{ textForFrequency() }}</span>
3618
+ <div class='k-form-field'>
3619
+ <label class="k-form-label" (click)="intervalNumeric.focus()">{{ textForRepeatEvery() }}</label>
3620
+
3621
+ <div class="k-form-field-wrap">
3622
+ <kendo-numerictextbox
3623
+ #intervalNumeric
3624
+ [style.width.px]="70"
3625
+ [min]="numericOptions.min"
3626
+ [max]="numericOptions.max"
3627
+ [decimals]="0"
3628
+ [format]="numericOptions.format"
3629
+ [autoCorrect]="numericOptions.autoCorrect"
3630
+ [readonly]="numericOptions.readonly"
3631
+ [selectOnFocus]="numericOptions.selectOnFocus"
3632
+ [spinners]="numericOptions.spinners"
3633
+ [step]="numericOptions.step"
3634
+ [title]="numericOptions.title"
3635
+ [(value)]="intervalValue"
3636
+ (blur)="onIntervalBlur()"
3637
+ (valueChange)="onIntervalChange($event)">
3638
+ </kendo-numerictextbox>
3639
+
3640
+ <span>{{ textForFrequency() }}</span>
3641
+ </div>
3636
3642
  </div>
3637
3643
  `
3638
3644
  }]
@@ -3695,37 +3701,39 @@ class RecurrenceWeekdayRuleEditorComponent {
3695
3701
  }
3696
3702
  RecurrenceWeekdayRuleEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: RecurrenceWeekdayRuleEditorComponent, deps: [{ token: RecurrenceService }, { token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
3697
3703
  RecurrenceWeekdayRuleEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: RecurrenceWeekdayRuleEditorComponent, selector: "kendo-recurrence-weekday-rule-editor", viewQueries: [{ propertyName: "weekDayButtons", predicate: Button, descendants: true }], ngImport: i0, template: `
3698
- <div class='k-edit-label'>
3699
- <label (click)="onWeeklyRepeatOnClick()">{{ textFor('weeklyRepeatOn') }}</label>
3700
- </div>
3701
- <div class='k-edit-field'>
3702
- <kendo-buttongroup [selection]="'multiple'">
3703
- <button *ngFor='let day of weekDays' kendoButton
3704
- [style.width.px]="75"
3705
- [toggleable]="true"
3706
- [selected]="isSelected(day)"
3707
- (selectedChange)="onSelectedChange($event, day.value)"
3708
- >{{ capitalize(day.text) }}</button>
3709
- </kendo-buttongroup>
3704
+ <div class='k-form-field'>
3705
+ <label class='k-form-label' (click)="onWeeklyRepeatOnClick()">{{ textFor('weeklyRepeatOn') }}</label>
3706
+
3707
+ <div class='k-form-field-wrap'>
3708
+ <kendo-buttongroup [selection]="'multiple'">
3709
+ <button *ngFor='let day of weekDays' kendoButton
3710
+ [style.width.px]="75"
3711
+ [toggleable]="true"
3712
+ [selected]="isSelected(day)"
3713
+ (selectedChange)="onSelectedChange($event, day.value)"
3714
+ >{{ capitalize(day.text) }}</button>
3715
+ </kendo-buttongroup>
3716
+ </div>
3710
3717
  </div>
3711
- `, isInline: true, components: [{ type: i3.ButtonGroupComponent, selector: "kendo-buttongroup", inputs: ["disabled", "selection", "width", "tabIndex"], outputs: ["navigate"], exportAs: ["kendoButtonGroup"] }], directives: [{ type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.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"] }] });
3718
+ `, isInline: true, components: [{ type: i3.ButtonGroupComponent, selector: "kendo-buttongroup", inputs: ["disabled", "selection", "width", "tabIndex"], outputs: ["navigate"], exportAs: ["kendoButtonGroup"] }], directives: [{ type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.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"] }] });
3712
3719
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: RecurrenceWeekdayRuleEditorComponent, decorators: [{
3713
3720
  type: Component,
3714
3721
  args: [{
3715
3722
  selector: 'kendo-recurrence-weekday-rule-editor',
3716
3723
  template: `
3717
- <div class='k-edit-label'>
3718
- <label (click)="onWeeklyRepeatOnClick()">{{ textFor('weeklyRepeatOn') }}</label>
3719
- </div>
3720
- <div class='k-edit-field'>
3721
- <kendo-buttongroup [selection]="'multiple'">
3722
- <button *ngFor='let day of weekDays' kendoButton
3723
- [style.width.px]="75"
3724
- [toggleable]="true"
3725
- [selected]="isSelected(day)"
3726
- (selectedChange)="onSelectedChange($event, day.value)"
3727
- >{{ capitalize(day.text) }}</button>
3728
- </kendo-buttongroup>
3724
+ <div class='k-form-field'>
3725
+ <label class='k-form-label' (click)="onWeeklyRepeatOnClick()">{{ textFor('weeklyRepeatOn') }}</label>
3726
+
3727
+ <div class='k-form-field-wrap'>
3728
+ <kendo-buttongroup [selection]="'multiple'">
3729
+ <button *ngFor='let day of weekDays' kendoButton
3730
+ [style.width.px]="75"
3731
+ [toggleable]="true"
3732
+ [selected]="isSelected(day)"
3733
+ (selectedChange)="onSelectedChange($event, day.value)"
3734
+ >{{ capitalize(day.text) }}</button>
3735
+ </kendo-buttongroup>
3736
+ </div>
3729
3737
  </div>
3730
3738
  `
3731
3739
  }]
@@ -4021,12 +4029,11 @@ class RecurrenceMonthlyYearlyEditorComponent {
4021
4029
  }
4022
4030
  RecurrenceMonthlyYearlyEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: RecurrenceMonthlyYearlyEditorComponent, deps: [{ token: RecurrenceService }, { token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
4023
4031
  RecurrenceMonthlyYearlyEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: RecurrenceMonthlyYearlyEditorComponent, selector: "kendo-recurrence-monthly-yearly-editor", inputs: { userNumericOptions: "userNumericOptions" }, viewQueries: [{ propertyName: "repeatOnRadioButtons", predicate: RepeatOnRadioButtonDirective, descendants: true }], ngImport: i0, template: `
4024
- <div class='k-edit-label'>
4025
- <label (click)="onRepeatOnLabelClick()">{{ textForRepeatOn() }}</label>
4026
- </div>
4027
- <div class='k-edit-field'>
4028
- <ul class='k-reset' [style.width.px]='650'>
4029
- <li>
4032
+ <div class='k-form-field'>
4033
+ <label class='k-form-label' (click)="onRepeatOnLabelClick()">{{ textForRepeatOn() }}</label>
4034
+
4035
+ <ul class='k-form-field-wrap k-reset' [style.width.px]='650'>
4036
+ <li class='k-radio-item'>
4030
4037
  <input kendoRecurrenceRepeatOnRadioButton='monthday-{{uniqueId}}' />
4031
4038
 
4032
4039
  <label class='k-radio-label' for='k-repeaton-monthday-{{uniqueId}}'>
@@ -4067,7 +4074,7 @@ RecurrenceMonthlyYearlyEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVe
4067
4074
  [style.margin]="'0 .4ex 0 1ex'">
4068
4075
  </kendo-numerictextbox>
4069
4076
  </li>
4070
- <li>
4077
+ <li class='k-radio-item'>
4071
4078
  <input kendoRecurrenceRepeatOnRadioButton='weekday-{{uniqueId}}' />
4072
4079
  <label class='k-radio-label' for='k-repeaton-weekday-{{uniqueId}}'></label>
4073
4080
 
@@ -4119,12 +4126,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
4119
4126
  args: [{
4120
4127
  selector: 'kendo-recurrence-monthly-yearly-editor',
4121
4128
  template: `
4122
- <div class='k-edit-label'>
4123
- <label (click)="onRepeatOnLabelClick()">{{ textForRepeatOn() }}</label>
4124
- </div>
4125
- <div class='k-edit-field'>
4126
- <ul class='k-reset' [style.width.px]='650'>
4127
- <li>
4129
+ <div class='k-form-field'>
4130
+ <label class='k-form-label' (click)="onRepeatOnLabelClick()">{{ textForRepeatOn() }}</label>
4131
+
4132
+ <ul class='k-form-field-wrap k-reset' [style.width.px]='650'>
4133
+ <li class='k-radio-item'>
4128
4134
  <input kendoRecurrenceRepeatOnRadioButton='monthday-{{uniqueId}}' />
4129
4135
 
4130
4136
  <label class='k-radio-label' for='k-repeaton-monthday-{{uniqueId}}'>
@@ -4165,7 +4171,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
4165
4171
  [style.margin]="'0 .4ex 0 1ex'">
4166
4172
  </kendo-numerictextbox>
4167
4173
  </li>
4168
- <li>
4174
+ <li class='k-radio-item'>
4169
4175
  <input kendoRecurrenceRepeatOnRadioButton='weekday-{{uniqueId}}' />
4170
4176
  <label class='k-radio-label' for='k-repeaton-weekday-{{uniqueId}}'></label>
4171
4177
 
@@ -4389,16 +4395,15 @@ class RecurrenceEndRuleEditorComponent {
4389
4395
  }
4390
4396
  RecurrenceEndRuleEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: RecurrenceEndRuleEditorComponent, deps: [{ token: RecurrenceService }, { token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
4391
4397
  RecurrenceEndRuleEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: RecurrenceEndRuleEditorComponent, selector: "kendo-recurrence-end-rule-editor", inputs: { userNumericOptions: "userNumericOptions", userDatePickerOptions: "userDatePickerOptions" }, viewQueries: [{ propertyName: "endRuleRadioButtons", predicate: EndRuleRadioButtonDirective, descendants: true }], ngImport: i0, template: `
4392
- <div class='k-edit-label'>
4393
- <label (click)="onEndLabelClick()">{{ textFor('endLabel') }}</label>
4394
- </div>
4395
- <div class='k-edit-field'>
4396
- <ul class='k-reset'>
4397
- <li>
4398
+ <div class='k-form-field'>
4399
+ <label class='k-form-label' (click)="onEndLabelClick()">{{ textFor('endLabel') }}</label>
4400
+
4401
+ <ul class='k-form-field-wrap k-reset'>
4402
+ <li class='k-radio-item'>
4398
4403
  <input kendoRecurrenceEndRuleRadioButton='k-endrule-never-{{uniqueId}}' />
4399
4404
  <label class='k-radio-label' for='k-endrule-never-{{uniqueId}}'>{{ textFor('endNever') }}</label>
4400
4405
  </li>
4401
- <li>
4406
+ <li class='k-radio-item'>
4402
4407
  <input kendoRecurrenceEndRuleRadioButton='k-endrule-count-{{uniqueId}}' />
4403
4408
  <label class='k-radio-label' for='k-endrule-count-{{uniqueId}}'>{{ textFor('endAfter') }}</label>
4404
4409
 
@@ -4421,7 +4426,7 @@ RecurrenceEndRuleEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion:
4421
4426
  </kendo-numerictextbox>
4422
4427
  <span>{{ textFor('endOccurrence') }}</span>
4423
4428
  </li>
4424
- <li>
4429
+ <li class='k-radio-item'>
4425
4430
  <input kendoRecurrenceEndRuleRadioButton='k-endrule-until-{{uniqueId}}' />
4426
4431
  <label class='k-radio-label' for='k-endrule-until-{{uniqueId}}'>{{ textFor('endOn') }}</label>
4427
4432
 
@@ -4458,16 +4463,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
4458
4463
  args: [{
4459
4464
  selector: 'kendo-recurrence-end-rule-editor',
4460
4465
  template: `
4461
- <div class='k-edit-label'>
4462
- <label (click)="onEndLabelClick()">{{ textFor('endLabel') }}</label>
4463
- </div>
4464
- <div class='k-edit-field'>
4465
- <ul class='k-reset'>
4466
- <li>
4466
+ <div class='k-form-field'>
4467
+ <label class='k-form-label' (click)="onEndLabelClick()">{{ textFor('endLabel') }}</label>
4468
+
4469
+ <ul class='k-form-field-wrap k-reset'>
4470
+ <li class='k-radio-item'>
4467
4471
  <input kendoRecurrenceEndRuleRadioButton='k-endrule-never-{{uniqueId}}' />
4468
4472
  <label class='k-radio-label' for='k-endrule-never-{{uniqueId}}'>{{ textFor('endNever') }}</label>
4469
4473
  </li>
4470
- <li>
4474
+ <li class='k-radio-item'>
4471
4475
  <input kendoRecurrenceEndRuleRadioButton='k-endrule-count-{{uniqueId}}' />
4472
4476
  <label class='k-radio-label' for='k-endrule-count-{{uniqueId}}'>{{ textFor('endAfter') }}</label>
4473
4477
 
@@ -4490,7 +4494,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
4490
4494
  </kendo-numerictextbox>
4491
4495
  <span>{{ textFor('endOccurrence') }}</span>
4492
4496
  </li>
4493
- <li>
4497
+ <li class='k-radio-item'>
4494
4498
  <input kendoRecurrenceEndRuleRadioButton='k-endrule-until-{{uniqueId}}' />
4495
4499
  <label class='k-radio-label' for='k-endrule-until-{{uniqueId}}'>{{ textFor('endOn') }}</label>
4496
4500
 
@@ -4840,26 +4844,24 @@ RecurrenceEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
4840
4844
  <kendo-recurrence-frequency-editor>
4841
4845
  </kendo-recurrence-frequency-editor>
4842
4846
 
4843
- <div class='k-recur-view'>
4844
- <kendo-recurrence-interval-editor
4845
- *ngIf="currentFreq !== 'never'"
4846
- [userNumericOptions]="repeatEveryOptions">
4847
- </kendo-recurrence-interval-editor>
4848
-
4849
- <kendo-recurrence-weekday-rule-editor *ngIf="currentFreq === 'weekly'">
4850
- </kendo-recurrence-weekday-rule-editor>
4851
-
4852
- <kendo-recurrence-monthly-yearly-editor
4853
- *ngIf="currentFreq === 'monthly' || currentFreq === 'yearly'"
4854
- [userNumericOptions]="repeatOnOptions">
4855
- </kendo-recurrence-monthly-yearly-editor>
4856
-
4857
- <kendo-recurrence-end-rule-editor
4858
- *ngIf="currentFreq !== 'never'"
4859
- [userNumericOptions]="endAfterOptions"
4860
- [userDatePickerOptions]="endOnOptions">
4861
- </kendo-recurrence-end-rule-editor>
4862
- </div>
4847
+ <kendo-recurrence-interval-editor
4848
+ *ngIf="currentFreq !== 'never'"
4849
+ [userNumericOptions]="repeatEveryOptions">
4850
+ </kendo-recurrence-interval-editor>
4851
+
4852
+ <kendo-recurrence-weekday-rule-editor *ngIf="currentFreq === 'weekly'">
4853
+ </kendo-recurrence-weekday-rule-editor>
4854
+
4855
+ <kendo-recurrence-monthly-yearly-editor
4856
+ *ngIf="currentFreq === 'monthly' || currentFreq === 'yearly'"
4857
+ [userNumericOptions]="repeatOnOptions">
4858
+ </kendo-recurrence-monthly-yearly-editor>
4859
+
4860
+ <kendo-recurrence-end-rule-editor
4861
+ *ngIf="currentFreq !== 'never'"
4862
+ [userNumericOptions]="endAfterOptions"
4863
+ [userDatePickerOptions]="endOnOptions">
4864
+ </kendo-recurrence-end-rule-editor>
4863
4865
  `, isInline: true, components: [{ type: RecurrenceFrequencyEditorComponent, selector: "kendo-recurrence-frequency-editor" }, { type: RecurrenceIntervalEditorComponent, selector: "kendo-recurrence-interval-editor", inputs: ["userNumericOptions"] }, { type: RecurrenceWeekdayRuleEditorComponent, selector: "kendo-recurrence-weekday-rule-editor" }, { type: RecurrenceMonthlyYearlyEditorComponent, selector: "kendo-recurrence-monthly-yearly-editor", inputs: ["userNumericOptions"] }, { type: RecurrenceEndRuleEditorComponent, selector: "kendo-recurrence-end-rule-editor", inputs: ["userNumericOptions", "userDatePickerOptions"] }], directives: [{ type: RecurrenceEditorLocalizedMessagesDirective, selector: "[kendoRecurrenceEditorLocalizedMessages]" }, { type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
4864
4866
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: RecurrenceEditorComponent, decorators: [{
4865
4867
  type: Component,
@@ -4982,26 +4984,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
4982
4984
  <kendo-recurrence-frequency-editor>
4983
4985
  </kendo-recurrence-frequency-editor>
4984
4986
 
4985
- <div class='k-recur-view'>
4986
- <kendo-recurrence-interval-editor
4987
- *ngIf="currentFreq !== 'never'"
4988
- [userNumericOptions]="repeatEveryOptions">
4989
- </kendo-recurrence-interval-editor>
4990
-
4991
- <kendo-recurrence-weekday-rule-editor *ngIf="currentFreq === 'weekly'">
4992
- </kendo-recurrence-weekday-rule-editor>
4993
-
4994
- <kendo-recurrence-monthly-yearly-editor
4995
- *ngIf="currentFreq === 'monthly' || currentFreq === 'yearly'"
4996
- [userNumericOptions]="repeatOnOptions">
4997
- </kendo-recurrence-monthly-yearly-editor>
4998
-
4999
- <kendo-recurrence-end-rule-editor
5000
- *ngIf="currentFreq !== 'never'"
5001
- [userNumericOptions]="endAfterOptions"
5002
- [userDatePickerOptions]="endOnOptions">
5003
- </kendo-recurrence-end-rule-editor>
5004
- </div>
4987
+ <kendo-recurrence-interval-editor
4988
+ *ngIf="currentFreq !== 'never'"
4989
+ [userNumericOptions]="repeatEveryOptions">
4990
+ </kendo-recurrence-interval-editor>
4991
+
4992
+ <kendo-recurrence-weekday-rule-editor *ngIf="currentFreq === 'weekly'">
4993
+ </kendo-recurrence-weekday-rule-editor>
4994
+
4995
+ <kendo-recurrence-monthly-yearly-editor
4996
+ *ngIf="currentFreq === 'monthly' || currentFreq === 'yearly'"
4997
+ [userNumericOptions]="repeatOnOptions">
4998
+ </kendo-recurrence-monthly-yearly-editor>
4999
+
5000
+ <kendo-recurrence-end-rule-editor
5001
+ *ngIf="currentFreq !== 'never'"
5002
+ [userNumericOptions]="endAfterOptions"
5003
+ [userDatePickerOptions]="endOnOptions">
5004
+ </kendo-recurrence-end-rule-editor>
5005
5005
  `
5006
5006
  }]
5007
5007
  }], ctorParameters: function () { return [{ type: RecurrenceService }, { type: i1$4.IntlService }]; }, propDecorators: { cssClass: [{
@@ -5059,7 +5059,7 @@ class EditDialogComponent {
5059
5059
  if (this.editTemplate) {
5060
5060
  return this.editTemplate.autoFocusedElement;
5061
5061
  }
5062
- return '.k-edit-field input';
5062
+ return '.k-form-field-wrap input';
5063
5063
  }
5064
5064
  get isEditingSeries() {
5065
5065
  return this.editMode === 2 /* Series */ && Boolean(this.formGroup.get(this.fields.recurrenceRule));
@@ -5228,113 +5228,120 @@ class EditDialogComponent {
5228
5228
  }
5229
5229
  EditDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: EditDialogComponent, deps: [{ token: i0.NgZone }, { token: EditService }, { token: i1$1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: FocusService }], target: i0.ɵɵFactoryTarget.Component });
5230
5230
  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: `
5231
- <kendo-dialog (close)='onClose()' [minWidth]='700' *ngIf='isActive' title='{{ textFor("editorTitle") }}' class='k-scheduler-edit-dialog' [autoFocusedElement]="autoFocusedElement">
5231
+ <kendo-dialog (close)='onClose()' [minWidth]='750' *ngIf='isActive' title='{{ textFor("editorTitle") }}' class='k-scheduler-edit-dialog' [autoFocusedElement]="autoFocusedElement">
5232
5232
  <ng-container *ngIf='!editTemplate'>
5233
- <div class='k-scheduler-edit-form'>
5234
- <div class='k-edit-form-container'>
5235
- <form novalidate [formGroup]='formGroup'>
5236
- <div class='k-edit-label'>
5237
- <label for='k-event-title'>{{ textFor('editorEventTitle') }}</label>
5238
- </div>
5239
- <div class='k-edit-field'>
5233
+ <div class='k-form k-form-horizontal'>
5234
+ <form novalidate [formGroup]='formGroup'>
5235
+ <!-- Title -->
5236
+ <div class='k-form-field'>
5237
+ <label for='k-event-title' class='k-form-label'>{{ textFor('editorEventTitle') }}</label>
5238
+ <div class='k-form-field-wrap'>
5240
5239
  <input #title id='k-event-title' kendoTextBox placeholder='Title' [formControl]='getControl(fields.title)' />
5241
5240
  </div>
5241
+ </div>
5242
5242
 
5243
- <div class='k-edit-label'>
5244
- <label (click)="startDateTimePicker.focus()">{{ textFor('editorEventStart') }}</label>
5245
- </div>
5246
- <div class='k-edit-field'>
5243
+ <!-- Start -->
5244
+ <div class='k-form-field'>
5245
+ <label class='k-form-label' (click)="startDateTimePicker.focus()">{{ textFor('editorEventStart') }}</label>
5246
+ <div class='k-form-field-wrap'>
5247
5247
  <kendo-scheduler-datetime-picker #startDateTimePicker [formControl]='getControl(fields.start)'
5248
5248
  [isAllDay]='getFormValue(fields.isAllDay)?.value'>
5249
5249
  </kendo-scheduler-datetime-picker>
5250
5250
  </div>
5251
+ </div>
5251
5252
 
5252
- <ng-container *ngIf="isStartTimeZoneVisible">
5253
- <div class='k-edit-label'>
5254
- <label (click)="startTzPicker.focus()">{{ textFor('editorEventStartTimeZone') }}</label>
5255
- </div>
5253
+ <div class='k-form-field' *ngIf="hasStartTimeZone">
5254
+ <label class='k-form-label' for='k-set-timezone'>{{ textFor('editorEventTimeZone') }}</label>
5255
+ <div class='k-form-field-wrap'>
5256
+ <input type='checkbox' id='k-set-timezone' kendoCheckBox formControlName='startTimezoneCheckbox' />
5257
+ </div>
5258
+ </div>
5256
5259
 
5257
- <div class='k-edit-field'>
5258
- <kendo-timezone-editor #startTzPicker [formControl]='getControl(fields.startTimezone)'></kendo-timezone-editor>
5259
- </div>
5260
- </ng-container>
5260
+ <ng-container *ngIf="isStartTimeZoneVisible">
5261
+ <div class='k-form-field'>
5262
+ <label class='k-form-label' (click)="startTzPicker.focus()">{{ textFor('editorEventStartTimeZone') }}</label>
5261
5263
 
5262
- <div class='k-edit-label'>
5263
- <label (click)="endDateTimePicker.focus()">{{ textFor('editorEventEnd') }}</label>
5264
+ <div class='k-form-field-wrap'>
5265
+ <kendo-timezone-editor [width]="undefined" #startTzPicker [formControl]='getControl(fields.startTimezone)'></kendo-timezone-editor>
5266
+ </div>
5264
5267
  </div>
5265
- <div class='k-edit-field'>
5268
+ </ng-container>
5269
+
5270
+ <!-- End -->
5271
+ <div class='k-form-field'>
5272
+ <label class='k-form-label' (click)="endDateTimePicker.focus()">{{ textFor('editorEventEnd') }}</label>
5273
+ <div class='k-form-field-wrap'>
5266
5274
  <kendo-scheduler-datetime-picker #endDateTimePicker [formControl]='getControl(fields.end)'
5267
5275
  [isAllDay]='getFormValue(fields.isAllDay)?.value'>
5268
5276
  </kendo-scheduler-datetime-picker>
5269
5277
  </div>
5278
+ </div>
5270
5279
 
5271
- <ng-container *ngIf="isEndTimeZoneVisible">
5272
- <div class='k-edit-label'>
5273
- <label (click)="endTzPicker.focus()">{{ textFor('editorEventEndTimeZone') }}</label>
5274
- </div>
5280
+ <div class='k-form-field' *ngIf="isStartTimeZoneVisible && hasEndTimeZone">
5281
+ <label class='k-form-label' for='k-use-separate'>{{ textFor('editorEventSeparateTimeZones') }}</label>
5282
+ <div class='k-form-field-wrap'>
5283
+ <input type='checkbox' id='k-use-separate' kendoCheckBox formControlName='endTimezoneCheckbox' />
5284
+ </div>
5285
+ </div>
5275
5286
 
5276
- <div class='k-edit-field'>
5277
- <kendo-timezone-editor #endTzPicker [formControl]='getControl(fields.endTimezone)'></kendo-timezone-editor>
5278
- </div>
5279
- </ng-container>
5287
+ <ng-container *ngIf="isEndTimeZoneVisible">
5288
+ <div class='k-form-field'>
5289
+ <label class='k-form-label' (click)="endTzPicker.focus()">{{ textFor('editorEventEndTimeZone') }}</label>
5280
5290
 
5281
- <div class='k-edit-field' *ngIf="hasAllDay">
5282
- <input type='checkbox' id='k-is-allday-chkbox' kendoCheckBox [formControl]='getControl(fields.isAllDay)' />
5283
- <label class='k-checkbox-label' for='k-is-allday-chkbox'>{{ textFor('editorEventAllDay') }}</label>
5291
+ <div class='k-form-field-wrap'>
5292
+ <kendo-timezone-editor [width]="undefined" #endTzPicker [formControl]='getControl(fields.endTimezone)'></kendo-timezone-editor>
5293
+ </div>
5284
5294
  </div>
5295
+ </ng-container>
5285
5296
 
5286
- <div class='k-edit-field' *ngIf="hasStartTimeZone">
5287
- <input type='checkbox' id='k-set-timezone' kendoCheckBox
5288
- formControlName='startTimezoneCheckbox' />
5289
- <label class='k-checkbox-label' for='k-set-timezone'>{{ textFor('editorEventTimeZone') }}</label>
5297
+ <!-- All day -->
5298
+ <div class='k-form-field'>
5299
+ <label class='k-form-label' for='k-is-allday-chkbox'>{{ textFor('editorEventAllDay') }}</label>
5290
5300
 
5291
- <ng-container *ngIf="isStartTimeZoneVisible && hasEndTimeZone">
5292
- <input type='checkbox' id='k-use-separate' kendoCheckBox formControlName='endTimezoneCheckbox' />
5293
- <label class='k-checkbox-label' for='k-use-separate'>{{ textFor('editorEventSeparateTimeZones') }}</label>
5294
- </ng-container>
5301
+ <div class='k-form-field-wrap' *ngIf="hasAllDay">
5302
+ <input type='checkbox' id='k-is-allday-chkbox' kendoCheckBox [formControl]='getControl(fields.isAllDay)' />
5295
5303
  </div>
5304
+ </div>
5296
5305
 
5297
- <ng-container *ngIf="isEditingSeries">
5298
- <kendo-recurrence-editor
5299
- [formControl]='getControl(fields.recurrenceRule)'
5300
- [start]='recurrenceStart'
5301
- [timezone]='eventTimezone'
5302
- [weekStart]='weekStart'
5303
- ></kendo-recurrence-editor>
5304
- </ng-container>
5306
+ <!-- Series -->
5307
+ <kendo-recurrence-editor
5308
+ *ngIf="isEditingSeries"
5309
+ [formControl]='getControl(fields.recurrenceRule)'
5310
+ [start]='recurrenceStart'
5311
+ [timezone]='eventTimezone'
5312
+ [weekStart]='weekStart'
5313
+ ></kendo-recurrence-editor>
5314
+
5315
+ <!-- Description -->
5316
+ <div class='k-form-field' *ngIf='getFormValue(fields.description)'>
5317
+ <label class='k-form-label' for='k-event-description'>{{ textFor('editorEventDescription') }}</label>
5318
+
5319
+ <div class='k-form-field-wrap'>
5320
+ <textarea id='k-event-description' kendoTextArea [formControl]='getControl(fields.description)'></textarea>
5321
+ </div>
5322
+ </div>
5305
5323
 
5306
- <ng-container *ngIf='getFormValue(fields.description)'>
5307
- <div class='k-edit-label'>
5308
- <label for='k-event-description'>{{ textFor('editorEventDescription') }}</label>
5309
- </div>
5310
- <div class='k-edit-field'>
5311
- <textarea id='k-event-description' kendoTextArea [formControl]='getControl(fields.description)'></textarea>
5324
+ <!-- Resources -->
5325
+ <ng-container *ngFor='let resource of resources'>
5326
+ <div class='k-form-field' *ngIf='getFormValue(resource.field)'>
5327
+ <label class='k-form-label' (click)="onResourceClick(resource)">
5328
+ {{ resource.name ? resource.name : resource.field }}
5329
+ </label>
5330
+ <div class='k-form-field-wrap'>
5331
+ <kendo-multiple-resource-editor
5332
+ *ngIf='resource.multiple'
5333
+ [formControl]='getControl(resource.field)'
5334
+ [resource]='resource'>
5335
+ </kendo-multiple-resource-editor>
5336
+ <kendo-single-resource-editor
5337
+ *ngIf='!resource.multiple'
5338
+ [formControl]='getControl(resource.field)'
5339
+ [resource]='resource'>
5340
+ </kendo-single-resource-editor>
5312
5341
  </div>
5313
- </ng-container>
5314
-
5315
- <ng-container *ngFor='let resource of resources'>
5316
- <ng-container *ngIf='getFormValue(resource.field)'>
5317
- <div class='k-edit-label'>
5318
- <label (click)="onResourceClick(resource)">
5319
- {{ resource.name ? resource.name : resource.field }}
5320
- </label>
5321
- </div>
5322
- <div class='k-edit-field'>
5323
- <kendo-multiple-resource-editor
5324
- *ngIf='resource.multiple'
5325
- [formControl]='getControl(resource.field)'
5326
- [resource]='resource'>
5327
- </kendo-multiple-resource-editor>
5328
- <kendo-single-resource-editor
5329
- *ngIf='!resource.multiple'
5330
- [formControl]='getControl(resource.field)'
5331
- [resource]='resource'>
5332
- </kendo-single-resource-editor>
5333
- </div>
5334
- </ng-container>
5335
- </ng-container>
5336
- </form>
5337
- </div>
5342
+ </div>
5343
+ </ng-container>
5344
+ </form>
5338
5345
  </div>
5339
5346
  </ng-container>
5340
5347
 
@@ -5357,119 +5364,126 @@ EditDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
5357
5364
  <button kendoButton themeColor="primary" (click)="onSave($event)" [disabled]="!formGroup.valid">{{ textFor('save') }}</button>
5358
5365
  </kendo-dialog-actions>
5359
5366
  </kendo-dialog>
5360
- `, isInline: true, components: [{ type: i1.DialogComponent, selector: "kendo-dialog", inputs: ["actions", "actionsLayout", "autoFocusedElement", "title", "width", "minWidth", "maxWidth", "height", "minHeight", "maxHeight"], outputs: ["action", "close"], exportAs: ["kendoDialog"] }, { type: SchedulerDateTimePickerComponent, selector: "kendo-scheduler-datetime-picker", inputs: ["isAllDay"], outputs: ["valueChange"] }, { type: TimeZoneEditorComponent, selector: "kendo-timezone-editor", inputs: ["width"], outputs: ["valueChange"] }, { type: RecurrenceEditorComponent, selector: "kendo-recurrence-editor", inputs: ["start", "timezone", "weekStart", "repeatEveryOptions", "endAfterOptions", "repeatOnOptions", "endOnOptions"], outputs: ["valueChange"], exportAs: ["kendoRecurrenceEditor"] }, { type: MultipleResourceEditorComponent, selector: "kendo-multiple-resource-editor" }, { type: SingleResourceEditorComponent, selector: "kendo-single-resource-editor" }, { type: i1.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: i3.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"] }] });
5367
+ `, isInline: true, components: [{ type: i1.DialogComponent, selector: "kendo-dialog", inputs: ["actions", "actionsLayout", "autoFocusedElement", "title", "width", "minWidth", "maxWidth", "height", "minHeight", "maxHeight"], outputs: ["action", "close"], exportAs: ["kendoDialog"] }, { type: SchedulerDateTimePickerComponent, selector: "kendo-scheduler-datetime-picker", inputs: ["isAllDay"], outputs: ["valueChange"] }, { type: TimeZoneEditorComponent, selector: "kendo-timezone-editor", inputs: ["width"], outputs: ["valueChange"] }, { type: RecurrenceEditorComponent, selector: "kendo-recurrence-editor", inputs: ["start", "timezone", "weekStart", "repeatEveryOptions", "endAfterOptions", "repeatOnOptions", "endOnOptions"], outputs: ["valueChange"], exportAs: ["kendoRecurrenceEditor"] }, { type: MultipleResourceEditorComponent, selector: "kendo-multiple-resource-editor" }, { type: SingleResourceEditorComponent, selector: "kendo-single-resource-editor" }, { type: i1.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: i3.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"] }] });
5361
5368
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: EditDialogComponent, decorators: [{
5362
5369
  type: Component,
5363
5370
  args: [{
5364
5371
  selector: 'kendo-scheduler-edit-dialog',
5365
5372
  template: `
5366
- <kendo-dialog (close)='onClose()' [minWidth]='700' *ngIf='isActive' title='{{ textFor("editorTitle") }}' class='k-scheduler-edit-dialog' [autoFocusedElement]="autoFocusedElement">
5373
+ <kendo-dialog (close)='onClose()' [minWidth]='750' *ngIf='isActive' title='{{ textFor("editorTitle") }}' class='k-scheduler-edit-dialog' [autoFocusedElement]="autoFocusedElement">
5367
5374
  <ng-container *ngIf='!editTemplate'>
5368
- <div class='k-scheduler-edit-form'>
5369
- <div class='k-edit-form-container'>
5370
- <form novalidate [formGroup]='formGroup'>
5371
- <div class='k-edit-label'>
5372
- <label for='k-event-title'>{{ textFor('editorEventTitle') }}</label>
5373
- </div>
5374
- <div class='k-edit-field'>
5375
+ <div class='k-form k-form-horizontal'>
5376
+ <form novalidate [formGroup]='formGroup'>
5377
+ <!-- Title -->
5378
+ <div class='k-form-field'>
5379
+ <label for='k-event-title' class='k-form-label'>{{ textFor('editorEventTitle') }}</label>
5380
+ <div class='k-form-field-wrap'>
5375
5381
  <input #title id='k-event-title' kendoTextBox placeholder='Title' [formControl]='getControl(fields.title)' />
5376
5382
  </div>
5383
+ </div>
5377
5384
 
5378
- <div class='k-edit-label'>
5379
- <label (click)="startDateTimePicker.focus()">{{ textFor('editorEventStart') }}</label>
5380
- </div>
5381
- <div class='k-edit-field'>
5385
+ <!-- Start -->
5386
+ <div class='k-form-field'>
5387
+ <label class='k-form-label' (click)="startDateTimePicker.focus()">{{ textFor('editorEventStart') }}</label>
5388
+ <div class='k-form-field-wrap'>
5382
5389
  <kendo-scheduler-datetime-picker #startDateTimePicker [formControl]='getControl(fields.start)'
5383
5390
  [isAllDay]='getFormValue(fields.isAllDay)?.value'>
5384
5391
  </kendo-scheduler-datetime-picker>
5385
5392
  </div>
5393
+ </div>
5386
5394
 
5387
- <ng-container *ngIf="isStartTimeZoneVisible">
5388
- <div class='k-edit-label'>
5389
- <label (click)="startTzPicker.focus()">{{ textFor('editorEventStartTimeZone') }}</label>
5390
- </div>
5395
+ <div class='k-form-field' *ngIf="hasStartTimeZone">
5396
+ <label class='k-form-label' for='k-set-timezone'>{{ textFor('editorEventTimeZone') }}</label>
5397
+ <div class='k-form-field-wrap'>
5398
+ <input type='checkbox' id='k-set-timezone' kendoCheckBox formControlName='startTimezoneCheckbox' />
5399
+ </div>
5400
+ </div>
5391
5401
 
5392
- <div class='k-edit-field'>
5393
- <kendo-timezone-editor #startTzPicker [formControl]='getControl(fields.startTimezone)'></kendo-timezone-editor>
5394
- </div>
5395
- </ng-container>
5402
+ <ng-container *ngIf="isStartTimeZoneVisible">
5403
+ <div class='k-form-field'>
5404
+ <label class='k-form-label' (click)="startTzPicker.focus()">{{ textFor('editorEventStartTimeZone') }}</label>
5396
5405
 
5397
- <div class='k-edit-label'>
5398
- <label (click)="endDateTimePicker.focus()">{{ textFor('editorEventEnd') }}</label>
5406
+ <div class='k-form-field-wrap'>
5407
+ <kendo-timezone-editor [width]="undefined" #startTzPicker [formControl]='getControl(fields.startTimezone)'></kendo-timezone-editor>
5408
+ </div>
5399
5409
  </div>
5400
- <div class='k-edit-field'>
5410
+ </ng-container>
5411
+
5412
+ <!-- End -->
5413
+ <div class='k-form-field'>
5414
+ <label class='k-form-label' (click)="endDateTimePicker.focus()">{{ textFor('editorEventEnd') }}</label>
5415
+ <div class='k-form-field-wrap'>
5401
5416
  <kendo-scheduler-datetime-picker #endDateTimePicker [formControl]='getControl(fields.end)'
5402
5417
  [isAllDay]='getFormValue(fields.isAllDay)?.value'>
5403
5418
  </kendo-scheduler-datetime-picker>
5404
5419
  </div>
5420
+ </div>
5405
5421
 
5406
- <ng-container *ngIf="isEndTimeZoneVisible">
5407
- <div class='k-edit-label'>
5408
- <label (click)="endTzPicker.focus()">{{ textFor('editorEventEndTimeZone') }}</label>
5409
- </div>
5422
+ <div class='k-form-field' *ngIf="isStartTimeZoneVisible && hasEndTimeZone">
5423
+ <label class='k-form-label' for='k-use-separate'>{{ textFor('editorEventSeparateTimeZones') }}</label>
5424
+ <div class='k-form-field-wrap'>
5425
+ <input type='checkbox' id='k-use-separate' kendoCheckBox formControlName='endTimezoneCheckbox' />
5426
+ </div>
5427
+ </div>
5410
5428
 
5411
- <div class='k-edit-field'>
5412
- <kendo-timezone-editor #endTzPicker [formControl]='getControl(fields.endTimezone)'></kendo-timezone-editor>
5413
- </div>
5414
- </ng-container>
5429
+ <ng-container *ngIf="isEndTimeZoneVisible">
5430
+ <div class='k-form-field'>
5431
+ <label class='k-form-label' (click)="endTzPicker.focus()">{{ textFor('editorEventEndTimeZone') }}</label>
5415
5432
 
5416
- <div class='k-edit-field' *ngIf="hasAllDay">
5417
- <input type='checkbox' id='k-is-allday-chkbox' kendoCheckBox [formControl]='getControl(fields.isAllDay)' />
5418
- <label class='k-checkbox-label' for='k-is-allday-chkbox'>{{ textFor('editorEventAllDay') }}</label>
5433
+ <div class='k-form-field-wrap'>
5434
+ <kendo-timezone-editor [width]="undefined" #endTzPicker [formControl]='getControl(fields.endTimezone)'></kendo-timezone-editor>
5435
+ </div>
5419
5436
  </div>
5437
+ </ng-container>
5420
5438
 
5421
- <div class='k-edit-field' *ngIf="hasStartTimeZone">
5422
- <input type='checkbox' id='k-set-timezone' kendoCheckBox
5423
- formControlName='startTimezoneCheckbox' />
5424
- <label class='k-checkbox-label' for='k-set-timezone'>{{ textFor('editorEventTimeZone') }}</label>
5439
+ <!-- All day -->
5440
+ <div class='k-form-field'>
5441
+ <label class='k-form-label' for='k-is-allday-chkbox'>{{ textFor('editorEventAllDay') }}</label>
5425
5442
 
5426
- <ng-container *ngIf="isStartTimeZoneVisible && hasEndTimeZone">
5427
- <input type='checkbox' id='k-use-separate' kendoCheckBox formControlName='endTimezoneCheckbox' />
5428
- <label class='k-checkbox-label' for='k-use-separate'>{{ textFor('editorEventSeparateTimeZones') }}</label>
5429
- </ng-container>
5443
+ <div class='k-form-field-wrap' *ngIf="hasAllDay">
5444
+ <input type='checkbox' id='k-is-allday-chkbox' kendoCheckBox [formControl]='getControl(fields.isAllDay)' />
5430
5445
  </div>
5446
+ </div>
5431
5447
 
5432
- <ng-container *ngIf="isEditingSeries">
5433
- <kendo-recurrence-editor
5434
- [formControl]='getControl(fields.recurrenceRule)'
5435
- [start]='recurrenceStart'
5436
- [timezone]='eventTimezone'
5437
- [weekStart]='weekStart'
5438
- ></kendo-recurrence-editor>
5439
- </ng-container>
5448
+ <!-- Series -->
5449
+ <kendo-recurrence-editor
5450
+ *ngIf="isEditingSeries"
5451
+ [formControl]='getControl(fields.recurrenceRule)'
5452
+ [start]='recurrenceStart'
5453
+ [timezone]='eventTimezone'
5454
+ [weekStart]='weekStart'
5455
+ ></kendo-recurrence-editor>
5456
+
5457
+ <!-- Description -->
5458
+ <div class='k-form-field' *ngIf='getFormValue(fields.description)'>
5459
+ <label class='k-form-label' for='k-event-description'>{{ textFor('editorEventDescription') }}</label>
5460
+
5461
+ <div class='k-form-field-wrap'>
5462
+ <textarea id='k-event-description' kendoTextArea [formControl]='getControl(fields.description)'></textarea>
5463
+ </div>
5464
+ </div>
5440
5465
 
5441
- <ng-container *ngIf='getFormValue(fields.description)'>
5442
- <div class='k-edit-label'>
5443
- <label for='k-event-description'>{{ textFor('editorEventDescription') }}</label>
5466
+ <!-- Resources -->
5467
+ <ng-container *ngFor='let resource of resources'>
5468
+ <div class='k-form-field' *ngIf='getFormValue(resource.field)'>
5469
+ <label class='k-form-label' (click)="onResourceClick(resource)">
5470
+ {{ resource.name ? resource.name : resource.field }}
5471
+ </label>
5472
+ <div class='k-form-field-wrap'>
5473
+ <kendo-multiple-resource-editor
5474
+ *ngIf='resource.multiple'
5475
+ [formControl]='getControl(resource.field)'
5476
+ [resource]='resource'>
5477
+ </kendo-multiple-resource-editor>
5478
+ <kendo-single-resource-editor
5479
+ *ngIf='!resource.multiple'
5480
+ [formControl]='getControl(resource.field)'
5481
+ [resource]='resource'>
5482
+ </kendo-single-resource-editor>
5444
5483
  </div>
5445
- <div class='k-edit-field'>
5446
- <textarea id='k-event-description' kendoTextArea [formControl]='getControl(fields.description)'></textarea>
5447
- </div>
5448
- </ng-container>
5449
-
5450
- <ng-container *ngFor='let resource of resources'>
5451
- <ng-container *ngIf='getFormValue(resource.field)'>
5452
- <div class='k-edit-label'>
5453
- <label (click)="onResourceClick(resource)">
5454
- {{ resource.name ? resource.name : resource.field }}
5455
- </label>
5456
- </div>
5457
- <div class='k-edit-field'>
5458
- <kendo-multiple-resource-editor
5459
- *ngIf='resource.multiple'
5460
- [formControl]='getControl(resource.field)'
5461
- [resource]='resource'>
5462
- </kendo-multiple-resource-editor>
5463
- <kendo-single-resource-editor
5464
- *ngIf='!resource.multiple'
5465
- [formControl]='getControl(resource.field)'
5466
- [resource]='resource'>
5467
- </kendo-single-resource-editor>
5468
- </div>
5469
- </ng-container>
5470
- </ng-container>
5471
- </form>
5472
- </div>
5484
+ </div>
5485
+ </ng-container>
5486
+ </form>
5473
5487
  </div>
5474
5488
  </ng-container>
5475
5489
 
@@ -5803,6 +5817,10 @@ class SchedulerComponent {
5803
5817
  * Specifies the Scheduler current time marker settings.
5804
5818
  */
5805
5819
  this.currentTimeMarker = true;
5820
+ /**
5821
+ * Specifies the settings for the ongoing events highlight of the Scheduler.
5822
+ */
5823
+ this.highlightOngoingEvents = true;
5806
5824
  /**
5807
5825
  * A callback that executes for each slot of the Scheduler view.
5808
5826
  * If it returns `true`, the `k-state-selected` CSS class will be added to the cell, making it visibly selected.
@@ -6374,6 +6392,7 @@ class SchedulerComponent {
6374
6392
  selectable: this.selectable,
6375
6393
  timezone: this.timezone,
6376
6394
  currentTimeMarker: this.currentTimeMarker,
6395
+ highlightOngoingEvents: this.highlightOngoingEvents,
6377
6396
  slotClass: this.slotClass,
6378
6397
  slotFill: this.slotFill,
6379
6398
  columnWidth: this.columnWidth,
@@ -6505,7 +6524,7 @@ class SchedulerComponent {
6505
6524
  }
6506
6525
  }
6507
6526
  SchedulerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SchedulerComponent, deps: [{ token: i0.ElementRef }, { token: ViewContextService }, { token: ViewStateService }, { token: EditService }, { token: DialogsService }, { token: i1$4.IntlService }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: PDFService }, { token: i1$1.LocalizationService }, { token: DomEventsService }, { token: i0.Renderer2 }, { token: FocusService }], target: i0.ɵɵFactoryTarget.Component });
6508
- SchedulerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SchedulerComponent, selector: "kendo-scheduler", inputs: { selectedViewIndex: "selectedViewIndex", editable: "editable", selectable: "selectable", min: "min", max: "max", eventHeight: "eventHeight", columnWidth: "columnWidth", showWorkHours: "showWorkHours", startTime: "startTime", endTime: "endTime", workDayStart: "workDayStart", workDayEnd: "workDayEnd", workWeekStart: "workWeekStart", workWeekEnd: "workWeekEnd", weekStart: "weekStart", slotDuration: "slotDuration", slotDivisions: "slotDivisions", slotFill: "slotFill", scrollTime: "scrollTime", group: "group", resources: "resources", loading: "loading", timezone: "timezone", events: "events", selectedDate: "selectedDate", modelFields: "modelFields", currentTimeMarker: "currentTimeMarker", slotClass: "slotClass", eventClass: "eventClass", eventStyles: "eventStyles", isSlotSelected: "isSlotSelected" }, outputs: { selectedViewIndexChange: "selectedViewIndexChange", navigate: "navigate", dateChange: "dateChange", slotClick: "slotClick", slotDblClick: "slotDblClick", create: "create", eventClick: "eventClick", eventDblClick: "eventDblClick", eventKeydown: "eventKeydown", cancel: "cancel", save: "save", remove: "remove", resizeStart: "resizeStart", resize: "resize", resizeEnd: "resizeEnd", dragStart: "dragStart", drag: "drag", dragEnd: "dragEnd", slotDragStart: "slotDragStart", slotDrag: "slotDrag", slotDragEnd: "slotDragEnd", pdfExport: "pdfExport" }, host: { properties: { "class.k-widget": "this.hostClasses", "class.k-scheduler": "this.hostClasses", "class.k-floatwrap": "this.hostClasses", "class.k-rtl": "this.rtl", "attr.dir": "this.dir" } }, providers: [
6527
+ SchedulerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SchedulerComponent, selector: "kendo-scheduler", inputs: { selectedViewIndex: "selectedViewIndex", editable: "editable", selectable: "selectable", min: "min", max: "max", eventHeight: "eventHeight", columnWidth: "columnWidth", showWorkHours: "showWorkHours", startTime: "startTime", endTime: "endTime", workDayStart: "workDayStart", workDayEnd: "workDayEnd", workWeekStart: "workWeekStart", workWeekEnd: "workWeekEnd", weekStart: "weekStart", slotDuration: "slotDuration", slotDivisions: "slotDivisions", slotFill: "slotFill", scrollTime: "scrollTime", group: "group", resources: "resources", loading: "loading", timezone: "timezone", events: "events", selectedDate: "selectedDate", modelFields: "modelFields", currentTimeMarker: "currentTimeMarker", highlightOngoingEvents: "highlightOngoingEvents", slotClass: "slotClass", eventClass: "eventClass", eventStyles: "eventStyles", isSlotSelected: "isSlotSelected" }, outputs: { selectedViewIndexChange: "selectedViewIndexChange", navigate: "navigate", dateChange: "dateChange", slotClick: "slotClick", slotDblClick: "slotDblClick", create: "create", eventClick: "eventClick", eventDblClick: "eventDblClick", eventKeydown: "eventKeydown", cancel: "cancel", save: "save", remove: "remove", resizeStart: "resizeStart", resize: "resize", resizeEnd: "resizeEnd", dragStart: "dragStart", drag: "drag", dragEnd: "dragEnd", slotDragStart: "slotDragStart", slotDrag: "slotDrag", slotDragEnd: "slotDragEnd", pdfExport: "pdfExport" }, host: { properties: { "class.k-widget": "this.hostClasses", "class.k-scheduler": "this.hostClasses", "class.k-floatwrap": "this.hostClasses", "class.k-rtl": "this.rtl", "attr.dir": "this.dir" } }, providers: [
6509
6528
  EditService,
6510
6529
  DialogsService,
6511
6530
  DomEventsService,
@@ -7146,6 +7165,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
7146
7165
  type: Input
7147
7166
  }], currentTimeMarker: [{
7148
7167
  type: Input
7168
+ }], highlightOngoingEvents: [{
7169
+ type: Input
7149
7170
  }], slotClass: [{
7150
7171
  type: Input
7151
7172
  }], eventClass: [{
@@ -7506,6 +7527,12 @@ class ConfigurationViewBase extends SchedulerView {
7506
7527
  get viewEventStyles() {
7507
7528
  return isPresent(this.eventStyles) ? this.eventStyles : this.schedulerOptions.eventStyles;
7508
7529
  }
7530
+ /**
7531
+ * @hidden
7532
+ */
7533
+ get viewHighlightOngoingEvents() {
7534
+ return isPresent(this.highlightOngoingEvents) ? this.highlightOngoingEvents : this.schedulerOptions.highlightOngoingEvents;
7535
+ }
7509
7536
  /**
7510
7537
  * @hidden
7511
7538
  */
@@ -7523,7 +7550,7 @@ class ConfigurationViewBase extends SchedulerView {
7523
7550
  }
7524
7551
  }
7525
7552
  ConfigurationViewBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ConfigurationViewBase, deps: [{ token: i1$1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: ViewContextService }, { token: ViewStateService }], target: i0.ɵɵFactoryTarget.Directive });
7526
- ConfigurationViewBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: ConfigurationViewBase, inputs: { slotClass: "slotClass", eventClass: "eventClass", eventStyles: "eventStyles" }, queries: [{ propertyName: "eventTemplate", first: true, predicate: EventTemplateDirective, descendants: true }, { propertyName: "groupHeaderTemplate", first: true, predicate: GroupHeaderTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "template", first: true, predicate: ["content"], descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
7553
+ ConfigurationViewBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: ConfigurationViewBase, inputs: { slotClass: "slotClass", eventClass: "eventClass", eventStyles: "eventStyles", highlightOngoingEvents: "highlightOngoingEvents" }, queries: [{ propertyName: "eventTemplate", first: true, predicate: EventTemplateDirective, descendants: true }, { propertyName: "groupHeaderTemplate", first: true, predicate: GroupHeaderTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "template", first: true, predicate: ["content"], descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
7527
7554
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ConfigurationViewBase, decorators: [{
7528
7555
  type: Directive
7529
7556
  }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: ViewContextService }, { type: ViewStateService }]; }, propDecorators: { slotClass: [{
@@ -7532,6 +7559,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
7532
7559
  type: Input
7533
7560
  }], eventStyles: [{
7534
7561
  type: Input
7562
+ }], highlightOngoingEvents: [{
7563
+ type: Input
7535
7564
  }], template: [{
7536
7565
  type: ViewChild,
7537
7566
  args: ['content', { static: true }]
@@ -8932,6 +8961,12 @@ const MS_PER_HOUR = 60 * MS_PER_MINUTE;
8932
8961
  const BORDER_WIDTH = 1;
8933
8962
  /** @hidden */
8934
8963
  const DEFAULT_EVENT_HEIGHT = 25;
8964
+ /** @hidden */
8965
+ const ONGOING_EVENT_CSS_CLASS = 'k-event-ongoing';
8966
+ /** @hidden */
8967
+ const DAYS_IN_WEEK_COUNT = 7;
8968
+ /** @hidden */
8969
+ const WEEKS_COUNT = 6;
8935
8970
 
8936
8971
  //better try to measure this one
8937
8972
  const MORE_BUTTON_HEIGHT = 13;
@@ -9351,6 +9386,9 @@ class BaseView {
9351
9386
  this.pdfService = pdfService;
9352
9387
  this.localization = localization;
9353
9388
  this.cdr = cdr;
9389
+ /**
9390
+ * The non-all-day events.
9391
+ */
9354
9392
  this.items = new BehaviorSubject(null);
9355
9393
  this.horizontalResources = [];
9356
9394
  this.verticalResources = [];
@@ -10646,8 +10684,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
10646
10684
  }]
10647
10685
  }] });
10648
10686
 
10649
- const DAYS_IN_WEEK_COUNT = 7;
10650
- const WEEKS_COUNT = 6;
10651
10687
  /**
10652
10688
  * @hidden
10653
10689
  */
@@ -10656,6 +10692,7 @@ class MonthViewRendererComponent extends BaseView {
10656
10692
  super(viewContext, viewState, intl, slotService, zone, renderer, element, pdfService, localization, changeDetector);
10657
10693
  this.resizeHintFormat = { skeleton: 'Md' };
10658
10694
  this.weeks = [];
10695
+ this.updateOngoingEvents = this.updateOngoingEvents.bind(this);
10659
10696
  }
10660
10697
  get monthDaySlotTemplateRef() {
10661
10698
  return this.monthDaySlotTemplate || (this.schedulerMonthDaySlotTemplate || {}).templateRef;
@@ -10666,6 +10703,14 @@ class MonthViewRendererComponent extends BaseView {
10666
10703
  }
10667
10704
  super.ngOnChanges(changes);
10668
10705
  }
10706
+ ngAfterViewInit() {
10707
+ this.updateOngoingEvents();
10708
+ super.ngAfterViewInit();
10709
+ }
10710
+ ngOnDestroy() {
10711
+ clearTimeout(this.ongoingEventsTimeout);
10712
+ super.ngOnDestroy();
10713
+ }
10669
10714
  horizontalColspan(resourceIndex) {
10670
10715
  const resources = this.horizontalResources;
10671
10716
  let result = DAYS_IN_WEEK_COUNT;
@@ -10793,6 +10838,28 @@ class MonthViewRendererComponent extends BaseView {
10793
10838
  slotByPosition(x, y) {
10794
10839
  return this.slotService.slotByPosition(x, y);
10795
10840
  }
10841
+ updateOngoingEvents() {
10842
+ const disabled = !this.highlightOngoingEvents || this.highlightOngoingEvents.enabled === false;
10843
+ if (!isDocumentAvailable() || disabled) {
10844
+ return;
10845
+ }
10846
+ clearTimeout(this.ongoingEventsTimeout);
10847
+ this.zone.runOutsideAngular(() => {
10848
+ this.ongoingEventsTimeout = setTimeout(this.updateOngoingEvents, this.highlightOngoingEvents.updateInterval || MS_PER_MINUTE);
10849
+ });
10850
+ this.toggleOngoingClass();
10851
+ }
10852
+ currentTime() {
10853
+ return new Date();
10854
+ }
10855
+ toggleOngoingClass() {
10856
+ const now = this.currentTime();
10857
+ const cssClass = isPresent(this.highlightOngoingEvents.cssClass) ? this.highlightOngoingEvents.cssClass : ONGOING_EVENT_CSS_CLASS;
10858
+ this.eventElements.forEach((event) => {
10859
+ const isOngoing = dateInRange(now, event.item.start, event.item.end);
10860
+ this.renderer[isOngoing ? 'addClass' : 'removeClass'](event.nativeElement, cssClass);
10861
+ });
10862
+ }
10796
10863
  createDaySlots({ start }) {
10797
10864
  const weeks = [];
10798
10865
  let date = start;
@@ -10808,9 +10875,9 @@ class MonthViewRendererComponent extends BaseView {
10808
10875
  }
10809
10876
  }
10810
10877
  MonthViewRendererComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MonthViewRendererComponent, deps: [{ token: ViewContextService }, { token: ViewStateService }, { token: i1$4.IntlService }, { token: MonthSlotService }, { token: i0.NgZone }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: PDFService }, { token: i1$1.LocalizationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
10811
- MonthViewRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: MonthViewRendererComponent, selector: "month-view", inputs: { monthDaySlotTemplate: "monthDaySlotTemplate" }, providers: [
10878
+ MonthViewRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: MonthViewRendererComponent, selector: "month-view", inputs: { monthDaySlotTemplate: "monthDaySlotTemplate", highlightOngoingEvents: "highlightOngoingEvents" }, providers: [
10812
10879
  MonthSlotService
10813
- ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
10880
+ ], viewQueries: [{ propertyName: "eventElements", predicate: MonthViewItemComponent, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
10814
10881
  <div class="k-scheduler-layout k-scheduler-monthview k-scheduler-flex-layout">
10815
10882
  <div class="k-scheduler-pane">
10816
10883
  <div class="k-scheduler-times" #timesHeader *ngIf="verticalResources.length">
@@ -11057,6 +11124,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
11057
11124
  }]
11058
11125
  }], ctorParameters: function () { return [{ type: ViewContextService }, { type: ViewStateService }, { type: i1$4.IntlService }, { type: MonthSlotService }, { type: i0.NgZone }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: PDFService }, { type: i1$1.LocalizationService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { monthDaySlotTemplate: [{
11059
11126
  type: Input
11127
+ }], highlightOngoingEvents: [{
11128
+ type: Input
11129
+ }], eventElements: [{
11130
+ type: ViewChildren,
11131
+ args: [MonthViewItemComponent]
11060
11132
  }] } });
11061
11133
 
11062
11134
  /**
@@ -11110,10 +11182,11 @@ MonthViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
11110
11182
  [monthDaySlotTemplate]="monthDaySlotTemplate?.templateRef"
11111
11183
  [selectedDateFormat]="selectedDateFormat"
11112
11184
  [selectedShortDateFormat]="selectedShortDateFormat"
11185
+ [highlightOngoingEvents]="viewHighlightOngoingEvents"
11113
11186
  [weekStart]="viewWeekStart">
11114
11187
  </month-view>
11115
11188
  </ng-template>
11116
- `, isInline: true, components: [{ type: MonthViewRendererComponent, selector: "month-view", inputs: ["monthDaySlotTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
11189
+ `, isInline: true, components: [{ type: MonthViewRendererComponent, selector: "month-view", inputs: ["monthDaySlotTemplate", "highlightOngoingEvents"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
11117
11190
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MonthViewComponent, decorators: [{
11118
11191
  type: Component,
11119
11192
  args: [{
@@ -11135,6 +11208,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
11135
11208
  [monthDaySlotTemplate]="monthDaySlotTemplate?.templateRef"
11136
11209
  [selectedDateFormat]="selectedDateFormat"
11137
11210
  [selectedShortDateFormat]="selectedShortDateFormat"
11211
+ [highlightOngoingEvents]="viewHighlightOngoingEvents"
11138
11212
  [weekStart]="viewWeekStart">
11139
11213
  </month-view>
11140
11214
  </ng-template>
@@ -11175,7 +11249,7 @@ ViewFooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
11175
11249
  <span class="k-button-icon k-icon" [ngClass]="item.iconClass"></span>
11176
11250
  <span class="k-button-text">{{ item.text }}</span>
11177
11251
  </button>
11178
- `, isInline: true, directives: [{ type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.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"] }, { type: i10.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
11252
+ `, isInline: true, directives: [{ type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.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"] }, { type: i10.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
11179
11253
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ViewFooterComponent, decorators: [{
11180
11254
  type: Component,
11181
11255
  args: [{
@@ -11323,6 +11397,7 @@ const WORK_WEEK_END = 'workWeekEnd';
11323
11397
  const SLOT_DURATION = 'slotDuration';
11324
11398
  const SLOT_DIVISIONS = 'slotDivisions';
11325
11399
  const CURRENT_TIME_MARKER = 'currentTimeMarker';
11400
+ const HIGHLIGHT_ONGOING_EVENTS = 'highlightOngoingEvents';
11326
11401
  /**
11327
11402
  * @hidden
11328
11403
  */
@@ -11396,6 +11471,12 @@ class DayTimeViewBase extends ConfigurationViewBase {
11396
11471
  get viewCurrentTimeMarker() {
11397
11472
  return this.optionValue(CURRENT_TIME_MARKER);
11398
11473
  }
11474
+ /**
11475
+ * @hidden
11476
+ */
11477
+ get viewHighlightOngoingEvents() {
11478
+ return this.optionValue(HIGHLIGHT_ONGOING_EVENTS);
11479
+ }
11399
11480
  /**
11400
11481
  * @hidden
11401
11482
  */
@@ -11407,7 +11488,7 @@ class DayTimeViewBase extends ConfigurationViewBase {
11407
11488
  }
11408
11489
  }
11409
11490
  DayTimeViewBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DayTimeViewBase, deps: [{ token: i1$1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: ViewContextService }, { token: ViewStateService }], target: i0.ɵɵFactoryTarget.Directive });
11410
- DayTimeViewBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: DayTimeViewBase, inputs: { showWorkHours: "showWorkHours", eventHeight: "eventHeight", startTime: "startTime", scrollTime: "scrollTime", endTime: "endTime", workDayStart: "workDayStart", workDayEnd: "workDayEnd", workWeekStart: "workWeekStart", workWeekEnd: "workWeekEnd", slotDuration: "slotDuration", slotDivisions: "slotDivisions", currentTimeMarker: "currentTimeMarker" }, queries: [{ propertyName: "timeSlotTemplate", first: true, predicate: TimeSlotTemplateDirective, descendants: true }, { propertyName: "dateHeaderTemplate", first: true, predicate: DateHeaderTemplateDirective, descendants: true }], usesInheritance: true, ngImport: i0 });
11491
+ DayTimeViewBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: DayTimeViewBase, inputs: { showWorkHours: "showWorkHours", eventHeight: "eventHeight", startTime: "startTime", scrollTime: "scrollTime", endTime: "endTime", workDayStart: "workDayStart", workDayEnd: "workDayEnd", workWeekStart: "workWeekStart", workWeekEnd: "workWeekEnd", slotDuration: "slotDuration", slotDivisions: "slotDivisions", currentTimeMarker: "currentTimeMarker", highlightOngoingEvents: "highlightOngoingEvents" }, queries: [{ propertyName: "timeSlotTemplate", first: true, predicate: TimeSlotTemplateDirective, descendants: true }, { propertyName: "dateHeaderTemplate", first: true, predicate: DateHeaderTemplateDirective, descendants: true }], usesInheritance: true, ngImport: i0 });
11411
11492
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DayTimeViewBase, decorators: [{
11412
11493
  type: Directive
11413
11494
  }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: ViewContextService }, { type: ViewStateService }]; }, propDecorators: { timeSlotTemplate: [{
@@ -11440,6 +11521,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
11440
11521
  type: Input
11441
11522
  }], currentTimeMarker: [{
11442
11523
  type: Input
11524
+ }], highlightOngoingEvents: [{
11525
+ type: Input
11443
11526
  }] } });
11444
11527
 
11445
11528
  const SLOT_FILL = 'slotFill';
@@ -12140,6 +12223,113 @@ function createTimeSlots(intlService, { showWorkHours, startTime, endTime, workD
12140
12223
  return slots;
12141
12224
  }
12142
12225
 
12226
+ /**
12227
+ * @hidden
12228
+ */
12229
+ class DayTimeViewItemComponent extends BaseViewItem {
12230
+ constructor(intlService, slotService, localization, focusService, element, renderer, localeId) {
12231
+ super(slotService, localization, focusService, element, renderer, localeId);
12232
+ this.intlService = intlService;
12233
+ this.localeId = localeId;
12234
+ }
12235
+ get eventTime() {
12236
+ return this.intlService.format('{0:t}–{1:t}', toLocalDate(this.item.startTime), toLocalDate(this.item.endTime));
12237
+ }
12238
+ }
12239
+ DayTimeViewItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DayTimeViewItemComponent, deps: [{ token: i1$4.IntlService }, { token: DayTimeSlotService }, { token: i1$1.LocalizationService }, { token: FocusService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: LOCALE_ID }], target: i0.ɵɵFactoryTarget.Component });
12240
+ DayTimeViewItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DayTimeViewItemComponent, selector: "[dayTimeViewItem]", inputs: { vertical: "vertical", isAllDay: "isAllDay" }, usesInheritance: true, ngImport: i0, template: `
12241
+ <span class="k-event-actions">
12242
+ <span class="k-icon k-i-arrow-60-left" *ngIf="item.tail && !vertical"></span>
12243
+ <span class="k-icon k-i-reload" *ngIf="isRecurrence"></span>
12244
+ <span class="k-icon k-i-non-recurrence" *ngIf="isRecurrenceException"></span>
12245
+ </span>
12246
+ <ng-container *ngIf="eventTemplate" [ngTemplateOutlet]="eventTemplate"
12247
+ [ngTemplateOutletContext]="{ $implicit: item.event, event: item.event, resources: resources }">
12248
+ </ng-container>
12249
+ <div *ngIf="!eventTemplate" [attr.title]="eventTitle">
12250
+ <div class="k-event-template k-event-time" *ngIf="!isAllDay">{{ eventTime }}</div>
12251
+ <div class="k-event-template" aria-hidden="true">{{ item.event.title }}</div>
12252
+ </div>
12253
+
12254
+ <span class="k-event-actions">
12255
+ <span *ngIf="removable" class="k-link k-event-delete" aria-hidden="true" [attr.title]="deleteMessage">
12256
+ <span class="k-icon k-i-close"></span>
12257
+ </span>
12258
+ <span class="k-icon k-i-arrow-60-right" *ngIf="item.head && !vertical"></span>
12259
+ </span>
12260
+
12261
+ <span class="k-event-top-actions" *ngIf="item.tail && vertical">
12262
+ <span class="k-icon k-i-arrow-60-up"></span>
12263
+ </span>
12264
+
12265
+ <span class="k-event-bottom-actions" *ngIf="item.head && vertical">
12266
+ <span class="k-icon k-i-arrow-60-down"></span>
12267
+ </span>
12268
+
12269
+ <ng-container *ngIf="resizable && vertical">
12270
+ <span class="k-resize-handle k-resize-n" *ngIf="!item.tail"></span>
12271
+ <span class="k-resize-handle k-resize-s" *ngIf="!item.head"></span>
12272
+ </ng-container>
12273
+
12274
+ <ng-container *ngIf="resizable && !vertical">
12275
+ <span class="k-resize-handle k-resize-w"></span>
12276
+ <span class="k-resize-handle k-resize-e"></span>
12277
+ </ng-container>
12278
+ `, isInline: true, directives: [{ type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
12279
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DayTimeViewItemComponent, decorators: [{
12280
+ type: Component,
12281
+ args: [{
12282
+ // eslint-disable-next-line @angular-eslint/component-selector
12283
+ selector: '[dayTimeViewItem]',
12284
+ template: `
12285
+ <span class="k-event-actions">
12286
+ <span class="k-icon k-i-arrow-60-left" *ngIf="item.tail && !vertical"></span>
12287
+ <span class="k-icon k-i-reload" *ngIf="isRecurrence"></span>
12288
+ <span class="k-icon k-i-non-recurrence" *ngIf="isRecurrenceException"></span>
12289
+ </span>
12290
+ <ng-container *ngIf="eventTemplate" [ngTemplateOutlet]="eventTemplate"
12291
+ [ngTemplateOutletContext]="{ $implicit: item.event, event: item.event, resources: resources }">
12292
+ </ng-container>
12293
+ <div *ngIf="!eventTemplate" [attr.title]="eventTitle">
12294
+ <div class="k-event-template k-event-time" *ngIf="!isAllDay">{{ eventTime }}</div>
12295
+ <div class="k-event-template" aria-hidden="true">{{ item.event.title }}</div>
12296
+ </div>
12297
+
12298
+ <span class="k-event-actions">
12299
+ <span *ngIf="removable" class="k-link k-event-delete" aria-hidden="true" [attr.title]="deleteMessage">
12300
+ <span class="k-icon k-i-close"></span>
12301
+ </span>
12302
+ <span class="k-icon k-i-arrow-60-right" *ngIf="item.head && !vertical"></span>
12303
+ </span>
12304
+
12305
+ <span class="k-event-top-actions" *ngIf="item.tail && vertical">
12306
+ <span class="k-icon k-i-arrow-60-up"></span>
12307
+ </span>
12308
+
12309
+ <span class="k-event-bottom-actions" *ngIf="item.head && vertical">
12310
+ <span class="k-icon k-i-arrow-60-down"></span>
12311
+ </span>
12312
+
12313
+ <ng-container *ngIf="resizable && vertical">
12314
+ <span class="k-resize-handle k-resize-n" *ngIf="!item.tail"></span>
12315
+ <span class="k-resize-handle k-resize-s" *ngIf="!item.head"></span>
12316
+ </ng-container>
12317
+
12318
+ <ng-container *ngIf="resizable && !vertical">
12319
+ <span class="k-resize-handle k-resize-w"></span>
12320
+ <span class="k-resize-handle k-resize-e"></span>
12321
+ </ng-container>
12322
+ `
12323
+ }]
12324
+ }], ctorParameters: function () { return [{ type: i1$4.IntlService }, { type: DayTimeSlotService }, { type: i1$1.LocalizationService }, { type: FocusService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: undefined, decorators: [{
12325
+ type: Inject,
12326
+ args: [LOCALE_ID]
12327
+ }] }]; }, propDecorators: { vertical: [{
12328
+ type: Input
12329
+ }], isAllDay: [{
12330
+ type: Input
12331
+ }] } });
12332
+
12143
12333
  const getStartDate = date => getDate(date);
12144
12334
  const getEndDate = (start, numberOfDays) => getDate(addDays(start, numberOfDays || 1));
12145
12335
  const getNextDate = (date, count, numberOfDays) => getDate(addDays(date, numberOfDays * count));
@@ -12170,6 +12360,8 @@ class DayTimeViewComponent extends BaseView {
12170
12360
  this.verticalTime = true;
12171
12361
  this.initialUpdate = true;
12172
12362
  this.updateCurrentTime = this.updateCurrentTime.bind(this);
12363
+ this.toggleOngoingClass = this.toggleOngoingClass.bind(this);
12364
+ this.updateOngoingEvents = this.updateOngoingEvents.bind(this);
12173
12365
  }
12174
12366
  get classNames() {
12175
12367
  return `k-scheduler-${this.name}view`;
@@ -12198,6 +12390,7 @@ class DayTimeViewComponent extends BaseView {
12198
12390
  ngOnDestroy() {
12199
12391
  super.ngOnDestroy();
12200
12392
  clearTimeout(this.currentTimeTimeout);
12393
+ clearTimeout(this.ongoingEventsTimeout);
12201
12394
  }
12202
12395
  verticalItem(leafIndex, resourceIndex) {
12203
12396
  const data = this.verticalResources[resourceIndex].data || [];
@@ -12218,6 +12411,14 @@ class DayTimeViewComponent extends BaseView {
12218
12411
  });
12219
12412
  }
12220
12413
  }
12414
+ toggleOngoingClass() {
12415
+ const now = this.currentTime();
12416
+ const cssClass = isPresent(this.highlightOngoingEvents.cssClass) ? this.highlightOngoingEvents.cssClass : ONGOING_EVENT_CSS_CLASS;
12417
+ this.eventElements.forEach((event) => {
12418
+ const isOngoing = dateInRange(now, event.item.start, event.item.end);
12419
+ this.renderer[isOngoing ? 'addClass' : 'removeClass'](event.nativeElement, cssClass);
12420
+ });
12421
+ }
12221
12422
  scrollToTime(time = this.scrollTime) {
12222
12423
  let date;
12223
12424
  if (typeof time === 'string') {
@@ -12245,6 +12446,7 @@ class DayTimeViewComponent extends BaseView {
12245
12446
  updateView() {
12246
12447
  super.updateView();
12247
12448
  this.updateCurrentTime();
12449
+ this.updateOngoingEvents();
12248
12450
  if (this.initialUpdate) {
12249
12451
  this.scrollToTime();
12250
12452
  this.initialUpdate = false;
@@ -12283,6 +12485,17 @@ class DayTimeViewComponent extends BaseView {
12283
12485
  this.positionCurrentTime();
12284
12486
  }
12285
12487
  }
12488
+ updateOngoingEvents() {
12489
+ const disabled = !this.highlightOngoingEvents || this.highlightOngoingEvents.enabled === false;
12490
+ if (!isDocumentAvailable() || disabled) {
12491
+ return;
12492
+ }
12493
+ clearTimeout(this.ongoingEventsTimeout);
12494
+ this.zone.runOutsideAngular(() => {
12495
+ this.ongoingEventsTimeout = setTimeout(this.updateOngoingEvents, this.highlightOngoingEvents.updateInterval || MS_PER_MINUTE);
12496
+ });
12497
+ this.toggleOngoingClass();
12498
+ }
12286
12499
  positionCurrentTime() {
12287
12500
  if (this.currentTimeElements && this.currentTimeElements.length) {
12288
12501
  const date = this.currentDate.toUTCDate();
@@ -12429,7 +12642,7 @@ class DayTimeViewComponent extends BaseView {
12429
12642
  }
12430
12643
  }
12431
12644
  DayTimeViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DayTimeViewComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: ViewContextService }, { token: ViewStateService }, { token: i1$4.IntlService }, { token: DayTimeSlotService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: PDFService }, { token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
12432
- DayTimeViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DayTimeViewComponent, selector: "kendo-day-time-view", inputs: { timeSlotTemplate: "timeSlotTemplate", dateHeaderTemplate: "dateHeaderTemplate", numberOfDays: "numberOfDays", scrollTime: "scrollTime", startTime: "startTime", endTime: "endTime", workDayStart: "workDayStart", workDayEnd: "workDayEnd", workWeekStart: "workWeekStart", workWeekEnd: "workWeekEnd", slotDuration: "slotDuration", slotDivisions: "slotDivisions", showWorkHours: "showWorkHours", getStartDate: "getStartDate", getEndDate: "getEndDate", getNextDate: "getNextDate", currentTimeMarker: "currentTimeMarker" }, viewQueries: [{ propertyName: "currentTimeElements", predicate: ["currentTimeMarker"], descendants: true }, { propertyName: "currentTimeArrows", predicate: ["currentTimeArrow"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: '', isInline: true });
12645
+ DayTimeViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DayTimeViewComponent, selector: "kendo-day-time-view", inputs: { timeSlotTemplate: "timeSlotTemplate", dateHeaderTemplate: "dateHeaderTemplate", numberOfDays: "numberOfDays", scrollTime: "scrollTime", startTime: "startTime", endTime: "endTime", workDayStart: "workDayStart", workDayEnd: "workDayEnd", workWeekStart: "workWeekStart", workWeekEnd: "workWeekEnd", slotDuration: "slotDuration", slotDivisions: "slotDivisions", showWorkHours: "showWorkHours", getStartDate: "getStartDate", getEndDate: "getEndDate", getNextDate: "getNextDate", currentTimeMarker: "currentTimeMarker", highlightOngoingEvents: "highlightOngoingEvents" }, viewQueries: [{ propertyName: "currentTimeElements", predicate: ["currentTimeMarker"], descendants: true }, { propertyName: "eventElements", predicate: DayTimeViewItemComponent, descendants: true }, { propertyName: "currentTimeArrows", predicate: ["currentTimeArrow"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: '', isInline: true });
12433
12646
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DayTimeViewComponent, decorators: [{
12434
12647
  type: Component,
12435
12648
  args: [{ selector: 'kendo-day-time-view', template: '' }]
@@ -12467,121 +12680,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
12467
12680
  type: Input
12468
12681
  }], currentTimeMarker: [{
12469
12682
  type: Input
12683
+ }], highlightOngoingEvents: [{
12684
+ type: Input
12470
12685
  }], currentTimeElements: [{
12471
12686
  type: ViewChildren,
12472
12687
  args: ['currentTimeMarker']
12688
+ }], eventElements: [{
12689
+ type: ViewChildren,
12690
+ args: [DayTimeViewItemComponent]
12473
12691
  }], currentTimeArrows: [{
12474
12692
  type: ViewChildren,
12475
12693
  args: ['currentTimeArrow']
12476
12694
  }] } });
12477
12695
 
12478
- /**
12479
- * @hidden
12480
- */
12481
- class DayTimeViewItemComponent extends BaseViewItem {
12482
- constructor(intlService, slotService, localization, focusService, element, renderer, localeId) {
12483
- super(slotService, localization, focusService, element, renderer, localeId);
12484
- this.intlService = intlService;
12485
- this.localeId = localeId;
12486
- }
12487
- get eventTime() {
12488
- return this.intlService.format('{0:t}–{1:t}', toLocalDate(this.item.startTime), toLocalDate(this.item.endTime));
12489
- }
12490
- }
12491
- DayTimeViewItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DayTimeViewItemComponent, deps: [{ token: i1$4.IntlService }, { token: DayTimeSlotService }, { token: i1$1.LocalizationService }, { token: FocusService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: LOCALE_ID }], target: i0.ɵɵFactoryTarget.Component });
12492
- DayTimeViewItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DayTimeViewItemComponent, selector: "[dayTimeViewItem]", inputs: { vertical: "vertical", isAllDay: "isAllDay" }, usesInheritance: true, ngImport: i0, template: `
12493
- <span class="k-event-actions">
12494
- <span class="k-icon k-i-arrow-60-left" *ngIf="item.tail && !vertical"></span>
12495
- <span class="k-icon k-i-reload" *ngIf="isRecurrence"></span>
12496
- <span class="k-icon k-i-non-recurrence" *ngIf="isRecurrenceException"></span>
12497
- </span>
12498
- <ng-container *ngIf="eventTemplate" [ngTemplateOutlet]="eventTemplate"
12499
- [ngTemplateOutletContext]="{ $implicit: item.event, event: item.event, resources: resources }">
12500
- </ng-container>
12501
- <div *ngIf="!eventTemplate" [attr.title]="eventTitle">
12502
- <div class="k-event-template k-event-time" *ngIf="!isAllDay">{{ eventTime }}</div>
12503
- <div class="k-event-template" aria-hidden="true">{{ item.event.title }}</div>
12504
- </div>
12505
-
12506
- <span class="k-event-actions">
12507
- <span *ngIf="removable" class="k-link k-event-delete" aria-hidden="true" [attr.title]="deleteMessage">
12508
- <span class="k-icon k-i-close"></span>
12509
- </span>
12510
- <span class="k-icon k-i-arrow-60-right" *ngIf="item.head && !vertical"></span>
12511
- </span>
12512
-
12513
- <span class="k-event-top-actions" *ngIf="item.tail && vertical">
12514
- <span class="k-icon k-i-arrow-60-up"></span>
12515
- </span>
12516
-
12517
- <span class="k-event-bottom-actions" *ngIf="item.head && vertical">
12518
- <span class="k-icon k-i-arrow-60-down"></span>
12519
- </span>
12520
-
12521
- <ng-container *ngIf="resizable && vertical">
12522
- <span class="k-resize-handle k-resize-n" *ngIf="!item.tail"></span>
12523
- <span class="k-resize-handle k-resize-s" *ngIf="!item.head"></span>
12524
- </ng-container>
12525
-
12526
- <ng-container *ngIf="resizable && !vertical">
12527
- <span class="k-resize-handle k-resize-w"></span>
12528
- <span class="k-resize-handle k-resize-e"></span>
12529
- </ng-container>
12530
- `, isInline: true, directives: [{ type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
12531
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DayTimeViewItemComponent, decorators: [{
12532
- type: Component,
12533
- args: [{
12534
- // eslint-disable-next-line @angular-eslint/component-selector
12535
- selector: '[dayTimeViewItem]',
12536
- template: `
12537
- <span class="k-event-actions">
12538
- <span class="k-icon k-i-arrow-60-left" *ngIf="item.tail && !vertical"></span>
12539
- <span class="k-icon k-i-reload" *ngIf="isRecurrence"></span>
12540
- <span class="k-icon k-i-non-recurrence" *ngIf="isRecurrenceException"></span>
12541
- </span>
12542
- <ng-container *ngIf="eventTemplate" [ngTemplateOutlet]="eventTemplate"
12543
- [ngTemplateOutletContext]="{ $implicit: item.event, event: item.event, resources: resources }">
12544
- </ng-container>
12545
- <div *ngIf="!eventTemplate" [attr.title]="eventTitle">
12546
- <div class="k-event-template k-event-time" *ngIf="!isAllDay">{{ eventTime }}</div>
12547
- <div class="k-event-template" aria-hidden="true">{{ item.event.title }}</div>
12548
- </div>
12549
-
12550
- <span class="k-event-actions">
12551
- <span *ngIf="removable" class="k-link k-event-delete" aria-hidden="true" [attr.title]="deleteMessage">
12552
- <span class="k-icon k-i-close"></span>
12553
- </span>
12554
- <span class="k-icon k-i-arrow-60-right" *ngIf="item.head && !vertical"></span>
12555
- </span>
12556
-
12557
- <span class="k-event-top-actions" *ngIf="item.tail && vertical">
12558
- <span class="k-icon k-i-arrow-60-up"></span>
12559
- </span>
12560
-
12561
- <span class="k-event-bottom-actions" *ngIf="item.head && vertical">
12562
- <span class="k-icon k-i-arrow-60-down"></span>
12563
- </span>
12564
-
12565
- <ng-container *ngIf="resizable && vertical">
12566
- <span class="k-resize-handle k-resize-n" *ngIf="!item.tail"></span>
12567
- <span class="k-resize-handle k-resize-s" *ngIf="!item.head"></span>
12568
- </ng-container>
12569
-
12570
- <ng-container *ngIf="resizable && !vertical">
12571
- <span class="k-resize-handle k-resize-w"></span>
12572
- <span class="k-resize-handle k-resize-e"></span>
12573
- </ng-container>
12574
- `
12575
- }]
12576
- }], ctorParameters: function () { return [{ type: i1$4.IntlService }, { type: DayTimeSlotService }, { type: i1$1.LocalizationService }, { type: FocusService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: undefined, decorators: [{
12577
- type: Inject,
12578
- args: [LOCALE_ID]
12579
- }] }]; }, propDecorators: { vertical: [{
12580
- type: Input
12581
- }], isAllDay: [{
12582
- type: Input
12583
- }] } });
12584
-
12585
12696
  /**
12586
12697
  * @hidden
12587
12698
  */
@@ -13491,6 +13602,7 @@ DayViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versi
13491
13602
  [name]="name"
13492
13603
  [eventHeight]="viewEventHeight"
13493
13604
  [currentTimeMarker]="viewCurrentTimeMarker"
13605
+ [highlightOngoingEvents]="viewHighlightOngoingEvents"
13494
13606
  [showWorkHours]="shouldShowWorkHours"
13495
13607
  [scrollTime]="viewScrollTime"
13496
13608
  [startTime]="viewStartTime"
@@ -13534,6 +13646,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
13534
13646
  [name]="name"
13535
13647
  [eventHeight]="viewEventHeight"
13536
13648
  [currentTimeMarker]="viewCurrentTimeMarker"
13649
+ [highlightOngoingEvents]="viewHighlightOngoingEvents"
13537
13650
  [showWorkHours]="shouldShowWorkHours"
13538
13651
  [scrollTime]="viewScrollTime"
13539
13652
  [startTime]="viewStartTime"
@@ -13646,6 +13759,7 @@ MultiDayViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
13646
13759
  [numberOfDays]="numberOfDays"
13647
13760
  [eventHeight]="viewEventHeight"
13648
13761
  [currentTimeMarker]="viewCurrentTimeMarker"
13762
+ [highlightOngoingEvents]="viewHighlightOngoingEvents"
13649
13763
  [showWorkHours]="shouldShowWorkHours"
13650
13764
  [scrollTime]="viewScrollTime"
13651
13765
  [startTime]="viewStartTime"
@@ -13691,6 +13805,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
13691
13805
  [numberOfDays]="numberOfDays"
13692
13806
  [eventHeight]="viewEventHeight"
13693
13807
  [currentTimeMarker]="viewCurrentTimeMarker"
13808
+ [highlightOngoingEvents]="viewHighlightOngoingEvents"
13694
13809
  [showWorkHours]="shouldShowWorkHours"
13695
13810
  [scrollTime]="viewScrollTime"
13696
13811
  [startTime]="viewStartTime"
@@ -13782,6 +13897,7 @@ WeekViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
13782
13897
  [getStartDate]="getStartDate"
13783
13898
  [eventHeight]="viewEventHeight"
13784
13899
  [currentTimeMarker]="viewCurrentTimeMarker"
13900
+ [highlightOngoingEvents]="viewHighlightOngoingEvents"
13785
13901
  [showWorkHours]="shouldShowWorkHours"
13786
13902
  [scrollTime]="viewScrollTime"
13787
13903
  [startTime]="viewStartTime"
@@ -13828,6 +13944,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
13828
13944
  [getStartDate]="getStartDate"
13829
13945
  [eventHeight]="viewEventHeight"
13830
13946
  [currentTimeMarker]="viewCurrentTimeMarker"
13947
+ [highlightOngoingEvents]="viewHighlightOngoingEvents"
13831
13948
  [showWorkHours]="shouldShowWorkHours"
13832
13949
  [scrollTime]="viewScrollTime"
13833
13950
  [startTime]="viewStartTime"
@@ -13931,6 +14048,7 @@ WorkWeekViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
13931
14048
  [getNextDate]="getNextDate"
13932
14049
  [eventHeight]="viewEventHeight"
13933
14050
  [currentTimeMarker]="viewCurrentTimeMarker"
14051
+ [highlightOngoingEvents]="viewHighlightOngoingEvents"
13934
14052
  [showWorkHours]="shouldShowWorkHours"
13935
14053
  [scrollTime]="viewScrollTime"
13936
14054
  [startTime]="viewStartTime"
@@ -13978,6 +14096,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
13978
14096
  [getNextDate]="getNextDate"
13979
14097
  [eventHeight]="viewEventHeight"
13980
14098
  [currentTimeMarker]="viewCurrentTimeMarker"
14099
+ [highlightOngoingEvents]="viewHighlightOngoingEvents"
13981
14100
  [showWorkHours]="shouldShowWorkHours"
13982
14101
  [scrollTime]="viewScrollTime"
13983
14102
  [startTime]="viewStartTime"
@@ -14642,6 +14761,7 @@ TimelineViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
14642
14761
  [eventHeight]="viewEventHeight"
14643
14762
  [columnWidth]="viewColumnWidth"
14644
14763
  [currentTimeMarker]="viewCurrentTimeMarker"
14764
+ [highlightOngoingEvents]="viewHighlightOngoingEvents"
14645
14765
  [showWorkHours]="shouldShowWorkHours"
14646
14766
  [scrollTime]="viewScrollTime"
14647
14767
  [startTime]="viewStartTime"
@@ -14681,6 +14801,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
14681
14801
  [eventHeight]="viewEventHeight"
14682
14802
  [columnWidth]="viewColumnWidth"
14683
14803
  [currentTimeMarker]="viewCurrentTimeMarker"
14804
+ [highlightOngoingEvents]="viewHighlightOngoingEvents"
14684
14805
  [showWorkHours]="shouldShowWorkHours"
14685
14806
  [scrollTime]="viewScrollTime"
14686
14807
  [startTime]="viewStartTime"
@@ -14765,6 +14886,7 @@ TimelineWeekViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
14765
14886
  [eventHeight]="viewEventHeight"
14766
14887
  [columnWidth]="viewColumnWidth"
14767
14888
  [currentTimeMarker]="viewCurrentTimeMarker"
14889
+ [highlightOngoingEvents]="viewHighlightOngoingEvents"
14768
14890
  [showWorkHours]="shouldShowWorkHours"
14769
14891
  [scrollTime]="viewScrollTime"
14770
14892
  [startTime]="viewStartTime"
@@ -14808,6 +14930,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
14808
14930
  [eventHeight]="viewEventHeight"
14809
14931
  [columnWidth]="viewColumnWidth"
14810
14932
  [currentTimeMarker]="viewCurrentTimeMarker"
14933
+ [highlightOngoingEvents]="viewHighlightOngoingEvents"
14811
14934
  [showWorkHours]="shouldShowWorkHours"
14812
14935
  [scrollTime]="viewScrollTime"
14813
14936
  [startTime]="viewStartTime"
@@ -14904,6 +15027,7 @@ TimelineMonthViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
14904
15027
  [eventHeight]="viewEventHeight"
14905
15028
  [columnWidth]="viewColumnWidth"
14906
15029
  [currentTimeMarker]="viewCurrentTimeMarker"
15030
+ [highlightOngoingEvents]="viewHighlightOngoingEvents"
14907
15031
  [showWorkHours]="shouldShowWorkHours"
14908
15032
  [scrollTime]="viewScrollTime"
14909
15033
  [startTime]="viewStartTime"
@@ -14947,6 +15071,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
14947
15071
  [eventHeight]="viewEventHeight"
14948
15072
  [columnWidth]="viewColumnWidth"
14949
15073
  [currentTimeMarker]="viewCurrentTimeMarker"
15074
+ [highlightOngoingEvents]="viewHighlightOngoingEvents"
14950
15075
  [showWorkHours]="shouldShowWorkHours"
14951
15076
  [scrollTime]="viewScrollTime"
14952
15077
  [startTime]="viewStartTime"
@@ -16064,6 +16189,12 @@ class BaseEditService {
16064
16189
  this.logRemoveOccurrence(event);
16065
16190
  this.saveChanges();
16066
16191
  }
16192
+ /**
16193
+ * Returns the master recurring event for a specified recurring event.
16194
+ *
16195
+ * @param event - An event from the recurrence series.
16196
+ * @returns the master recurring event for the series.
16197
+ */
16067
16198
  findRecurrenceMaster(event) {
16068
16199
  const id = this.getId(event);
16069
16200
  const recurrenceId = this.getRecurrenceId(event);
@@ -16071,9 +16202,21 @@ class BaseEditService {
16071
16202
  const index = this.itemIndex(headId, this.data);
16072
16203
  return this.data[index];
16073
16204
  }
16205
+ /**
16206
+ * Checks if the event is part of the recurrence series.
16207
+ *
16208
+ * @param event - The event that will be checked.
16209
+ * @returns `true` if the event is an occurrence, an exception, or a master event. Otherwise, returns `false`.
16210
+ */
16074
16211
  isRecurring(event) {
16075
16212
  return isRecurring(event, this.fields);
16076
16213
  }
16214
+ /**
16215
+ * Checks if the event is a recurrence exception.
16216
+ *
16217
+ * @param event - The event that will be checked.
16218
+ * @returns `true` if the event is a unique event which belongs to a recurrence series. Otherwise, returns `false`.
16219
+ */
16077
16220
  isException(event) {
16078
16221
  return isException(event, this.fields);
16079
16222
  }