@progress/kendo-angular-scheduler 24.0.0-develop.4 → 24.0.0-develop.41

package/fesm2022/progress-kendo-angular-scheduler.mjs

@@ -7,7 +7,7 @@ import { Optional, Directive, Injectable, EventEmitter, Input, Inject, isDevMode
 import * as i1$1 from '@progress/kendo-angular-l10n';
 import { LocalizationService, L10N_PREFIX, RTL, ComponentMessages } from '@progress/kendo-angular-l10n';
 import * as i7 from '@progress/kendo-angular-common';
-import { getter, setter, hasObservers, isDocumentAvailable, isVisible as isVisible$1, scrollbarWidth, isChanged, Keys, ResizeSensorComponent, getLicenseMessage, shouldShowValidationUI, anyChanged, WatermarkOverlayComponent, guid, normalizeKeys, ResizeBatchService } from '@progress/kendo-angular-common';
+import { getter, setter, hasObservers, isDocumentAvailable, isVisible as isVisible$1, scrollbarWidth, isChanged, Keys, ResizeSensorComponent, getLicenseMessage, shouldShowValidationUI, anyChanged, WatermarkOverlayComponent, KENDO_WEBMCP_HOST, guid, normalizeKeys, ResizeBatchService } from '@progress/kendo-angular-common';
 import { isEqualDate, ZonedDate, toLocalDate, getDate, timezoneNames, Day, MS_PER_DAY as MS_PER_DAY$1, addDays, firstDayOfMonth, lastDayOfMonth, firstDayInWeek, addMonths, addWeeks, addYears } from '@progress/kendo-date-math';
 import { auditTime, buffer, filter, map, debounceTime, take, distinctUntilChanged, switchMap, tap } from 'rxjs/operators';
 import { validatePackage } from '@progress/kendo-licensing';
@@ -20,8 +20,8 @@ import * as i4 from '@progress/kendo-angular-intl';
 import { formatDate, CldrIntlService, DatePipe, parseDate } from '@progress/kendo-angular-intl';
 import { MultiSelectComponent, ItemTemplateDirective, TagTemplateDirective, DropDownListComponent, ComboBoxComponent } from '@progress/kendo-angular-dropdowns';
 import { NgStyle, NgTemplateOutlet, AsyncPipe, NgClass } from '@angular/common';
-import { saveIcon, cancelOutlineIcon, calendarIcon, caretAltRightIcon, caretAltLeftIcon, filePdfIcon, arrowRotateCwIcon, arrowsNoRepeatIcon, xIcon, moreHorizontalIcon, clockIcon, caretAltUpIcon, caretAltDownIcon } from '@progress/kendo-svg-icons';
-import { ButtonGroupComponent, ButtonComponent, Button } from '@progress/kendo-angular-buttons';
+import { saveIcon, cancelIcon, calendarIcon, chevronRightIcon, chevronLeftIcon, filePdfIcon, arrowRotateCwIcon, arrowsNoRepeatIcon, xIcon, moreHorizontalIcon, clockIcon, chevronUpIcon, chevronDownIcon } from '@progress/kendo-svg-icons';
+import { ButtonGroupComponent, ButtonComponent, Button, SegmentedControlComponent } from '@progress/kendo-angular-buttons';
 import { NumericTextBoxComponent, NumericTextBoxCustomMessagesComponent, FormFieldComponent, TextBoxDirective, CheckBoxDirective, TextAreaDirective } from '@progress/kendo-angular-inputs';
 import { parseRule, serializeRule, expand } from '@progress/kendo-recurrence';
 import { DatePickerComponent, DatePickerCustomMessagesComponent, DateTimePickerComponent, DateTimePickerCustomMessagesComponent, CalendarComponent, CalendarCustomMessagesComponent, MultiViewCalendarComponent, MonthCellTemplateDirective, CalendarDOMService, CenturyViewService, DecadeViewService, MonthViewService, YearViewService, NavigationService, TimePickerDOMService, HoursService, MinutesService, SecondsService, MillisecondsService, DayPeriodService } from '@progress/kendo-angular-dateinputs';
@@ -43,8 +43,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1776957489,
-    version: '24.0.0-develop.4',
+    publishDate: 1779255877,
+    version: '24.0.0-develop.41',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -2323,24 +2323,9 @@ class PDFExportEvent extends PreventableEvent {
  * @hidden
  */
 class LoadingComponent {
-    element;
-    renderer;
     hostClasses = true;
-    loading;
-    get display() {
-        return this.loading || this.force ? 'block' : 'none';
-    }
-    force;
-    constructor(element, renderer) {
-        this.element = element;
-        this.renderer = renderer;
-    }
-    toggle(value) {
-        this.force = value;
-        this.renderer.setStyle(this.element.nativeElement, 'display', this.display);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: LoadingComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: LoadingComponent, isStandalone: true, selector: "[kendoSchedulerLoading]", inputs: { loading: "loading" }, host: { properties: { "class.k-loading-mask": "this.hostClasses", "style.display": "this.display" } }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: LoadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: LoadingComponent, isStandalone: true, selector: "[kendoSchedulerLoading]", host: { properties: { "class.k-loading-mask": "this.hostClasses" } }, ngImport: i0, template: `
         <div class="k-loading-image"></div>
         <div class="k-loading-color"></div>
     `, isInline: true });
@@ -2355,14 +2340,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
     `,
                     standalone: true
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { hostClasses: [{
+        }], propDecorators: { hostClasses: [{
                 type: HostBinding,
                 args: ['class.k-loading-mask']
-            }], loading: [{
-                type: Input
-            }], display: [{
-                type: HostBinding,
-                args: ['style.display']
             }] } });
 
 /**
@@ -2420,9 +2400,10 @@ class FocusableDirective {
     }
     toggleFocus(value) {
         const element = this.element.nativeElement;
-        const isFooterButton = element.matches('.k-scheduler-navigation .k-button');
+        const isFooterButton = element.matches('[viewfooter] .k-button');
         const focusedClass = element.matches('.k-button-group .k-button') || isFooterButton ? 'k-focus' : 'k-selected';
-        const renderedEvents = this.element.nativeElement.ownerDocument.querySelectorAll('.k-event');
+        const schedulerElement = element.closest('.k-scheduler');
+        const renderedEvents = schedulerElement ? schedulerElement.querySelectorAll('.k-event') : [];
         const method = value ? 'addClass' : 'removeClass';
         this.renderer[method](element, focusedClass);
         if (renderedEvents.length > 0) {
@@ -2579,6 +2560,20 @@ const intersects = (startTime, endTime, periodStart, periodEnd) => (startTime <
 /** @hidden */
 const dateInRange = (date, start, end) => start.getTime() <= date.getTime() && date.getTime() <= end.getTime();
 /** @hidden */
+const getVerticalPaddingAndBorder = (element) => {
+    if (!isDocumentAvailable() || !element) {
+        return 0;
+    }
+    const styles = getComputedStyle(element);
+    const values = [
+        parseFloat(styles.paddingTop || '0'),
+        parseFloat(styles.paddingBottom || '0'),
+        parseFloat(styles.borderTopWidth || '0'),
+        parseFloat(styles.borderBottomWidth || '0')
+    ];
+    return values.reduce((total, value) => total + (Number.isFinite(value) ? value : 0), 0);
+};
+/** @hidden */
 const roundAllDayEnd = ({ start, end }) => {
     const startDate = start.stripTime();
     const endDate = end.stripTime();
@@ -4467,7 +4462,7 @@ class RecurrenceWeekdayRuleEditorComponent {
             </kendo-buttongroup>
           </div>
         </div>
-        `, isInline: true, dependencies: [{ kind: "component", type: LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional", "labelCssStyle", "labelCssClass"], exportAs: ["kendoLabel"] }, { kind: "component", type: ButtonGroupComponent, selector: "kendo-buttongroup", inputs: ["disabled", "selection", "width", "tabIndex", "navigable"], outputs: ["navigate"], exportAs: ["kendoButtonGroup"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
+        `, isInline: true, dependencies: [{ kind: "component", type: LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional", "labelCssStyle", "labelCssClass"], exportAs: ["kendoLabel"] }, { kind: "component", type: ButtonGroupComponent, selector: "kendo-buttongroup", inputs: ["disabled", "selection", "width", "tabIndex", "navigable"], outputs: ["navigate"], exportAs: ["kendoButtonGroup"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: RecurrenceWeekdayRuleEditorComponent, decorators: [{
             type: Component,
@@ -4727,7 +4722,7 @@ class RecurrenceFrequencyEditorComponent {
             </kendo-buttongroup>
           </div>
         </div>
-        `, isInline: true, dependencies: [{ kind: "component", type: LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional", "labelCssStyle", "labelCssClass"], exportAs: ["kendoLabel"] }, { kind: "component", type: ButtonGroupComponent, selector: "kendo-buttongroup", inputs: ["disabled", "selection", "width", "tabIndex", "navigable"], outputs: ["navigate"], exportAs: ["kendoButtonGroup"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
+        `, isInline: true, dependencies: [{ kind: "component", type: LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional", "labelCssStyle", "labelCssClass"], exportAs: ["kendoLabel"] }, { kind: "component", type: ButtonGroupComponent, selector: "kendo-buttongroup", inputs: ["disabled", "selection", "width", "tabIndex", "navigable"], outputs: ["navigate"], exportAs: ["kendoButtonGroup"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: RecurrenceFrequencyEditorComponent, decorators: [{
             type: Component,
@@ -5910,7 +5905,7 @@ class EditDialogComponent {
     editedEvent;
     isNew;
     saveIcon = saveIcon;
-    cancelIcon = cancelOutlineIcon;
+    cancelIcon = cancelIcon;
     subs;
     pendingNewEventData;
     constructor(ngZone, editService, localization, changeDetector, element, focusService, intl) {
@@ -6302,14 +6297,14 @@ class EditDialogComponent {
               >{{ textFor('save') }}</button>
               <button
                 kendoButton
-                icon="cancel-outline"
+                icon="cancel"
                 [svgIcon]="cancelIcon"
                 (click)="onCancel($event)"
               >{{ textFor('cancel') }}</button>
             </kendo-dialog-actions>
           </kendo-dialog>
         }
-        `, isInline: true, dependencies: [{ kind: "component", type: DialogComponent, selector: "kendo-dialog", inputs: ["actions", "actionsLayout", "autoFocusedElement", "closable", "title", "width", "minWidth", "maxWidth", "height", "minHeight", "maxHeight", "animation", "themeColor"], outputs: ["action", "close"], exportAs: ["kendoDialog"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: FormFieldComponent, selector: "kendo-formfield", inputs: ["showHints", "orientation", "showErrors", "colSpan"] }, { kind: "component", type: LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional", "labelCssStyle", "labelCssClass"], exportAs: ["kendoLabel"] }, { kind: "directive", type: TextBoxDirective, selector: "input[kendoTextBox]", inputs: ["value"] }, { kind: "component", type: SchedulerDateTimePickerComponent, selector: "kendo-scheduler-datetime-picker", inputs: ["isAllDay"], outputs: ["valueChange"] }, { kind: "directive", type: CheckBoxDirective, selector: "input[kendoCheckBox]", inputs: ["size", "rounded"] }, { kind: "directive", type: LabelDirective, selector: "label[for]", inputs: ["for", "labelClass"] }, { kind: "component", type: TimeZoneEditorComponent, selector: "kendo-timezone-editor", inputs: ["width"], outputs: ["valueChange"] }, { kind: "component", type: RecurrenceEditorComponent, selector: "kendo-recurrence-editor", inputs: ["start", "timezone", "weekStart", "repeatEveryOptions", "endAfterOptions", "repeatOnOptions", "endOnOptions"], outputs: ["valueChange"], exportAs: ["kendoRecurrenceEditor"] }, { kind: "directive", type: TextAreaDirective, selector: "textarea[kendoTextArea]", inputs: ["autoSize", "value"], outputs: ["valueChange"] }, { kind: "component", type: MultipleResourceEditorComponent, selector: "kendo-multiple-resource-editor" }, { kind: "component", type: SingleResourceEditorComponent, selector: "kendo-single-resource-editor" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DialogActionsComponent, selector: "kendo-dialog-actions", inputs: ["actions", "layout"], outputs: ["action"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
+        `, isInline: true, dependencies: [{ kind: "component", type: DialogComponent, selector: "kendo-dialog", inputs: ["actions", "actionsLayout", "autoFocusedElement", "closable", "title", "width", "minWidth", "maxWidth", "height", "minHeight", "maxHeight", "animation"], outputs: ["action", "close"], exportAs: ["kendoDialog"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: FormFieldComponent, selector: "kendo-formfield", inputs: ["showHints", "orientation", "showErrors", "colSpan"] }, { kind: "component", type: LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional", "labelCssStyle", "labelCssClass"], exportAs: ["kendoLabel"] }, { kind: "directive", type: TextBoxDirective, selector: "input[kendoTextBox]", inputs: ["value"] }, { kind: "component", type: SchedulerDateTimePickerComponent, selector: "kendo-scheduler-datetime-picker", inputs: ["isAllDay"], outputs: ["valueChange"] }, { kind: "directive", type: CheckBoxDirective, selector: "input[kendoCheckBox]", inputs: ["size", "rounded"] }, { kind: "directive", type: LabelDirective, selector: "label[for]", inputs: ["for", "labelClass"] }, { kind: "component", type: TimeZoneEditorComponent, selector: "kendo-timezone-editor", inputs: ["width"], outputs: ["valueChange"] }, { kind: "component", type: RecurrenceEditorComponent, selector: "kendo-recurrence-editor", inputs: ["start", "timezone", "weekStart", "repeatEveryOptions", "endAfterOptions", "repeatOnOptions", "endOnOptions"], outputs: ["valueChange"], exportAs: ["kendoRecurrenceEditor"] }, { kind: "directive", type: TextAreaDirective, selector: "textarea[kendoTextArea]", inputs: ["autoSize", "value"], outputs: ["valueChange"] }, { kind: "component", type: MultipleResourceEditorComponent, selector: "kendo-multiple-resource-editor" }, { kind: "component", type: SingleResourceEditorComponent, selector: "kendo-single-resource-editor" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DialogActionsComponent, selector: "kendo-dialog-actions", inputs: ["actions", "layout"], outputs: ["action"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: EditDialogComponent, decorators: [{
             type: Component,
@@ -6506,7 +6501,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
               >{{ textFor('save') }}</button>
               <button
                 kendoButton
-                icon="cancel-outline"
+                icon="cancel"
                 [svgIcon]="cancelIcon"
                 (click)="onCancel($event)"
               >{{ textFor('cancel') }}</button>
@@ -6536,6 +6531,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                 type: Input
             }] } });
 
+const EMPTY_VIEWS = [];
 /**
  * A toolbar component that contains controls for switching views
  * ([see example](https://www.telerik.com/kendo-angular-ui/components/scheduler/toolbar#including-the-built-in-components)).
@@ -6576,7 +6572,26 @@ class ToolbarViewSelectorComponent {
     get selectView() {
         return this.localization.get('selectView');
     }
+    /**
+     * @hidden
+     */
+    get viewItems() {
+        const views = Array.from(this.ctx.views ?? EMPTY_VIEWS);
+        if (!this.areSameViews(views) || this.cachedViewItems === null) {
+            this.cachedViews = views;
+            this.cachedViewItems = views.map(view => ({ text: view.title }));
+        }
+        return this.cachedViewItems;
+    }
+    /**
+     * @hidden
+     */
+    get selectedViewIndex() {
+        return Array.from(this.ctx.views ?? EMPTY_VIEWS).indexOf(this.ctx.selectedView);
+    }
     detachDomEvents;
+    cachedViews = null;
+    cachedViewItems = null;
     constructor(service, localization) {
         this.service = service;
         this.localization = localization;
@@ -6597,11 +6612,20 @@ class ToolbarViewSelectorComponent {
             });
         }
     }
+    /**
+     * @hidden
+     */
+    onViewChange(index) {
+        const view = Array.from(this.ctx.views ?? EMPTY_VIEWS)[index];
+        if (view) {
+            this.select(view);
+        }
+    }
     /**
      * @hidden
      */
     onChange(e) {
-        const view = this.ctx.views.find(view => view.name === e.target.value);
+        const view = Array.from(this.ctx.views ?? EMPTY_VIEWS).find(view => view.name === e.target.value);
         if (view) {
             this.select(view);
         }
@@ -6612,6 +6636,15 @@ class ToolbarViewSelectorComponent {
     isSelected(view) {
         return this.ctx.selectedView === view;
     }
+    areSameViews(views) {
+        if (this.cachedViews === views) {
+            return true;
+        }
+        if (this.cachedViews?.length !== views.length) {
+            return false;
+        }
+        return this.cachedViews.every((view, index) => view === views[index]);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ToolbarViewSelectorComponent, deps: [{ token: ToolbarService }, { token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: ToolbarViewSelectorComponent, isStandalone: true, selector: "[kendoSchedulerToolbarViewSelector]", inputs: { toolbarWidth: "toolbarWidth", responsiveBreakpoint: "responsiveBreakpoint" }, ngImport: i0, template: `
         @if (ctx.views?.length > 1 && toolbarWidth <= responsiveBreakpoint) {
@@ -6632,26 +6665,16 @@ class ToolbarViewSelectorComponent {
           </select>
         }
         @if (toolbarWidth > responsiveBreakpoint) {
-          <span
-            class="k-toolbar-button-group k-scheduler-views k-button-group"
-            role="group"
-            >
-            @for (view of ctx.views; track view) {
-              <button kendoButton
-                type="button"
-                [selected]="isSelected(view)"
-                [attr.aria-pressed]="isSelected(view)"
-                (click)="select(view)"
-                [kendoSchedulerFocusIndex]="0"
-                containerType="toolbar">
-                <span class="k-button-text">
-                  {{ view.title }}
-                </span>
-              </button>
-            }
-          </span>
+          <kendo-segmented-control
+            class="k-scheduler-views"
+            [items]="viewItems"
+            [selected]="selectedViewIndex"
+            (selectedChange)="onViewChange($event)"
+            [kendoSchedulerFocusIndex]="0"
+            containerType="toolbar">
+          </kendo-segmented-control>
         }
-        `, isInline: true, dependencies: [{ kind: "directive", type: FocusableDirective, selector: "[kendoSchedulerFocusIndex]", inputs: ["kendoSchedulerFocusIndex", "containerType"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
+        `, isInline: true, dependencies: [{ kind: "directive", type: FocusableDirective, selector: "[kendoSchedulerFocusIndex]", inputs: ["kendoSchedulerFocusIndex", "containerType"] }, { kind: "component", type: SegmentedControlComponent, selector: "kendo-segmented-control", inputs: ["items", "layoutMode", "size", "selected"], outputs: ["selectedChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ToolbarViewSelectorComponent, decorators: [{
             type: Component,
@@ -6676,28 +6699,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
           </select>
         }
         @if (toolbarWidth > responsiveBreakpoint) {
-          <span
-            class="k-toolbar-button-group k-scheduler-views k-button-group"
-            role="group"
-            >
-            @for (view of ctx.views; track view) {
-              <button kendoButton
-                type="button"
-                [selected]="isSelected(view)"
-                [attr.aria-pressed]="isSelected(view)"
-                (click)="select(view)"
-                [kendoSchedulerFocusIndex]="0"
-                containerType="toolbar">
-                <span class="k-button-text">
-                  {{ view.title }}
-                </span>
-              </button>
-            }
-          </span>
+          <kendo-segmented-control
+            class="k-scheduler-views"
+            [items]="viewItems"
+            [selected]="selectedViewIndex"
+            (selectedChange)="onViewChange($event)"
+            [kendoSchedulerFocusIndex]="0"
+            containerType="toolbar">
+          </kendo-segmented-control>
         }
         `,
                     standalone: true,
-                    imports: [FocusableDirective, ButtonComponent]
+                    imports: [FocusableDirective, SegmentedControlComponent]
                 }]
         }], ctorParameters: () => [{ type: ToolbarService }, { type: i1$1.LocalizationService }], propDecorators: { toolbarWidth: [{
                 type: Input
@@ -6705,7 +6718,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                 type: Input
             }] } });
 
-const iconsMap = { caretAltLeftIcon, caretAltRightIcon, calendarIcon };
+const iconsMap = { chevronLeftIcon, chevronRightIcon, calendarIcon };
 /**
  * A toolbar component that contains controls for date navigation
  * ([see example](https://www.telerik.com/kendo-angular-ui/components/scheduler/toolbar#including-the-built-in-components)).
@@ -6734,7 +6747,6 @@ class ToolbarNavigationComponent {
             calendar.focus();
         }
     }
-    hostClass = true;
     /**
      * @hidden
      */
@@ -6908,19 +6920,19 @@ class ToolbarNavigationComponent {
         this.cd.detectChanges();
     }
     get arrowIcons() {
-        return !this.localization.rtl ? ['caret-alt-left', 'caret-alt-right'] : ['caret-alt-right', 'caret-alt-left'];
+        return !this.localization.rtl ? ['chevron-left', 'chevron-right'] : ['chevron-right', 'chevron-left'];
     }
     get arrowSVGIcons() {
-        return !this.localization.rtl ? ['caretAltLeftIcon', 'caretAltRightIcon'] : ['caretAltRightIcon', 'caretAltLeftIcon'];
+        return !this.localization.rtl ? ['chevronLeftIcon', 'chevronRightIcon'] : ['chevronRightIcon', 'chevronLeftIcon'];
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ToolbarNavigationComponent, deps: [{ token: i1$2.PopupService }, { token: ToolbarService }, { token: i1$1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: ViewContextService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: ToolbarNavigationComponent, isStandalone: true, selector: "[kendoSchedulerToolbarNavigation]", inputs: { min: "min", max: "max", activeView: "activeView", bottomView: "bottomView" }, host: { properties: { "class.k-toolbar-group": "this.hostClass" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: ToolbarNavigationComponent, isStandalone: true, selector: "[kendoSchedulerToolbarNavigation]", inputs: { min: "min", max: "max", activeView: "activeView", bottomView: "bottomView" }, providers: [
             PopupService
         ], viewQueries: [{ propertyName: "calendar", first: true, predicate: ["calendar"], descendants: true }], ngImport: i0, template: `
-        <span class="k-scheduler-navigation k-button-group" role="group">
+        <span class="k-button-group k-toolbar-button-group k-scheduler-navigation" role="group">
             <button kendoButton
+                class="k-group-start"
                 (click)="todayClick()"
-                class="k-nav-today"
                 [attr.title]="todayText"
                 [kendoSchedulerFocusIndex]="0"
                 containerType="toolbar">
@@ -6928,7 +6940,6 @@ class ToolbarNavigationComponent {
             </button>
             <button kendoButton
                 (click)="prevClick()"
-                class="k-nav-prev"
                 [icon]="arrowIcons[0]"
                 [svgIcon]="svgIcon(arrowSVGIcons[0])"
                 [attr.title]="previousText"
@@ -6937,9 +6948,9 @@ class ToolbarNavigationComponent {
                 containerType="toolbar">
             </button>
             <button kendoButton
+                class="k-group-end"
                 (click)="nextClick()"
                 type="button"
-                class="k-nav-next"
                 [icon]="arrowIcons[1]"
                 [svgIcon]="svgIcon(arrowSVGIcons[1])"
                 [attr.title]="nextText"
@@ -6961,7 +6972,7 @@ class ToolbarNavigationComponent {
             (keydown.enter)="toggleSelectedDate({ nativeElement: anchor.element }, template)"
             (keydown.alt.arrowdown)="toggleSelectedDate({ nativeElement: anchor.element }, template)"
             role="button"
-            class="k-nav-current"
+            class="k-nav-current k-toolbar-button"
             [attr.aria-live]="'polite'"
             [kendoSchedulerFocusIndex]="0"
             containerType="toolbar">
@@ -6981,7 +6992,7 @@ class ToolbarNavigationComponent {
                 </kendo-calendar-messages>
             </kendo-calendar>
         </ng-template>
-    `, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: FocusableDirective, selector: "[kendoSchedulerFocusIndex]", inputs: ["kendoSchedulerFocusIndex", "containerType"] }, { kind: "component", type: CalendarComponent, selector: "kendo-calendar", inputs: ["showOtherMonthDays", "id", "focusedDate", "min", "max", "rangeValidation", "weekDaysFormat", "footer", "selection", "allowReverse", "value", "disabled", "tabindex", "tabIndex", "disabledDates", "navigation", "activeView", "bottomView", "topView", "type", "animateNavigation", "weekNumber", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "headerTemplate", "footerTemplate", "navigationItemTemplate", "size", "activeRangeEnd"], outputs: ["closePopup", "activeViewChange", "navigate", "activeViewDateChange", "blur", "focus", "valueChange"], exportAs: ["kendo-calendar"] }, { kind: "component", type: CalendarCustomMessagesComponent, selector: "kendo-calendar-messages" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: FocusableDirective, selector: "[kendoSchedulerFocusIndex]", inputs: ["kendoSchedulerFocusIndex", "containerType"] }, { kind: "component", type: CalendarComponent, selector: "kendo-calendar", inputs: ["showOtherMonthDays", "id", "focusedDate", "min", "max", "rangeValidation", "weekDaysFormat", "footer", "selection", "allowReverse", "value", "disabled", "tabindex", "tabIndex", "disabledDates", "navigation", "activeView", "bottomView", "topView", "type", "animateNavigation", "weekNumber", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "headerTemplate", "footerTemplate", "navigationItemTemplate", "size", "activeRangeEnd"], outputs: ["closePopup", "activeViewChange", "navigate", "activeViewDateChange", "blur", "focus", "valueChange"], exportAs: ["kendo-calendar"] }, { kind: "component", type: CalendarCustomMessagesComponent, selector: "kendo-calendar-messages" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ToolbarNavigationComponent, decorators: [{
             type: Component,
@@ -6992,10 +7003,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                         PopupService
                     ],
                     template: `
-        <span class="k-scheduler-navigation k-button-group" role="group">
+        <span class="k-button-group k-toolbar-button-group k-scheduler-navigation" role="group">
             <button kendoButton
+                class="k-group-start"
                 (click)="todayClick()"
-                class="k-nav-today"
                 [attr.title]="todayText"
                 [kendoSchedulerFocusIndex]="0"
                 containerType="toolbar">
@@ -7003,7 +7014,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
             </button>
             <button kendoButton
                 (click)="prevClick()"
-                class="k-nav-prev"
                 [icon]="arrowIcons[0]"
                 [svgIcon]="svgIcon(arrowSVGIcons[0])"
                 [attr.title]="previousText"
@@ -7012,9 +7022,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                 containerType="toolbar">
             </button>
             <button kendoButton
+                class="k-group-end"
                 (click)="nextClick()"
                 type="button"
-                class="k-nav-next"
                 [icon]="arrowIcons[1]"
                 [svgIcon]="svgIcon(arrowSVGIcons[1])"
                 [attr.title]="nextText"
@@ -7036,7 +7046,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
             (keydown.enter)="toggleSelectedDate({ nativeElement: anchor.element }, template)"
             (keydown.alt.arrowdown)="toggleSelectedDate({ nativeElement: anchor.element }, template)"
             role="button"
-            class="k-nav-current"
+            class="k-nav-current k-toolbar-button"
             [attr.aria-live]="'polite'"
             [kendoSchedulerFocusIndex]="0"
             containerType="toolbar">
@@ -7063,9 +7073,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
         }], ctorParameters: () => [{ type: i1$2.PopupService }, { type: ToolbarService }, { type: i1$1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: ViewContextService }], propDecorators: { calendar: [{
                 type: ViewChild,
                 args: ['calendar', { static: false }]
-            }], hostClass: [{
-                type: HostBinding,
-                args: ['class.k-toolbar-group']
             }], min: [{
                 type: Input
             }], max: [{
@@ -8267,10 +8274,6 @@ class SchedulerComponent {
      * @hidden
      */
     confirmationDialogContainerRef;
-    /**
-     * @hidden
-     */
-    loadingComponent;
     /**
      * @hidden
      */
@@ -8333,6 +8336,10 @@ class SchedulerComponent {
     get viewToolbar() {
         return this.viewState?.toolbarVisibilityByView.get(this.selectedView);
     }
+    /**
+     * @hidden
+     */
+    pdfLoading = false;
     direction;
     subs;
     viewIndex = 0;
@@ -8476,7 +8483,8 @@ class SchedulerComponent {
             }
         }));
         this.subs.add(this.pdfService.done.subscribe(() => {
-            this.loadingComponent.toggle(false);
+            this.pdfLoading = false;
+            this.changeDetector.markForCheck();
         }));
         this.subs.add(this.localization.changes.subscribe(({ rtl }) => {
             this.rtl = rtl;
@@ -8624,7 +8632,8 @@ class SchedulerComponent {
      * Saves the current view as PDF.
      */
     saveAsPDF() {
-        this.loadingComponent.toggle(true);
+        this.pdfLoading = true;
+        this.changeDetector.markForCheck();
         this.zone.runOutsideAngular(() => {
             // wait a tick in order for the loading element style to be updated by the browser.
             // if the export is synchronous, the browser will not update the element before the export is finished.
@@ -8901,11 +8910,15 @@ class SchedulerComponent {
                 provide: L10N_PREFIX,
                 useValue: 'kendo.scheduler'
             },
+            {
+                provide: KENDO_WEBMCP_HOST,
+                useExisting: forwardRef(() => SchedulerComponent)
+            },
             ToolbarService,
             ViewContextService,
             ViewStateService,
-            PDFService
-        ], queries: [{ propertyName: "editDialogTemplate", first: true, predicate: EditDialogTemplateDirective, descendants: true }, { propertyName: "toolbarTemplate", first: true, predicate: ToolbarTemplateDirective, descendants: true }, { propertyName: "views", predicate: SchedulerView }, { propertyName: "allDayEventTemplate", predicate: AllDayEventTemplateDirective }, { propertyName: "eventTemplate", predicate: EventTemplateDirective }, { propertyName: "timeSlotTemplate", predicate: TimeSlotTemplateDirective }, { propertyName: "minorTimeHeaderTemplate", predicate: MinorTimeHeaderTemplateDirective }, { propertyName: "majorTimeHeaderTemplate", predicate: MajorTimeHeaderTemplateDirective }, { propertyName: "monthDaySlotTemplate", predicate: MonthDaySlotTemplateDirective }, { propertyName: "multiWeekDaySlotTemplate", predicate: MultiWeekDaySlotTemplateDirective }, { propertyName: "dateHeaderTemplate", predicate: DateHeaderTemplateDirective }, { propertyName: "allDaySlotTemplate", predicate: AllDaySlotTemplateDirective }, { propertyName: "groupHeaderTemplate", predicate: GroupHeaderTemplateDirective }, { propertyName: "agendaDateTemplate", predicate: AgendaDateTemplateDirective }, { propertyName: "agendaTimeTemplate", predicate: AgendaTimeTemplateDirective }], viewQueries: [{ propertyName: "resizeSensor", first: true, predicate: ResizeSensorComponent, descendants: true, static: true }, { propertyName: "confirmationDialogContainerRef", first: true, predicate: ["confirmationDialogContainer"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "loadingComponent", first: true, predicate: LoadingComponent, descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: `
+            PDFService,
+        ], queries: [{ propertyName: "editDialogTemplate", first: true, predicate: EditDialogTemplateDirective, descendants: true }, { propertyName: "toolbarTemplate", first: true, predicate: ToolbarTemplateDirective, descendants: true }, { propertyName: "views", predicate: SchedulerView }, { propertyName: "allDayEventTemplate", predicate: AllDayEventTemplateDirective }, { propertyName: "eventTemplate", predicate: EventTemplateDirective }, { propertyName: "timeSlotTemplate", predicate: TimeSlotTemplateDirective }, { propertyName: "minorTimeHeaderTemplate", predicate: MinorTimeHeaderTemplateDirective }, { propertyName: "majorTimeHeaderTemplate", predicate: MajorTimeHeaderTemplateDirective }, { propertyName: "monthDaySlotTemplate", predicate: MonthDaySlotTemplateDirective }, { propertyName: "multiWeekDaySlotTemplate", predicate: MultiWeekDaySlotTemplateDirective }, { propertyName: "dateHeaderTemplate", predicate: DateHeaderTemplateDirective }, { propertyName: "allDaySlotTemplate", predicate: AllDaySlotTemplateDirective }, { propertyName: "groupHeaderTemplate", predicate: GroupHeaderTemplateDirective }, { propertyName: "agendaDateTemplate", predicate: AgendaDateTemplateDirective }, { propertyName: "agendaTimeTemplate", predicate: AgendaTimeTemplateDirective }], viewQueries: [{ propertyName: "resizeSensor", first: true, predicate: ResizeSensorComponent, descendants: true, static: true }, { propertyName: "confirmationDialogContainerRef", first: true, predicate: ["confirmationDialogContainer"], descendants: true, read: ViewContainerRef, static: true }], usesOnChanges: true, ngImport: i0, template: `
         <ng-container kendoSchedulerLocalizedMessages
           i18n-allEvents="kendo.scheduler.allEvents|The All events text displayed in the timeline views when there is no vertical grouping."
           allEvents="All events"
@@ -9236,13 +9249,14 @@ class SchedulerComponent {
 
         <kendo-resize-sensor (resize)="onResize()"></kendo-resize-sensor>
 
-        <div [loading]="loading" kendoSchedulerLoading>
-        </div>
+        @if (loading || pdfLoading) {
+          <div kendoSchedulerLoading></div>
+        }
 
         @if (showLicenseWatermark) {
           <div kendoWatermarkOverlay [licenseMessage]="licenseMessage"></div>
         }
-        `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "[kendoSchedulerLocalizedMessages]" }, { kind: "component", type: ToolbarComponent, selector: "kendo-scheduler-toolbar", inputs: ["selectedView", "views", "dateRange", "selectedDate", "template", "min", "max"], outputs: ["navigate", "toolbarWidthChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: EditDialogComponent, selector: "kendo-scheduler-edit-dialog", inputs: ["resources", "timezone", "weekStart", "fields", "editTemplate"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: LoadingComponent, selector: "[kendoSchedulerLoading]", inputs: ["loading"] }, { kind: "component", type: WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay], kendo-watermark-overlay", inputs: ["licenseMessage"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "[kendoSchedulerLocalizedMessages]" }, { kind: "component", type: ToolbarComponent, selector: "kendo-scheduler-toolbar", inputs: ["selectedView", "views", "dateRange", "selectedDate", "template", "min", "max"], outputs: ["navigate", "toolbarWidthChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: EditDialogComponent, selector: "kendo-scheduler-edit-dialog", inputs: ["resources", "timezone", "weekStart", "fields", "editTemplate"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: LoadingComponent, selector: "[kendoSchedulerLoading]" }, { kind: "component", type: WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay], kendo-watermark-overlay", inputs: ["licenseMessage"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: SchedulerComponent, decorators: [{
             type: Component,
@@ -9264,10 +9278,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                             provide: L10N_PREFIX,
                             useValue: 'kendo.scheduler'
                         },
+                        {
+                            provide: KENDO_WEBMCP_HOST,
+                            useExisting: forwardRef(() => SchedulerComponent)
+                        },
                         ToolbarService,
                         ViewContextService,
                         ViewStateService,
-                        PDFService
+                        PDFService,
                     ],
                     template: `
         <ng-container kendoSchedulerLocalizedMessages
@@ -9600,8 +9618,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
 
         <kendo-resize-sensor (resize)="onResize()"></kendo-resize-sensor>
 
-        <div [loading]="loading" kendoSchedulerLoading>
-        </div>
+        @if (loading || pdfLoading) {
+          <div kendoSchedulerLoading></div>
+        }
 
         @if (showLicenseWatermark) {
           <div kendoWatermarkOverlay [licenseMessage]="licenseMessage"></div>
@@ -9755,9 +9774,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
             }], confirmationDialogContainerRef: [{
                 type: ViewChild,
                 args: ["confirmationDialogContainer", { read: ViewContainerRef, static: true }]
-            }], loadingComponent: [{
-                type: ViewChild,
-                args: [LoadingComponent, { static: true }]
             }], allDayEventTemplate: [{
                 type: ContentChildren,
                 args: [AllDayEventTemplateDirective]
@@ -11133,8 +11149,8 @@ class AgendaListComponent {
     agendaTimeTemplate;
     agendaDateTemplate;
     editable;
-    caretAltLeftIcon = caretAltLeftIcon;
-    caretAltRightIcon = caretAltRightIcon;
+    chevronLeftIcon = chevronLeftIcon;
+    chevronRightIcon = chevronRightIcon;
     constructor(intlService, localization) {
         this.intlService = intlService;
         this.localization = localization;
@@ -11201,10 +11217,10 @@ class AgendaListComponent {
         }
     }
     get arrowIcons() {
-        return !this.localization.rtl ? ['caret-alt-left', 'caret-alt-right'] : ['caret-alt-right', 'caret-alt-left'];
+        return !this.localization.rtl ? ['chevron-left', 'chevron-right'] : ['chevron-right', 'chevron-left'];
     }
     get arrowSVGIcons() {
-        return !this.localization.rtl ? [this.caretAltLeftIcon, this.caretAltRightIcon] : [this.caretAltRightIcon, this.caretAltLeftIcon];
+        return !this.localization.rtl ? [this.chevronLeftIcon, this.chevronRightIcon] : [this.chevronRightIcon, this.chevronLeftIcon];
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: AgendaListComponent, deps: [{ token: i4.IntlService }, { token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: AgendaListComponent, isStandalone: true, selector: "[kendoSchedulerAgendaList]", inputs: { tasks: "tasks", eventTemplate: "eventTemplate", slotClass: "slotClass", eventClass: "eventClass", eventStyles: "eventStyles", agendaTimeTemplate: "agendaTimeTemplate", agendaDateTemplate: "agendaDateTemplate", editable: "editable" }, host: { properties: { "class.k-scheduler-content": "this.classes" } }, ngImport: i0, template: `
@@ -11387,9 +11403,9 @@ class AgendaHeaderComponent {
                 @for (resource of resources; track resource) {
                   <th class="k-scheduler-groupcolumn k-first" role="columnheader"><span class="k-sr-only">{{ resourceMessage }}</span></th>
                 }
-                <th class="k-scheduler-cell k-heading-cell k-scheduler-datecolumn" role="columnheader">{{ dateMessage }}</th>
-                <th class="k-scheduler-cell k-heading-cell k-scheduler-timecolumn" role="columnheader">{{ timeMessage }}</th>
-                <th class="k-scheduler-cell k-heading-cell" role="columnheader">{{ eventMessage }}</th>
+                <th class="k-scheduler-cell k-scheduler-datecolumn" role="columnheader">{{ dateMessage }}</th>
+                <th class="k-scheduler-cell k-scheduler-timecolumn" role="columnheader">{{ timeMessage }}</th>
+                <th class="k-scheduler-cell" role="columnheader">{{ eventMessage }}</th>
               </tr>
             </tbody>
           </table>
@@ -11409,9 +11425,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                 @for (resource of resources; track resource) {
                   <th class="k-scheduler-groupcolumn k-first" role="columnheader"><span class="k-sr-only">{{ resourceMessage }}</span></th>
                 }
-                <th class="k-scheduler-cell k-heading-cell k-scheduler-datecolumn" role="columnheader">{{ dateMessage }}</th>
-                <th class="k-scheduler-cell k-heading-cell k-scheduler-timecolumn" role="columnheader">{{ timeMessage }}</th>
-                <th class="k-scheduler-cell k-heading-cell" role="columnheader">{{ eventMessage }}</th>
+                <th class="k-scheduler-cell k-scheduler-datecolumn" role="columnheader">{{ dateMessage }}</th>
+                <th class="k-scheduler-cell k-scheduler-timecolumn" role="columnheader">{{ timeMessage }}</th>
+                <th class="k-scheduler-cell" role="columnheader">{{ eventMessage }}</th>
               </tr>
             </tbody>
           </table>
@@ -12644,8 +12660,10 @@ class BaseView {
     contentTable;
     times;
     timesHeader;
+    timesHeaderTable;
     timesTable;
     headerWrap;
+    headerTable;
     hintContainer;
     get eventTemplateRef() {
         return this.eventTemplate || (this.schedulerEventTemplate || {}).templateRef;
@@ -13646,7 +13664,7 @@ class BaseView {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: BaseView, deps: [{ token: ViewContextService }, { token: ViewStateService }, { token: i4.IntlService }, { token: BaseSlotService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: PDFService }, { token: i1$1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i7.ScrollbarService }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.20", type: BaseView, isStandalone: true, inputs: { eventTemplate: "eventTemplate", groupHeaderTemplate: "groupHeaderTemplate", selectedDateFormat: "selectedDateFormat", selectedShortDateFormat: "selectedShortDateFormat", eventHeight: "eventHeight", showToolbar: "showToolbar", showFooter: "showFooter", slotClass: "slotClass", eventClass: "eventClass", eventStyles: "eventStyles", weekStart: "weekStart" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true }, { propertyName: "header", first: true, predicate: ["header"], descendants: true }, { propertyName: "contentTable", first: true, predicate: ["contentTable"], descendants: true }, { propertyName: "times", first: true, predicate: ["times"], descendants: true }, { propertyName: "timesHeader", first: true, predicate: ["timesHeader"], descendants: true }, { propertyName: "timesTable", first: true, predicate: ["timesTable"], descendants: true }, { propertyName: "headerWrap", first: true, predicate: ["headerWrap"], descendants: true }, { propertyName: "hintContainer", first: true, predicate: ["hintContainer"], descendants: true }], usesOnChanges: true, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.20", type: BaseView, isStandalone: true, inputs: { eventTemplate: "eventTemplate", groupHeaderTemplate: "groupHeaderTemplate", selectedDateFormat: "selectedDateFormat", selectedShortDateFormat: "selectedShortDateFormat", eventHeight: "eventHeight", showToolbar: "showToolbar", showFooter: "showFooter", slotClass: "slotClass", eventClass: "eventClass", eventStyles: "eventStyles", weekStart: "weekStart" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true }, { propertyName: "header", first: true, predicate: ["header"], descendants: true }, { propertyName: "contentTable", first: true, predicate: ["contentTable"], descendants: true }, { propertyName: "times", first: true, predicate: ["times"], descendants: true }, { propertyName: "timesHeader", first: true, predicate: ["timesHeader"], descendants: true }, { propertyName: "timesHeaderTable", first: true, predicate: ["timesHeaderTable"], descendants: true }, { propertyName: "timesTable", first: true, predicate: ["timesTable"], descendants: true }, { propertyName: "headerWrap", first: true, predicate: ["headerWrap"], descendants: true }, { propertyName: "headerTable", first: true, predicate: ["headerTable"], descendants: true }, { propertyName: "hintContainer", first: true, predicate: ["hintContainer"], descendants: true }], usesOnChanges: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: BaseView, decorators: [{
             type: Directive
@@ -13687,12 +13705,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
             }], timesHeader: [{
                 type: ViewChild,
                 args: ['timesHeader', { static: false }]
+            }], timesHeaderTable: [{
+                type: ViewChild,
+                args: ['timesHeaderTable', { static: false }]
             }], timesTable: [{
                 type: ViewChild,
                 args: ['timesTable', { static: false }]
             }], headerWrap: [{
                 type: ViewChild,
                 args: ['headerWrap', { static: false }]
+            }], headerTable: [{
+                type: ViewChild,
+                args: ['headerTable', { static: false }]
             }], hintContainer: [{
                 type: ViewChild,
                 args: ['hintContainer', { static: false }]
@@ -13737,8 +13761,8 @@ class BaseViewItem {
     get removable() {
         return this.editable && this.editable.remove !== false;
     }
-    caretAltLeftIcon = caretAltLeftIcon;
-    caretAltRightIcon = caretAltRightIcon;
+    chevronLeftIcon = chevronLeftIcon;
+    chevronRightIcon = chevronRightIcon;
     rect;
     subs = new Subscription();
     constructor(slotService, localization, focusService, element, renderer, intl) {
@@ -13833,10 +13857,10 @@ class BaseViewItem {
         this.subs.unsubscribe();
     }
     get arrowIcons() {
-        return !this.localization.rtl ? ['caret-alt-left', 'caret-alt-right'] : ['caret-alt-right', 'caret-alt-left'];
+        return !this.localization.rtl ? ['chevron-left', 'chevron-right'] : ['chevron-right', 'chevron-left'];
     }
     get arrowSVGIcons() {
-        return !this.localization.rtl ? [this.caretAltLeftIcon, this.caretAltRightIcon] : [this.caretAltRightIcon, this.caretAltLeftIcon];
+        return !this.localization.rtl ? [this.chevronLeftIcon, this.chevronRightIcon] : [this.chevronRightIcon, this.chevronLeftIcon];
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: BaseViewItem, deps: [{ token: BaseSlotService }, { token: i1$1.LocalizationService }, { token: FocusService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i4.IntlService }], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.20", type: BaseViewItem, isStandalone: true, inputs: { item: "item", resourceIndex: "resourceIndex", rangeIndex: "rangeIndex", index: "index", eventTemplate: "eventTemplate", editable: "editable", dragHint: "dragHint", resources: "resources" }, host: { properties: { "class.k-event": "this.className", "attr.data-task-index": "this.taskIndex", "style.touch-action": "this.touchAction", "attr.aria-label": "this.eventTitle" } }, usesOnChanges: true, ngImport: i0 });
@@ -13877,8 +13901,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
  * @hidden
  */
 class MonthViewItemComponent extends BaseViewItem {
-    caretAltLeftIcon = caretAltLeftIcon;
-    caretAltRightIcon = caretAltRightIcon;
+    chevronLeftIcon = chevronLeftIcon;
+    chevronRightIcon = chevronRightIcon;
     arrowRotateCwIcon = arrowRotateCwIcon;
     arrowsNoRepeatIcon = arrowsNoRepeatIcon;
     xIcon = xIcon;
@@ -14460,12 +14484,15 @@ class MonthViewRendererComponent extends BaseView {
         super.ngOnChanges(changes);
     }
     ngOnInit() {
-        this.viewState.layoutEnd.subscribe(() => {
+        this.subs.add(this.viewState.layoutEnd.subscribe(() => {
             if (this.adaptiveSlotHeight) {
                 this.slotService.invalidate();
                 this.reflow();
             }
-        });
+            else {
+                this.syncTables();
+            }
+        }));
         super.ngOnInit();
     }
     ngAfterViewInit() {
@@ -14552,6 +14579,24 @@ class MonthViewRendererComponent extends BaseView {
         }
         this.syncTables();
     }
+    syncTables() {
+        super.syncTables();
+        if (!this.timesTable) {
+            return;
+        }
+        const timesRows = this.timesTable.nativeElement.rows;
+        if (!timesRows.length) {
+            return;
+        }
+        const contentRows = this.contentTable.nativeElement.rows;
+        const rowsCount = Math.min(timesRows.length, contentRows.length);
+        for (let index = 0; index < rowsCount; index++) {
+            const height = `${contentRows[index].offsetHeight}px`;
+            if (timesRows[index].style.height !== height) {
+                this.renderer.setStyle(timesRows[index], 'height', height);
+            }
+        }
+    }
     onClick(e, eventType = e.type) {
         if (eventType === 'click') {
             const eventSlot = closestInScope(e.target, node => node.hasAttribute('data-slot-index'), this.element.nativeElement);
@@ -14674,7 +14719,7 @@ class MonthViewRendererComponent extends BaseView {
                       <table class="k-scheduler-table" aria-hidden="true">
                         <tbody>
                           <tr>
-                            <th class="k-scheduler-cell k-heading-cell"></th>
+                            <th class="k-scheduler-cell"></th>
                           </tr>
                         </tbody>
                       </table>
@@ -14692,7 +14737,7 @@ class MonthViewRendererComponent extends BaseView {
                           <tr>
                             @for (item of horizontalResources | resourceIterator : resourceIndex; track itemIndex($index, item)) {
                               <th
-                                class="k-scheduler-cell k-heading-cell" [attr.colspan]="horizontalColspan(resourceIndex)">
+                                class="k-scheduler-cell" [attr.colspan]="horizontalColspan(resourceIndex)">
                                 @if (!groupHeaderTemplateRef) {
                                   {{ getField(item, resource.textField) }}
                                 }
@@ -14706,7 +14751,7 @@ class MonthViewRendererComponent extends BaseView {
                         <tr>
                           @for (resource of horizontalResources | resourceIterator; track itemIndex($index, resource)) {
                             @for (day of weeks[0]; track itemIndex($index, day)) {
-                              <th class="k-scheduler-cell k-heading-cell">
+                              <th class="k-scheduler-cell">
                                 {{ day | kendoDate: 'EEEE' }}
                               </th>
                             }
@@ -14728,7 +14773,7 @@ class MonthViewRendererComponent extends BaseView {
                           <tr>
                             @for (resource of verticalResources; track itemIndex(resourceIndex, resource); let resourceIndex = $index) {
                               @if (verticalItem(leafIndex, resourceIndex)) {
-                                <th [attr.rowspan]="verticalRowspan(resourceIndex)" class="k-slot-cell k-heading-cell" [ngClass]="{ 'k-last-resource': resourceIndex === verticalResources.length - 1 }">
+                                <th [attr.rowspan]="verticalRowspan(resourceIndex)" class="k-slot-cell" [ngClass]="{ 'k-last-resource': resourceIndex === verticalResources.length - 1 }">
                                   @if (!groupHeaderTemplateRef) {
                                     {{ getField(verticalItem(leafIndex, resourceIndex), resource.textField) }}
                                   }
@@ -14739,12 +14784,12 @@ class MonthViewRendererComponent extends BaseView {
                                 </th>
                               }
                             }
-                            <th class="k-slot-cell k-heading-cell k-empty-slot">
+                            <th class="k-slot-cell k-empty-slot">
                             </th>
                           </tr>
                           @for (index of (numberOfWeeks - 1) | repeat; track itemIndex($index, index)) {
                             <tr>
-                              <th class="k-slot-cell k-heading-cell k-empty-slot"></th>
+                              <th class="k-slot-cell k-empty-slot"></th>
                             </tr>
                           }
                         }
@@ -14865,7 +14910,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                       <table class="k-scheduler-table" aria-hidden="true">
                         <tbody>
                           <tr>
-                            <th class="k-scheduler-cell k-heading-cell"></th>
+                            <th class="k-scheduler-cell"></th>
                           </tr>
                         </tbody>
                       </table>
@@ -14883,7 +14928,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                           <tr>
                             @for (item of horizontalResources | resourceIterator : resourceIndex; track itemIndex($index, item)) {
                               <th
-                                class="k-scheduler-cell k-heading-cell" [attr.colspan]="horizontalColspan(resourceIndex)">
+                                class="k-scheduler-cell" [attr.colspan]="horizontalColspan(resourceIndex)">
                                 @if (!groupHeaderTemplateRef) {
                                   {{ getField(item, resource.textField) }}
                                 }
@@ -14897,7 +14942,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                         <tr>
                           @for (resource of horizontalResources | resourceIterator; track itemIndex($index, resource)) {
                             @for (day of weeks[0]; track itemIndex($index, day)) {
-                              <th class="k-scheduler-cell k-heading-cell">
+                              <th class="k-scheduler-cell">
                                 {{ day | kendoDate: 'EEEE' }}
                               </th>
                             }
@@ -14919,7 +14964,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                           <tr>
                             @for (resource of verticalResources; track itemIndex(resourceIndex, resource); let resourceIndex = $index) {
                               @if (verticalItem(leafIndex, resourceIndex)) {
-                                <th [attr.rowspan]="verticalRowspan(resourceIndex)" class="k-slot-cell k-heading-cell" [ngClass]="{ 'k-last-resource': resourceIndex === verticalResources.length - 1 }">
+                                <th [attr.rowspan]="verticalRowspan(resourceIndex)" class="k-slot-cell" [ngClass]="{ 'k-last-resource': resourceIndex === verticalResources.length - 1 }">
                                   @if (!groupHeaderTemplateRef) {
                                     {{ getField(verticalItem(leafIndex, resourceIndex), resource.textField) }}
                                   }
@@ -14930,12 +14975,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                                 </th>
                               }
                             }
-                            <th class="k-slot-cell k-heading-cell k-empty-slot">
+                            <th class="k-slot-cell k-empty-slot">
                             </th>
                           </tr>
                           @for (index of (numberOfWeeks - 1) | repeat; track itemIndex($index, index)) {
                             <tr>
-                              <th class="k-slot-cell k-heading-cell k-empty-slot"></th>
+                              <th class="k-slot-cell k-empty-slot"></th>
                             </tr>
                           }
                         }
@@ -15727,7 +15772,7 @@ class ViewFooterComponent {
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ViewFooterComponent, deps: [{ token: ViewStateService }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: ViewFooterComponent, isStandalone: true, selector: "[viewFooter]", inputs: { items: "items" }, outputs: { itemClick: "itemClick" }, host: { properties: { "class.k-scheduler-footer": "this.hostClasses", "class.k-toolbar": "this.hostClasses", "attr.role": "this.toolbarRole", "style.justify-content": "this.inlineJustifyContentStyle" } }, ngImport: i0, template: `
-        <span class="k-scheduler-navigation">
+        <span>
           @for (item of items; track item) {
             <button
               type="button"
@@ -15742,14 +15787,14 @@ class ViewFooterComponent {
             </button>
           }
         </span>
-        `, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: FocusableDirective, selector: "[kendoSchedulerFocusIndex]", inputs: ["kendoSchedulerFocusIndex", "containerType"] }] });
+        `, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: FocusableDirective, selector: "[kendoSchedulerFocusIndex]", inputs: ["kendoSchedulerFocusIndex", "containerType"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ViewFooterComponent, decorators: [{
             type: Component,
             args: [{
                     selector: '[viewFooter]',
                     template: `
-        <span class="k-scheduler-navigation">
+        <span>
           @for (item of items; track item) {
             <button
               type="button"
@@ -15793,7 +15838,7 @@ class WorkHoursFooterDirective {
     footer;
     localization;
     showWorkHours = false;
-    footerItems = [{ cssClass: 'k-scheduler-fullday', fontIcon: 'clock', svgIcon: clockIcon, text: '' }];
+    footerItems = [{ cssClass: 'k-scheduler-fullday k-toolbar-button', fontIcon: 'clock', svgIcon: clockIcon, text: '' }];
     constructor(footer, localization) {
         this.footer = footer;
         this.localization = localization;
@@ -16605,10 +16650,10 @@ function createTimeSlots(intlService, { showWorkHours, startTime, endTime, workD
  */
 class DayTimeViewItemComponent extends BaseViewItem {
     intlService;
-    caretAltLeftIcon = caretAltLeftIcon;
-    caretAltRightIcon = caretAltRightIcon;
-    caretAltUpIcon = caretAltUpIcon;
-    caretAltDownIcon = caretAltDownIcon;
+    chevronLeftIcon = chevronLeftIcon;
+    chevronRightIcon = chevronRightIcon;
+    chevronUpIcon = chevronUpIcon;
+    chevronDownIcon = chevronDownIcon;
     arrowRotateCwIcon = arrowRotateCwIcon;
     arrowsNoRepeatIcon = arrowsNoRepeatIcon;
     xIcon = xIcon;
@@ -16678,13 +16723,13 @@ class DayTimeViewItemComponent extends BaseViewItem {
         
         @if (item.tail && vertical) {
           <span class="k-event-top-actions">
-            <kendo-icon-wrapper name="caret-alt-up" [svgIcon]="caretAltUpIcon"></kendo-icon-wrapper>
+            <kendo-icon-wrapper name="chevron-up" [svgIcon]="chevronUpIcon"></kendo-icon-wrapper>
           </span>
         }
         
         @if (item.head && vertical) {
           <span class="k-event-bottom-actions">
-            <kendo-icon-wrapper name="caret-alt-down" [svgIcon]="caretAltDownIcon"></kendo-icon-wrapper>
+            <kendo-icon-wrapper name="chevron-down" [svgIcon]="chevronDownIcon"></kendo-icon-wrapper>
           </span>
         }
         
@@ -16762,13 +16807,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
         
         @if (item.tail && vertical) {
           <span class="k-event-top-actions">
-            <kendo-icon-wrapper name="caret-alt-up" [svgIcon]="caretAltUpIcon"></kendo-icon-wrapper>
+            <kendo-icon-wrapper name="chevron-up" [svgIcon]="chevronUpIcon"></kendo-icon-wrapper>
           </span>
         }
         
         @if (item.head && vertical) {
           <span class="k-event-bottom-actions">
-            <kendo-icon-wrapper name="caret-alt-down" [svgIcon]="caretAltDownIcon"></kendo-icon-wrapper>
+            <kendo-icon-wrapper name="chevron-down" [svgIcon]="chevronDownIcon"></kendo-icon-wrapper>
           </span>
         }
         
@@ -16898,9 +16943,11 @@ class DayTimeViewComponent extends BaseView {
     }
     timeSlotClass(slot, date, resourceIndex) {
         if (this.slotClass) {
+            const start = dateWithTime(date, slot.start);
+            const end = dateWithTime(date, slot.end);
             return this.slotClass({
-                start: dateWithTime(date, slot.start),
-                end: dateWithTime(date, slot.end),
+                start: start,
+                end: end < start ? addDays(end, 1) : end,
                 resources: this.resourcesByIndex(resourceIndex),
                 isAllDay: false
             });
@@ -17134,6 +17181,49 @@ class DayTimeViewComponent extends BaseView {
             this.workDayEndTime = toInvariantTime(endDate);
         }
     }
+    syncDateHeaderHeight() {
+        if (!isDocumentAvailable()) {
+            return;
+        }
+        const dateRowIndex = this.horizontalResources.length + 1;
+        const timesTable = this.timesHeaderTable?.nativeElement;
+        const headerTable = this.headerTable?.nativeElement;
+        const timesHeaderDateCell = timesTable?.rows[dateRowIndex - 1]?.cells[0];
+        const headerDateCell = headerTable?.rows[dateRowIndex - 1]?.cells[0];
+        const shouldSkipDateHeightSync = !timesHeaderDateCell || !headerDateCell || !this.dateHeaderTemplateRef;
+        if (shouldSkipDateHeightSync) {
+            if (timesHeaderDateCell && !this.dateHeaderTemplateRef) {
+                this.renderer.removeStyle(timesHeaderDateCell, 'height');
+            }
+            return;
+        }
+        this.syncCellHeight(headerDateCell, timesHeaderDateCell);
+    }
+    syncGroupHeaderHeight() {
+        if (!isDocumentAvailable()) {
+            return;
+        }
+        const dateRowIndex = this.horizontalResources.length + 1;
+        const timesTable = this.timesHeaderTable?.nativeElement;
+        const headerTable = this.headerTable?.nativeElement;
+        for (let rowIndex = 1; rowIndex < dateRowIndex; rowIndex++) {
+            const timesHeaderCell = timesTable?.rows[rowIndex - 1]?.cells[0];
+            if (!timesHeaderCell) {
+                continue;
+            }
+            // Remove height when template is absent or grouping is vertical
+            if (!this.groupHeaderTemplateRef || this.verticalResources.length) {
+                this.renderer.removeStyle(timesHeaderCell, 'height');
+                continue;
+            }
+            const headerCell = headerTable?.rows[rowIndex - 1]?.cells[0];
+            if (!headerCell) {
+                this.renderer.removeStyle(timesHeaderCell, 'height');
+                continue;
+            }
+            this.syncCellHeight(headerCell, timesHeaderCell);
+        }
+    }
     slotByPosition(x, y, container) {
         const isDaySlot = container ? hasClasses(container.parentNode, 'k-scheduler-header-wrap') : y < 0;
         return this.slotService.slotByPosition(x, y, isDaySlot, Boolean(this.verticalResources.length));
@@ -17149,6 +17239,14 @@ class DayTimeViewComponent extends BaseView {
         }
         return fields;
     }
+    syncCellHeight(sourceCell, targetCell) {
+        const height = sourceCell.getBoundingClientRect().height;
+        const currentHeight = targetCell.getBoundingClientRect().height;
+        const paddingAndBorder = getVerticalPaddingAndBorder(targetCell);
+        if (height !== currentHeight) {
+            this.renderer.setStyle(targetCell, 'height', `${height - paddingAndBorder}px`);
+        }
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: DayTimeViewComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: ViewContextService }, { token: ViewStateService }, { token: i4.IntlService }, { token: DayTimeSlotService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: PDFService }, { token: i1$1.LocalizationService }, { token: i7.ScrollbarService }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: DayTimeViewComponent, isStandalone: true, selector: "kendo-day-time-view", inputs: { timeSlotTemplate: "timeSlotTemplate", dateHeaderTemplate: "dateHeaderTemplate", majorTimeHeaderTemplate: "majorTimeHeaderTemplate", minorTimeHeaderTemplate: "minorTimeHeaderTemplate", 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 });
 }
@@ -17462,6 +17560,11 @@ class MultiDayViewRendererComponent extends DayTimeViewComponent {
         slotService.layoutTimes({ fill: this.slotFill });
         this.syncTables();
     }
+    syncTables() {
+        super.syncTables();
+        this.syncGroupHeaderHeight();
+        this.syncDateHeaderHeight();
+    }
     dragHorizontal(slot) {
         return slot.isDaySlot;
     }
@@ -17566,19 +17669,19 @@ class MultiDayViewRendererComponent extends DayTimeViewComponent {
             <tr class="k-scheduler-head">
               <td>
                 <div class="k-scheduler-times" #timesHeader>
-                  <table class="k-scheduler-table" aria-hidden="true">
+                  <table class="k-scheduler-table" #timesHeaderTable aria-hidden="true">
                     <tbody>
                       @for (resource of horizontalResources; track itemIndex($index, resource)) {
                         <tr>
-                          <th class="k-scheduler-cell k-heading-cell"></th>
+                          <th class="k-scheduler-cell"></th>
                         </tr>
                       }
                       <tr [style.height]="'auto'">
-                        <th class="k-scheduler-cell k-heading-cell"></th>
+                        <th class="k-scheduler-cell"></th>
                       </tr>
                       @if (allDaySlot && !verticalResources.length) {
                         <tr>
-                          <th class="k-scheduler-times-all-day k-scheduler-cell k-heading-cell" #allDayCell>{{ allDayMessage }}</th>
+                          <th class="k-scheduler-times-all-day k-scheduler-cell" #allDayCell>{{ allDayMessage }}</th>
                         </tr>
                       }
                     </tbody>
@@ -17588,13 +17691,13 @@ class MultiDayViewRendererComponent extends DayTimeViewComponent {
               <td>
                 <div class="k-scheduler-header" #header>
                   <div class="k-scheduler-header-wrap" #headerWrap>
-                    <table class="k-scheduler-table" aria-hidden="true">
+                    <table class="k-scheduler-table" #headerTable aria-hidden="true">
                       <tbody>
                         @for (resource of horizontalResources; track itemIndex(resourceIndex, resource); let resourceIndex = $index) {
                           <tr>
                             @for (item of horizontalResources | resourceIterator : resourceIndex; track itemIndex($index, item)) {
                               <th
-                                class="k-scheduler-cell k-heading-cell" [attr.colspan]="horizontalColspan(resourceIndex)">
+                                class="k-scheduler-cell" [attr.colspan]="horizontalColspan(resourceIndex)">
                                 @if (!groupHeaderTemplateRef) {
                                   {{ getField(item, resource.textField) }}
                                 }
@@ -17608,7 +17711,7 @@ class MultiDayViewRendererComponent extends DayTimeViewComponent {
                         <tr class="k-scheduler-date-group">
                           @for (resource of horizontalResources | resourceIterator; track itemIndex($index, resource)) {
                             @for (slot of daySlots; track itemIndex(index, slot); let index = $index) {
-                              <th class="k-scheduler-cell k-heading-cell">
+                              <th class="k-scheduler-cell">
                                 @if (!dateHeaderTemplateRef) {
                                   <span class="k-link k-nav-day" [attr.data-dayslot-index]="index">{{ slot.start | kendoDate: dateFormat }}</span>
                                 }
@@ -17720,7 +17823,7 @@ class MultiDayViewRendererComponent extends DayTimeViewComponent {
                           <tr>
                             @for (resource of verticalResources; track itemIndex(resourceIndex, resource); let resourceIndex = $index) {
                               @if (verticalItem(leafIndex, resourceIndex)) {
-                                <th [attr.rowspan]="verticalRowspan(resourceIndex)" class="k-scheduler-cell k-slot-cell k-heading-cell">
+                                <th [attr.rowspan]="verticalRowspan(resourceIndex)" class="k-scheduler-cell k-slot-cell">
                                   @if (!groupHeaderTemplateRef) {
                                     {{ getField(verticalItem(leafIndex, resourceIndex), resource.textField) }}
                                   }
@@ -17732,14 +17835,14 @@ class MultiDayViewRendererComponent extends DayTimeViewComponent {
                               }
                             }
                             @if (allDaySlot) {
-                              <th class="k-scheduler-times-all-day k-scheduler-cell k-heading-cell" #allDayCell>{{ allDayMessage }}</th>
+                              <th class="k-scheduler-times-all-day k-scheduler-cell" #allDayCell>{{ allDayMessage }}</th>
                             }
                           </tr>
                         }
                         @for (slot of timeSlots; track itemIndex(timeSlotIndex, slot); let timeSlotIndex = $index) {
                           <tr>
                             @if (slot.isMajor) {
-                              <th [ngClass]="{ 'k-slot-cell': slotDivisions === 1 }" class="k-scheduler-cell k-heading-cell">
+                              <th [ngClass]="{ 'k-slot-cell': slotDivisions === 1 }" class="k-scheduler-cell">
                                 @if (!majorTimeHeaderTemplateRef) {
                                   {{ slot.start | kendoDate: 't' }}
                                 }
@@ -17749,7 +17852,7 @@ class MultiDayViewRendererComponent extends DayTimeViewComponent {
                               </th>
                             }
                             @if (!slot.isMajor) {
-                              <th [ngClass]="{ 'k-slot-cell': timeSlotIndex % slotDivisions === slotDivisions - 1 }" class="k-scheduler-cell k-heading-cell">
+                              <th [ngClass]="{ 'k-slot-cell': timeSlotIndex % slotDivisions === slotDivisions - 1 }" class="k-scheduler-cell">
                                 @if (minorTimeHeaderTemplateRef) {
                                   <ng-container [ngTemplateOutlet]="minorTimeHeaderTemplateRef" [ngTemplateOutletContext]="{ date: slot.start }">
                                   </ng-container>
@@ -17929,19 +18032,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
             <tr class="k-scheduler-head">
               <td>
                 <div class="k-scheduler-times" #timesHeader>
-                  <table class="k-scheduler-table" aria-hidden="true">
+                  <table class="k-scheduler-table" #timesHeaderTable aria-hidden="true">
                     <tbody>
                       @for (resource of horizontalResources; track itemIndex($index, resource)) {
                         <tr>
-                          <th class="k-scheduler-cell k-heading-cell"></th>
+                          <th class="k-scheduler-cell"></th>
                         </tr>
                       }
                       <tr [style.height]="'auto'">
-                        <th class="k-scheduler-cell k-heading-cell"></th>
+                        <th class="k-scheduler-cell"></th>
                       </tr>
                       @if (allDaySlot && !verticalResources.length) {
                         <tr>
-                          <th class="k-scheduler-times-all-day k-scheduler-cell k-heading-cell" #allDayCell>{{ allDayMessage }}</th>
+                          <th class="k-scheduler-times-all-day k-scheduler-cell" #allDayCell>{{ allDayMessage }}</th>
                         </tr>
                       }
                     </tbody>
@@ -17951,13 +18054,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
               <td>
                 <div class="k-scheduler-header" #header>
                   <div class="k-scheduler-header-wrap" #headerWrap>
-                    <table class="k-scheduler-table" aria-hidden="true">
+                    <table class="k-scheduler-table" #headerTable aria-hidden="true">
                       <tbody>
                         @for (resource of horizontalResources; track itemIndex(resourceIndex, resource); let resourceIndex = $index) {
                           <tr>
                             @for (item of horizontalResources | resourceIterator : resourceIndex; track itemIndex($index, item)) {
                               <th
-                                class="k-scheduler-cell k-heading-cell" [attr.colspan]="horizontalColspan(resourceIndex)">
+                                class="k-scheduler-cell" [attr.colspan]="horizontalColspan(resourceIndex)">
                                 @if (!groupHeaderTemplateRef) {
                                   {{ getField(item, resource.textField) }}
                                 }
@@ -17971,7 +18074,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                         <tr class="k-scheduler-date-group">
                           @for (resource of horizontalResources | resourceIterator; track itemIndex($index, resource)) {
                             @for (slot of daySlots; track itemIndex(index, slot); let index = $index) {
-                              <th class="k-scheduler-cell k-heading-cell">
+                              <th class="k-scheduler-cell">
                                 @if (!dateHeaderTemplateRef) {
                                   <span class="k-link k-nav-day" [attr.data-dayslot-index]="index">{{ slot.start | kendoDate: dateFormat }}</span>
                                 }
@@ -18083,7 +18186,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                           <tr>
                             @for (resource of verticalResources; track itemIndex(resourceIndex, resource); let resourceIndex = $index) {
                               @if (verticalItem(leafIndex, resourceIndex)) {
-                                <th [attr.rowspan]="verticalRowspan(resourceIndex)" class="k-scheduler-cell k-slot-cell k-heading-cell">
+                                <th [attr.rowspan]="verticalRowspan(resourceIndex)" class="k-scheduler-cell k-slot-cell">
                                   @if (!groupHeaderTemplateRef) {
                                     {{ getField(verticalItem(leafIndex, resourceIndex), resource.textField) }}
                                   }
@@ -18095,14 +18198,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                               }
                             }
                             @if (allDaySlot) {
-                              <th class="k-scheduler-times-all-day k-scheduler-cell k-heading-cell" #allDayCell>{{ allDayMessage }}</th>
+                              <th class="k-scheduler-times-all-day k-scheduler-cell" #allDayCell>{{ allDayMessage }}</th>
                             }
                           </tr>
                         }
                         @for (slot of timeSlots; track itemIndex(timeSlotIndex, slot); let timeSlotIndex = $index) {
                           <tr>
                             @if (slot.isMajor) {
-                              <th [ngClass]="{ 'k-slot-cell': slotDivisions === 1 }" class="k-scheduler-cell k-heading-cell">
+                              <th [ngClass]="{ 'k-slot-cell': slotDivisions === 1 }" class="k-scheduler-cell">
                                 @if (!majorTimeHeaderTemplateRef) {
                                   {{ slot.start | kendoDate: 't' }}
                                 }
@@ -18112,7 +18215,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                               </th>
                             }
                             @if (!slot.isMajor) {
-                              <th [ngClass]="{ 'k-slot-cell': timeSlotIndex % slotDivisions === slotDivisions - 1 }" class="k-scheduler-cell k-heading-cell">
+                              <th [ngClass]="{ 'k-slot-cell': timeSlotIndex % slotDivisions === slotDivisions - 1 }" class="k-scheduler-cell">
                                 @if (minorTimeHeaderTemplateRef) {
                                   <ng-container [ngTemplateOutlet]="minorTimeHeaderTemplateRef" [ngTemplateOutletContext]="{ date: slot.start }">
                                   </ng-container>
@@ -18860,7 +18963,9 @@ class WorkWeekViewComponent extends WeekViewComponent {
      * @hidden
      */
     getStartDate(selectedDate) {
-        return firstDayInWeek(getDate(selectedDate), this.viewWorkWeekStart);
+        const weekStartDate = firstDayInWeek(getDate(selectedDate), this.viewWeekStart);
+        const workWeekOffset = (DAYS_IN_WEEK + this.viewWorkWeekStart - this.viewWeekStart) % DAYS_IN_WEEK;
+        return getDate(addDays(weekStartDate, workWeekOffset));
     }
     /**
      * @hidden
@@ -19065,7 +19170,6 @@ class TimelineMultiDayViewComponent extends DayTimeViewComponent {
     get classNames() {
         return `k-scheduler-${this.viewName}-view`;
     }
-    headerTable;
     get contentWidthPercentage() {
         const expectedWidth = this.columnWidth * this.slotsCount;
         const percentage = (expectedWidth / this.contentWidth) * 100;
@@ -19145,6 +19249,11 @@ class TimelineMultiDayViewComponent extends DayTimeViewComponent {
     handleScroll() {
         this.headerWrap.nativeElement.scrollLeft = this.content.nativeElement.scrollLeft;
     }
+    syncTables() {
+        super.syncTables();
+        this.syncGroupHeaderHeight();
+        this.syncDateHeaderHeight();
+    }
     createTasks(items, dateRange) {
         return createTasks$1(dateRange.start, dateRange.end, items, this.hiddenDays || []);
     }
@@ -19175,19 +19284,19 @@ class TimelineMultiDayViewComponent extends DayTimeViewComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TimelineMultiDayViewComponent, deps: [{ token: i1$1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: ViewContextService }, { token: ViewStateService }, { token: i4.IntlService }, { token: DayTimeSlotService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: PDFService }, { token: i7.ScrollbarService }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: TimelineMultiDayViewComponent, isStandalone: true, selector: "timeline-multi-day-view", inputs: { hiddenDays: "hiddenDays", name: "name", columnWidth: "columnWidth", viewName: "viewName" }, providers: [
             DayTimeSlotService
-        ], viewQueries: [{ propertyName: "headerTable", first: true, predicate: ["headerTable"], descendants: true }, { propertyName: "verticalResourceRows", predicate: ["verticalResourceRows"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
+        ], viewQueries: [{ propertyName: "verticalResourceRows", predicate: ["verticalResourceRows"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
         <table class="k-scheduler-layout" [ngClass]="classNames">
           <tbody>
             <tr class="k-scheduler-head">
               <td>
                 <div class="k-scheduler-times" #timesHeader>
-                  <table class="k-scheduler-table" aria-hidden="true">
+                  <table class="k-scheduler-table" #timesHeaderTable aria-hidden="true">
                     <tbody>
-                      <tr><th class="k-scheduler-cell k-heading-cell"></th></tr>
-                      <tr><th class="k-slot-cell k-scheduler-cell k-heading-cell"></th></tr>
+                      <tr><th class="k-scheduler-cell"></th></tr>
+                      <tr><th class="k-slot-cell k-scheduler-cell"></th></tr>
                       @for (resource of horizontalResources; track itemIndex($index, resource)) {
                         <tr>
-                          <th class="k-scheduler-cell k-heading-cell"></th>
+                          <th class="k-scheduler-cell"></th>
                         </tr>
                       }
                     </tbody>
@@ -19210,7 +19319,7 @@ class TimelineMultiDayViewComponent extends DayTimeViewComponent {
                           <tr>
                             @for (item of horizontalResources | resourceIterator : resourceIndex; track itemIndex($index, item)) {
                               <th
-                                class="k-slot-cell k-scheduler-cell k-heading-cell" [attr.colspan]="horizontalColspan(resourceIndex)">
+                                class="k-slot-cell k-scheduler-cell" [attr.colspan]="horizontalColspan(resourceIndex)">
                                 @if (!groupHeaderTemplateRef) {
                                   {{ getField(item, resource.textField) }}
                                 }
@@ -19225,7 +19334,7 @@ class TimelineMultiDayViewComponent extends DayTimeViewComponent {
                         <tr class="k-scheduler-date-group">
                           @for (resource of horizontalResources | resourceIterator; track itemIndex($index, resource)) {
                             @for (daySlot of daySlots; track itemIndex(index, daySlot); let index = $index) {
-                              <th [attr.colspan]="timeSlots.length" class="k-scheduler-cell k-heading-cell k-slot-cell">
+                              <th [attr.colspan]="timeSlots.length" class="k-scheduler-cell k-slot-cell">
                                 @if (!dateHeaderTemplateRef) {
                                   <span class="k-link k-nav-day" [attr.data-dayslot-index]="index">{{ daySlot.start | kendoDate: 'm'}}</span>
                                 }
@@ -19241,7 +19350,7 @@ class TimelineMultiDayViewComponent extends DayTimeViewComponent {
                             @for (daySlot of daySlots; track itemIndex(rangeIndex, daySlot); let rangeIndex = $index) {
                               @for (timeSlot of timeSlots; track itemIndex(index, timeSlot); let index = $index) {
                                 @if (timeSlot.isMajor) {
-                                  <th [attr.colspan]="timeColspan(index)" class="k-scheduler-cell k-heading-cell">
+                                  <th [attr.colspan]="timeColspan(index)" class="k-scheduler-cell">
                                     @if (!majorTimeHeaderTemplateRef) {
                                       {{ timeSlot.start | kendoDate: 't' }}
                                     }
@@ -19253,7 +19362,7 @@ class TimelineMultiDayViewComponent extends DayTimeViewComponent {
                                 @if (!timeSlot.isMajor && minorTimeHeaderTemplateRef) {
                                   <th
                                     [ngStyle]="{'border-left-color': 'transparent', 'border-right-color': 'transparent'}"
-                                    class="k-scheduler-cell k-heading-cell"
+                                    class="k-scheduler-cell"
                                     >
                                     <ng-container [ngTemplateOutlet]="minorTimeHeaderTemplateRef" [ngTemplateOutletContext]="{ date: timeSlot.start }">
                                     </ng-container>
@@ -19276,7 +19385,7 @@ class TimelineMultiDayViewComponent extends DayTimeViewComponent {
                     <tbody>
                       @if (!verticalResources.length) {
                         <tr>
-                          <th rowspan="1" #titleCell class="k-scheduler-cell k-heading-cell">
+                          <th rowspan="1" #titleCell class="k-scheduler-cell">
                             {{ allEventsMessage }}
                           </th>
                         </tr>
@@ -19286,7 +19395,7 @@ class TimelineMultiDayViewComponent extends DayTimeViewComponent {
                           <tr #verticalResourceRows>
                             @for (resource of verticalResources; track itemIndex(resourceIndex, resource); let resourceIndex = $index) {
                               @if (verticalItem(leafIndex, resourceIndex)) {
-                                <th [attr.rowspan]="verticalRowspan(resourceIndex)" class="k-slot-cell k-scheduler-cell k-heading-cell">
+                                <th [attr.rowspan]="verticalRowspan(resourceIndex)" class="k-slot-cell k-scheduler-cell">
                                   <div>
                                     @if (!groupHeaderTemplateRef) {
                                       {{ getField(verticalItem(leafIndex, resourceIndex), resource.textField) }}
@@ -19424,13 +19533,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
             <tr class="k-scheduler-head">
               <td>
                 <div class="k-scheduler-times" #timesHeader>
-                  <table class="k-scheduler-table" aria-hidden="true">
+                  <table class="k-scheduler-table" #timesHeaderTable aria-hidden="true">
                     <tbody>
-                      <tr><th class="k-scheduler-cell k-heading-cell"></th></tr>
-                      <tr><th class="k-slot-cell k-scheduler-cell k-heading-cell"></th></tr>
+                      <tr><th class="k-scheduler-cell"></th></tr>
+                      <tr><th class="k-slot-cell k-scheduler-cell"></th></tr>
                       @for (resource of horizontalResources; track itemIndex($index, resource)) {
                         <tr>
-                          <th class="k-scheduler-cell k-heading-cell"></th>
+                          <th class="k-scheduler-cell"></th>
                         </tr>
                       }
                     </tbody>
@@ -19453,7 +19562,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                           <tr>
                             @for (item of horizontalResources | resourceIterator : resourceIndex; track itemIndex($index, item)) {
                               <th
-                                class="k-slot-cell k-scheduler-cell k-heading-cell" [attr.colspan]="horizontalColspan(resourceIndex)">
+                                class="k-slot-cell k-scheduler-cell" [attr.colspan]="horizontalColspan(resourceIndex)">
                                 @if (!groupHeaderTemplateRef) {
                                   {{ getField(item, resource.textField) }}
                                 }
@@ -19468,7 +19577,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                         <tr class="k-scheduler-date-group">
                           @for (resource of horizontalResources | resourceIterator; track itemIndex($index, resource)) {
                             @for (daySlot of daySlots; track itemIndex(index, daySlot); let index = $index) {
-                              <th [attr.colspan]="timeSlots.length" class="k-scheduler-cell k-heading-cell k-slot-cell">
+                              <th [attr.colspan]="timeSlots.length" class="k-scheduler-cell k-slot-cell">
                                 @if (!dateHeaderTemplateRef) {
                                   <span class="k-link k-nav-day" [attr.data-dayslot-index]="index">{{ daySlot.start | kendoDate: 'm'}}</span>
                                 }
@@ -19484,7 +19593,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                             @for (daySlot of daySlots; track itemIndex(rangeIndex, daySlot); let rangeIndex = $index) {
                               @for (timeSlot of timeSlots; track itemIndex(index, timeSlot); let index = $index) {
                                 @if (timeSlot.isMajor) {
-                                  <th [attr.colspan]="timeColspan(index)" class="k-scheduler-cell k-heading-cell">
+                                  <th [attr.colspan]="timeColspan(index)" class="k-scheduler-cell">
                                     @if (!majorTimeHeaderTemplateRef) {
                                       {{ timeSlot.start | kendoDate: 't' }}
                                     }
@@ -19496,7 +19605,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                                 @if (!timeSlot.isMajor && minorTimeHeaderTemplateRef) {
                                   <th
                                     [ngStyle]="{'border-left-color': 'transparent', 'border-right-color': 'transparent'}"
-                                    class="k-scheduler-cell k-heading-cell"
+                                    class="k-scheduler-cell"
                                     >
                                     <ng-container [ngTemplateOutlet]="minorTimeHeaderTemplateRef" [ngTemplateOutletContext]="{ date: timeSlot.start }">
                                     </ng-container>
@@ -19519,7 +19628,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                     <tbody>
                       @if (!verticalResources.length) {
                         <tr>
-                          <th rowspan="1" #titleCell class="k-scheduler-cell k-heading-cell">
+                          <th rowspan="1" #titleCell class="k-scheduler-cell">
                             {{ allEventsMessage }}
                           </th>
                         </tr>
@@ -19529,7 +19638,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                           <tr #verticalResourceRows>
                             @for (resource of verticalResources; track itemIndex(resourceIndex, resource); let resourceIndex = $index) {
                               @if (verticalItem(leafIndex, resourceIndex)) {
-                                <th [attr.rowspan]="verticalRowspan(resourceIndex)" class="k-slot-cell k-scheduler-cell k-heading-cell">
+                                <th [attr.rowspan]="verticalRowspan(resourceIndex)" class="k-slot-cell k-scheduler-cell">
                                   <div>
                                     @if (!groupHeaderTemplateRef) {
                                       {{ getField(verticalItem(leafIndex, resourceIndex), resource.textField) }}
@@ -19667,9 +19776,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
             }], verticalResourceRows: [{
                 type: ViewChildren,
                 args: ['verticalResourceRows']
-            }], headerTable: [{
-                type: ViewChild,
-                args: ['headerTable']
             }] } });
 
 /**
@@ -20276,16 +20382,16 @@ class YearViewInternalComponent extends BaseView {
     tooltip;
     get arrowIcons() {
         return !this.localization.rtl
-            ? ['caret-alt-left', 'caret-alt-right']
-            : ['caret-alt-right', 'caret-alt-left'];
+            ? ['chevron-left', 'chevron-right']
+            : ['chevron-right', 'chevron-left'];
     }
     get arrowSVGIcons() {
         return !this.localization.rtl
-            ? [this.caretAltLeftIcon, this.caretAltRightIcon]
-            : [this.caretAltRightIcon, this.caretAltLeftIcon];
+            ? [this.chevronLeftIcon, this.chevronRightIcon]
+            : [this.chevronRightIcon, this.chevronLeftIcon];
     }
-    caretAltLeftIcon = caretAltLeftIcon;
-    caretAltRightIcon = caretAltRightIcon;
+    chevronLeftIcon = chevronLeftIcon;
+    chevronRightIcon = chevronRightIcon;
     eventsPerSelectedDay = [];
     days = [];
     focusedDate;
@@ -20590,7 +20696,7 @@ class YearViewInternalComponent extends BaseView {
               </div>
             }
           </ng-template>
-        `, isInline: true, dependencies: [{ kind: "component", type: MultiViewCalendarComponent, selector: "kendo-multiviewcalendar", inputs: ["showOtherMonthDays", "showCalendarHeader", "size", "id", "focusedDate", "footer", "min", "max", "rangeValidation", "disabledDatesRangeValidation", "selection", "allowReverse", "value", "disabled", "tabindex", "tabIndex", "weekDaysFormat", "isActive", "disabledDates", "activeView", "bottomView", "topView", "showViewHeader", "animateNavigation", "weekNumber", "activeRangeEnd", "selectionRange", "views", "orientation", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "footerTemplate", "headerTitleTemplate", "headerTemplate"], outputs: ["activeViewChange", "navigate", "cellEnter", "cellLeave", "valueChange", "rangeSelectionChange", "blur", "focus", "focusCalendar", "onClosePopup", "onTabPress", "onShiftTabPress"], exportAs: ["kendo-multiviewcalendar"] }, { kind: "directive", type: TooltipDirective, selector: "[kendoTooltip]", inputs: ["filter", "position", "titleTemplate", "showOn", "showAfter", "callout", "closable", "offset", "tooltipWidth", "tooltipHeight", "tooltipClass", "tooltipContentClass", "collision", "closeTitle", "tooltipTemplate"], exportAs: ["kendoTooltip"] }, { kind: "directive", type: MonthCellTemplateDirective, selector: "[kendoCalendarMonthCellTemplate]" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
+        `, isInline: true, dependencies: [{ kind: "component", type: MultiViewCalendarComponent, selector: "kendo-multiviewcalendar", inputs: ["showOtherMonthDays", "showCalendarHeader", "size", "id", "focusedDate", "footer", "min", "max", "rangeValidation", "disabledDatesRangeValidation", "selection", "allowReverse", "value", "disabled", "tabindex", "tabIndex", "weekDaysFormat", "isActive", "disabledDates", "activeView", "bottomView", "topView", "showViewHeader", "animateNavigation", "weekNumber", "activeRangeEnd", "selectionRange", "views", "orientation", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "footerTemplate", "headerTitleTemplate", "headerTemplate"], outputs: ["activeViewChange", "navigate", "cellEnter", "cellLeave", "valueChange", "rangeSelectionChange", "blur", "focus", "focusCalendar", "onClosePopup", "onTabPress", "onShiftTabPress"], exportAs: ["kendo-multiviewcalendar"] }, { kind: "directive", type: TooltipDirective, selector: "[kendoTooltip]", inputs: ["filter", "position", "titleTemplate", "showOn", "showAfter", "callout", "closable", "offset", "tooltipWidth", "tooltipHeight", "tooltipClass", "themeColor", "tooltipContentClass", "collision", "closeTitle", "tooltipTemplate"], exportAs: ["kendoTooltip"] }, { kind: "directive", type: MonthCellTemplateDirective, selector: "[kendoCalendarMonthCellTemplate]" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: YearViewInternalComponent, decorators: [{
             type: Component,
@@ -21562,7 +21668,7 @@ class ShortcutsDirective {
     }
     isInToolbarTemplate(element) {
         const isInToolbar = element.closest('.k-scheduler-toolbar');
-        const isInBuiltInElement = element.closest('.k-toolbar-group') ||
+        const isInBuiltInElement = element.closest('[kendoschedulertoolbarnavigation]') ||
             element.closest('.k-scheduler-views') ||
             element.closest('.k-views-dropdown');
         return isInToolbar && !isInBuiltInElement;