@progress/kendo-angular-scheduler 11.0.0-develop.98 → 11.0.0

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

@@ -22,7 +22,7 @@ import * as i1$4 from '@progress/kendo-angular-intl';
 import { formatDate, IntlModule, IntlService, CldrIntlService, parseDate } from '@progress/kendo-angular-intl';
 import * as i1$2 from '@progress/kendo-angular-popup';
 import { PopupService, PopupModule } from '@progress/kendo-angular-popup';
-import { caretAltLeftIcon, caretAltRightIcon, calendarIcon } from '@progress/kendo-svg-icons';
+import { caretAltLeftIcon, caretAltRightIcon, calendarIcon, arrowRotateCwIcon, arrowsNoRepeatIcon, xIcon, moreHorizontalIcon, clockIcon, caretAltUpIcon, caretAltDownIcon } from '@progress/kendo-svg-icons';
 import * as i3 from '@progress/kendo-angular-buttons';
 import { Button, ButtonsModule } from '@progress/kendo-angular-buttons';
 import * as i11 from '@angular/common';
@@ -33,11 +33,11 @@ import { parseRule, serializeRule, expand } from '@progress/kendo-recurrence';
 import * as i13 from '@progress/kendo-angular-inputs';
 import { CheckBoxModule, TextAreaModule, NumericTextBoxModule, TextBoxModule } from '@progress/kendo-angular-inputs';
 import { orderBy, groupBy } from '@progress/kendo-data-query';
+import * as i4 from '@progress/kendo-angular-icons';
+import { IconsModule } from '@progress/kendo-angular-icons';
 import { Draggable } from '@progress/kendo-draggable';
 import { drawDOM, exportPDF } from '@progress/kendo-drawing';
 import { saveAs } from '@progress/kendo-file-saver';
-import * as i3$1 from '@progress/kendo-angular-icons';
-import { IconsModule } from '@progress/kendo-angular-icons';
 
 /**
  * @hidden
@@ -46,8 +46,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-scheduler',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1673460894,
-    version: '',
+    publishDate: 1674032472,
+    version: '11.0.0',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -2520,7 +2520,7 @@ ToolbarNavigationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
             <button kendoButton
                 (click)="prevClick()"
                 class="k-nav-prev"
-                icon="arrow-60-left"
+                icon="caret-alt-left"
                 [svgIcon]="svgIcon('caretAltLeftIcon')"
                 [attr.title]="previousText"
                 [attr.aria-label]="previousText"
@@ -2531,7 +2531,7 @@ ToolbarNavigationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
                 (click)="nextClick()"
                 type="button"
                 class="k-nav-next"
-                icon="arrow-60-right"
+                icon="caret-alt-right"
                 [svgIcon]="svgIcon('caretAltRightIcon')"
                 [attr.title]="nextText"
                 [attr.aria-label]="nextText"
@@ -2591,7 +2591,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             <button kendoButton
                 (click)="prevClick()"
                 class="k-nav-prev"
-                icon="arrow-60-left"
+                icon="caret-alt-left"
                 [svgIcon]="svgIcon('caretAltLeftIcon')"
                 [attr.title]="previousText"
                 [attr.aria-label]="previousText"
@@ -2602,7 +2602,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 (click)="nextClick()"
                 type="button"
                 class="k-nav-next"
-                icon="arrow-60-right"
+                icon="caret-alt-right"
                 [svgIcon]="svgIcon('caretAltRightIcon')"
                 [attr.title]="nextText"
                 [attr.aria-label]="nextText"
@@ -2836,7 +2836,7 @@ class ToolbarComponent {
     }
 }
 ToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ToolbarComponent, deps: [{ token: ToolbarService }], target: i0.ɵɵFactoryTarget.Component });
-ToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ToolbarComponent, selector: "kendo-scheduler-toolbar", inputs: { selectedView: "selectedView", views: "views", dateRange: "dateRange", selectedDate: "selectedDate", template: "template", min: "min", max: "max" }, outputs: { navigate: "navigate" }, host: { properties: { "class.k-scheduler-toolbar": "this.hostClasses", "class.k-toolbar": "this.hostClasses" } }, usesOnChanges: true, ngImport: i0, template: `
+ToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ToolbarComponent, selector: "kendo-scheduler-toolbar", inputs: { selectedView: "selectedView", views: "views", dateRange: "dateRange", selectedDate: "selectedDate", template: "template", min: "min", max: "max" }, outputs: { navigate: "navigate" }, host: { properties: { "class.k-scheduler-toolbar": "this.hostClasses", "class.k-toolbar": "this.hostClasses", "class.k-toolbar-md": "this.hostClasses" } }, usesOnChanges: true, ngImport: i0, template: `
         <ng-template
             *ngIf="template; else defaultTemplate"
             [ngTemplateOutlet]="template.templateRef"
@@ -2875,6 +2875,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             }, {
                 type: HostBinding,
                 args: ['class.k-toolbar']
+            }, {
+                type: HostBinding,
+                args: ['class.k-toolbar-md']
             }], selectedView: [{
                 type: Input
             }], views: [{
@@ -5520,7 +5523,7 @@ EditDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
                 <button kendoButton themeColor="primary" (click)="onSave($event)" [disabled]="!formGroup.valid">{{ textFor('save') }}</button>
             </kendo-dialog-actions>
         </kendo-dialog>
-    `, isInline: true, components: [{ type: i1.DialogComponent, selector: "kendo-dialog", inputs: ["actions", "actionsLayout", "autoFocusedElement", "title", "width", "minWidth", "maxWidth", "height", "minHeight", "maxHeight", "animation"], outputs: ["action", "close"], exportAs: ["kendoDialog"] }, { type: SchedulerDateTimePickerComponent, selector: "kendo-scheduler-datetime-picker", inputs: ["isAllDay"], outputs: ["valueChange"] }, { type: TimeZoneEditorComponent, selector: "kendo-timezone-editor", inputs: ["width"], outputs: ["valueChange"] }, { type: RecurrenceEditorComponent, selector: "kendo-recurrence-editor", inputs: ["start", "timezone", "weekStart", "repeatEveryOptions", "endAfterOptions", "repeatOnOptions", "endOnOptions"], outputs: ["valueChange"], exportAs: ["kendoRecurrenceEditor"] }, { type: MultipleResourceEditorComponent, selector: "kendo-multiple-resource-editor" }, { type: SingleResourceEditorComponent, selector: "kendo-single-resource-editor" }, { type: i1.DialogActionsComponent, selector: "kendo-dialog-actions", inputs: ["actions", "layout"], outputs: ["action"] }, { type: i3.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], directives: [{ type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i12.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i12.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i12.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i13.TextBoxDirective, selector: "input[kendoTextBox]", inputs: ["value"] }, { type: i12.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i12.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i12.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i12.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i13.CheckBoxDirective, selector: "input[kendoCheckBox]", inputs: ["size", "rounded"] }, { type: i12.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i13.TextAreaDirective, selector: "textarea[kendoTextArea]", inputs: ["autoSize", "value"], outputs: ["valueChange"] }, { type: i11.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i11.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+    `, isInline: true, components: [{ type: i1.DialogComponent, selector: "kendo-dialog", inputs: ["actions", "actionsLayout", "autoFocusedElement", "title", "width", "minWidth", "maxWidth", "height", "minHeight", "maxHeight", "animation", "themeColor"], outputs: ["action", "close"], exportAs: ["kendoDialog"] }, { type: SchedulerDateTimePickerComponent, selector: "kendo-scheduler-datetime-picker", inputs: ["isAllDay"], outputs: ["valueChange"] }, { type: TimeZoneEditorComponent, selector: "kendo-timezone-editor", inputs: ["width"], outputs: ["valueChange"] }, { type: RecurrenceEditorComponent, selector: "kendo-recurrence-editor", inputs: ["start", "timezone", "weekStart", "repeatEveryOptions", "endAfterOptions", "repeatOnOptions", "endOnOptions"], outputs: ["valueChange"], exportAs: ["kendoRecurrenceEditor"] }, { type: MultipleResourceEditorComponent, selector: "kendo-multiple-resource-editor" }, { type: SingleResourceEditorComponent, selector: "kendo-single-resource-editor" }, { type: i1.DialogActionsComponent, selector: "kendo-dialog-actions", inputs: ["actions", "layout"], outputs: ["action"] }, { type: i3.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], directives: [{ type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i12.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i12.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i12.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i13.TextBoxDirective, selector: "input[kendoTextBox]", inputs: ["value"] }, { type: i12.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i12.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i12.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i12.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i13.CheckBoxDirective, selector: "input[kendoCheckBox]", inputs: ["size", "rounded"] }, { type: i12.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i13.TextAreaDirective, selector: "textarea[kendoTextArea]", inputs: ["autoSize", "value"], outputs: ["valueChange"] }, { type: i11.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i11.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: EditDialogComponent, decorators: [{
             type: Component,
             args: [{
@@ -8211,6 +8214,9 @@ class AgendaTaskItemComponent {
     constructor(localization, localeId) {
         this.localization = localization;
         this.localeId = localeId;
+        this.arrowRotateCWIcon = arrowRotateCwIcon;
+        this.arrowsNoRepeatIcon = arrowsNoRepeatIcon;
+        this.xIcon = xIcon;
     }
     get eventTitle() {
         const start = toLocalDate(this.item.start);
@@ -8238,8 +8244,9 @@ AgendaTaskItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0",
 AgendaTaskItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AgendaTaskItemComponent, selector: "[kendoSchedulerAgendaTaskItem]", inputs: { item: ["kendoSchedulerAgendaTaskItem", "item"], color: "color", eventTemplate: "eventTemplate", editable: "editable" }, host: { properties: { "attr.aria-label": "this.eventTitle" } }, ngImport: i0, template: `
         <div class="k-task" [title]="item.title">
             <span class="k-scheduler-mark" *ngIf="eventColor" [style.background-color]="eventColor"></span>
-            <span class="k-icon k-i-arrow-rotate-cw" *ngIf="isRecurrence"></span>
-            <span class="k-icon k-i-arrows-no-repeat" *ngIf="isRecurrenceException"></span>
+            <kendo-icon-wrapper *ngIf="isRecurrence" name="arrow-rotate-cw" [svgIcon]="arrowRotateCWIcon"></kendo-icon-wrapper>
+
+            <kendo-icon-wrapper *ngIf="isRecurrenceException" name="arrows-no-repeat" [svgIcon]="arrowsNoRepeatIcon"></kendo-icon-wrapper>
             <ng-container *ngIf="!eventTemplate">
                 {{item?.title }}
             </ng-container>
@@ -8248,10 +8255,10 @@ AgendaTaskItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
             </ng-container>
 
             <span *ngIf="removable" class="k-link k-event-delete" aria-hidden="true" [attr.title]="deleteMessage">
-                <span class="k-icon k-i-x"></span>
+                <kendo-icon-wrapper name="x" [svgIcon]="xIcon"></kendo-icon-wrapper>
             </span>
         </div>
-    `, isInline: true, directives: [{ type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i11.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, components: [{ type: i4.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i11.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AgendaTaskItemComponent, decorators: [{
             type: Component,
             args: [{
@@ -8261,8 +8268,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                     template: `
         <div class="k-task" [title]="item.title">
             <span class="k-scheduler-mark" *ngIf="eventColor" [style.background-color]="eventColor"></span>
-            <span class="k-icon k-i-arrow-rotate-cw" *ngIf="isRecurrence"></span>
-            <span class="k-icon k-i-arrows-no-repeat" *ngIf="isRecurrenceException"></span>
+            <kendo-icon-wrapper *ngIf="isRecurrence" name="arrow-rotate-cw" [svgIcon]="arrowRotateCWIcon"></kendo-icon-wrapper>
+
+            <kendo-icon-wrapper *ngIf="isRecurrenceException" name="arrows-no-repeat" [svgIcon]="arrowsNoRepeatIcon"></kendo-icon-wrapper>
             <ng-container *ngIf="!eventTemplate">
                 {{item?.title }}
             </ng-container>
@@ -8271,7 +8279,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             </ng-container>
 
             <span *ngIf="removable" class="k-link k-event-delete" aria-hidden="true" [attr.title]="deleteMessage">
-                <span class="k-icon k-i-x"></span>
+                <kendo-icon-wrapper name="x" [svgIcon]="xIcon"></kendo-icon-wrapper>
             </span>
         </div>
     `
@@ -8302,6 +8310,8 @@ class AgendaListComponent {
     constructor(intlService, localization) {
         this.intlService = intlService;
         this.localization = localization;
+        this.caretAltLeftIcon = caretAltLeftIcon;
+        this.caretAltRightIcon = caretAltRightIcon;
         this.classes = true;
     }
     extractDataItem(item) {
@@ -8369,9 +8379,20 @@ AgendaListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
                         </td>
                         <td class="k-scheduler-timecolumn" role="gridcell">
                             <div *ngIf="!agendaTimeTemplate">
-                                <span class="k-icon k-i-caret-alt-left" *ngIf="extractDataItem(item).tail"></span>
+                                <kendo-icon-wrapper
+                                    *ngIf="extractDataItem(item).tail"
+                                    name="caret-alt-left"
+                                    [svgIcon]="caretAltLeftIcon"
+                                    >
+                                </kendo-icon-wrapper>
+
                                 {{ formatTime(extractDataItem(item)) }}
-                                <span class="k-icon k-i-caret-alt-right" *ngIf="extractDataItem(item).head"></span>
+                                <kendo-icon-wrapper
+                                    *ngIf="extractDataItem(item).head"
+                                    name="caret-alt-right"
+                                    [svgIcon]="caretAltRightIcon"
+                                    >
+                                </kendo-icon-wrapper>
                             </div>
                             <ng-container *ngIf="agendaTimeTemplate" [ngTemplateOutlet]="agendaTimeTemplate"
                                 [ngTemplateOutletContext]="extractDataItem(item)">
@@ -8389,7 +8410,7 @@ AgendaListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
                 </ng-container>
             </tbody>
         </table>
-    `, isInline: true, components: [{ type: AgendaHeaderItemComponent, selector: "[kendoSchedulerAgendaHeaderItem]", inputs: ["kendoSchedulerAgendaHeaderItem", "agendaDateTemplate"] }, { type: AgendaTaskItemComponent, selector: "[kendoSchedulerAgendaTaskItem]", inputs: ["kendoSchedulerAgendaTaskItem", "color", "eventTemplate", "editable"] }], directives: [{ type: i11.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i11.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i11.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i11.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: FocusableDirective, selector: "[kendoSchedulerFocusIndex]", inputs: ["kendoSchedulerFocusIndex", "containerType"] }] });
+    `, isInline: true, components: [{ type: AgendaHeaderItemComponent, selector: "[kendoSchedulerAgendaHeaderItem]", inputs: ["kendoSchedulerAgendaHeaderItem", "agendaDateTemplate"] }, { type: i4.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: AgendaTaskItemComponent, selector: "[kendoSchedulerAgendaTaskItem]", inputs: ["kendoSchedulerAgendaTaskItem", "color", "eventTemplate", "editable"] }], directives: [{ type: i11.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i11.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i11.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i11.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: FocusableDirective, selector: "[kendoSchedulerFocusIndex]", inputs: ["kendoSchedulerFocusIndex", "containerType"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AgendaListComponent, decorators: [{
             type: Component,
             args: [{
@@ -8411,9 +8432,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                         </td>
                         <td class="k-scheduler-timecolumn" role="gridcell">
                             <div *ngIf="!agendaTimeTemplate">
-                                <span class="k-icon k-i-caret-alt-left" *ngIf="extractDataItem(item).tail"></span>
+                                <kendo-icon-wrapper
+                                    *ngIf="extractDataItem(item).tail"
+                                    name="caret-alt-left"
+                                    [svgIcon]="caretAltLeftIcon"
+                                    >
+                                </kendo-icon-wrapper>
+
                                 {{ formatTime(extractDataItem(item)) }}
-                                <span class="k-icon k-i-caret-alt-right" *ngIf="extractDataItem(item).head"></span>
+                                <kendo-icon-wrapper
+                                    *ngIf="extractDataItem(item).head"
+                                    name="caret-alt-right"
+                                    [svgIcon]="caretAltRightIcon"
+                                    >
+                                </kendo-icon-wrapper>
                             </div>
                             <ng-container *ngIf="agendaTimeTemplate" [ngTemplateOutlet]="agendaTimeTemplate"
                                 [ngTemplateOutletContext]="extractDataItem(item)">
@@ -8935,12 +8967,12 @@ AgendaViewModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", versio
         AgendaListComponent,
         AgendaTaskItemComponent,
         AgendaViewComponent,
-        AgendaViewInternalComponent], imports: [CommonModule, IntlModule, SharedModule], exports: [AgendaViewComponent] });
-AgendaViewModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AgendaViewModule, imports: [[CommonModule, IntlModule, SharedModule]] });
+        AgendaViewInternalComponent], imports: [CommonModule, IntlModule, SharedModule, IconsModule], exports: [AgendaViewComponent] });
+AgendaViewModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AgendaViewModule, imports: [[CommonModule, IntlModule, SharedModule, IconsModule]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AgendaViewModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule, IntlModule, SharedModule],
+                    imports: [CommonModule, IntlModule, SharedModule, IconsModule],
                     exports: [AgendaViewComponent],
                     declarations: [COMPONENTS]
                 }]
@@ -9498,6 +9530,11 @@ class MonthViewItemComponent extends BaseViewItem {
     constructor(slotService, localization, focusService, element, renderer, localeId) {
         super(slotService, localization, focusService, element, renderer, localeId);
         this.localeId = localeId;
+        this.caretAltLeftIcon = caretAltLeftIcon;
+        this.caretAltRightIcon = caretAltRightIcon;
+        this.arrowRotateCwIcon = arrowRotateCwIcon;
+        this.arrowsNoRepeatIcon = arrowsNoRepeatIcon;
+        this.xIcon = xIcon;
     }
     reflow() {
         if (this.item.data[this.resourceIndex].hidden) {
@@ -9513,9 +9550,24 @@ class MonthViewItemComponent extends BaseViewItem {
 MonthViewItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MonthViewItemComponent, deps: [{ token: MonthSlotService }, { token: i1$1.LocalizationService }, { token: FocusService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: LOCALE_ID }], target: i0.ɵɵFactoryTarget.Component });
 MonthViewItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: MonthViewItemComponent, selector: "[monthViewItem]", usesInheritance: true, ngImport: i0, template: `
         <span class="k-event-actions">
-            <span class="k-icon k-i-caret-alt-left" *ngIf="item.tail"></span>
-            <span class="k-icon k-i-arrow-rotate-cw" *ngIf="isRecurrence"></span>
-            <span class="k-icon k-i-arrows-no-repeat" *ngIf="isRecurrenceException"></span>
+            <kendo-icon-wrapper
+                *ngIf="item.tail"
+                name="caret-alt-left"
+                [svgIcon]="caretAltLeftIcon"
+                >
+            </kendo-icon-wrapper>
+            <kendo-icon-wrapper
+                *ngIf="isRecurrence"
+                name="arrow-rotate-cw"
+                [svgIcon]="arrowRotateCwIcon"
+                >
+            </kendo-icon-wrapper>
+            <kendo-icon-wrapper
+                *ngIf="isRecurrenceException"
+                name="arrows-no-repeat"
+                [svgIcon]="arrowsNoRepeatIcon"
+                >
+            </kendo-icon-wrapper>
         </span>
         <ng-container *ngIf="eventTemplate" [ngTemplateOutlet]="eventTemplate"
             [ngTemplateOutletContext]="{ $implicit: item.event, event: item.event, resources: resources }">
@@ -9526,16 +9578,21 @@ MonthViewItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
 
         <span class="k-event-actions">
             <span *ngIf="removable" class="k-link k-event-delete" aria-hidden="true" [attr.title]="deleteMessage">
-                <span class="k-icon k-i-x"></span>
+                <kendo-icon-wrapper name="x" [svgIcon]="xIcon"></kendo-icon-wrapper>
             </span>
-            <span class="k-icon k-i-caret-alt-right" *ngIf="item.head"></span>
+            <kendo-icon-wrapper
+                *ngIf="item.head"
+                name="caret-alt-right"
+                [svgIcon]="caretAltRightIcon"
+                >
+            </kendo-icon-wrapper>
         </span>
 
         <ng-container *ngIf="resizable">
             <span class="k-resize-handle k-resize-w"></span>
             <span class="k-resize-handle k-resize-e"></span>
         </ng-container>
-    `, isInline: true, directives: [{ type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i11.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+    `, isInline: true, components: [{ type: i4.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i11.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MonthViewItemComponent, decorators: [{
             type: Component,
             args: [{
@@ -9543,9 +9600,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                     selector: '[monthViewItem]',
                     template: `
         <span class="k-event-actions">
-            <span class="k-icon k-i-caret-alt-left" *ngIf="item.tail"></span>
-            <span class="k-icon k-i-arrow-rotate-cw" *ngIf="isRecurrence"></span>
-            <span class="k-icon k-i-arrows-no-repeat" *ngIf="isRecurrenceException"></span>
+            <kendo-icon-wrapper
+                *ngIf="item.tail"
+                name="caret-alt-left"
+                [svgIcon]="caretAltLeftIcon"
+                >
+            </kendo-icon-wrapper>
+            <kendo-icon-wrapper
+                *ngIf="isRecurrence"
+                name="arrow-rotate-cw"
+                [svgIcon]="arrowRotateCwIcon"
+                >
+            </kendo-icon-wrapper>
+            <kendo-icon-wrapper
+                *ngIf="isRecurrenceException"
+                name="arrows-no-repeat"
+                [svgIcon]="arrowsNoRepeatIcon"
+                >
+            </kendo-icon-wrapper>
         </span>
         <ng-container *ngIf="eventTemplate" [ngTemplateOutlet]="eventTemplate"
             [ngTemplateOutletContext]="{ $implicit: item.event, event: item.event, resources: resources }">
@@ -9556,9 +9628,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
 
         <span class="k-event-actions">
             <span *ngIf="removable" class="k-link k-event-delete" aria-hidden="true" [attr.title]="deleteMessage">
-                <span class="k-icon k-i-x"></span>
+                <kendo-icon-wrapper name="x" [svgIcon]="xIcon"></kendo-icon-wrapper>
             </span>
-            <span class="k-icon k-i-caret-alt-right" *ngIf="item.head"></span>
+            <kendo-icon-wrapper
+                *ngIf="item.head"
+                name="caret-alt-right"
+                [svgIcon]="caretAltRightIcon"
+                >
+            </kendo-icon-wrapper>
         </span>
 
         <ng-container *ngIf="resizable">
@@ -10633,117 +10710,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 args: ['hintContainer', { static: false }]
             }] } });
 
-/**
- * @hidden
- */
-class HintContainerComponent {
-    constructor(changeDetector) {
-        this.changeDetector = changeDetector;
-        this.changeDetector.detach();
-    }
-    detectChanges() {
-        this.changeDetector.detectChanges();
-    }
-}
-HintContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: HintContainerComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-HintContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: HintContainerComponent, selector: "kendo-hint-container", queries: [{ propertyName: "hintTemplate", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0, template: `
-        <ng-container [ngTemplateOutlet]="hintTemplate">
-        </ng-container>
-    `, isInline: true, directives: [{ type: i11.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: HintContainerComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'kendo-hint-container',
-                    template: `
-        <ng-container [ngTemplateOutlet]="hintTemplate">
-        </ng-container>
-    `
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { hintTemplate: [{
-                type: ContentChild,
-                args: [TemplateRef, { static: false }]
-            }] } });
-
-/**
- * @hidden
- */
-class ResizeHintComponent {
-    constructor() {
-        this.marqueeClasses = true;
-    }
-    get left() {
-        return this.hint.rect.left;
-    }
-    get top() {
-        return this.hint.rect.top;
-    }
-    get width() {
-        return this.hint.rect.width;
-    }
-    get height() {
-        return this.hint.rect.height;
-    }
-    get start() {
-        return toLocalDate(this.hint.start);
-    }
-    get end() {
-        return toLocalDate(this.hint.end);
-    }
-}
-ResizeHintComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ResizeHintComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ResizeHintComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ResizeHintComponent, selector: "[kendoResizeHint]", inputs: { hint: "hint", format: "format" }, host: { properties: { "class.k-marquee": "this.marqueeClasses", "class.k-scheduler-marquee": "this.marqueeClasses", "class.k-first": "this.marqueeClasses", "class.k-last": "this.marqueeClasses", "style.left.px": "this.left", "style.right.px": "this.left", "style.top.px": "this.top", "style.width.px": "this.width", "style.height.px": "this.height" } }, ngImport: i0, template: `
-        <div class="k-marquee-color"></div>
-        <div class="k-marquee-text">
-            <div class="k-label-top" *ngIf="hint.first">{{ start | kendoDate : format }}</div>
-            <div class="k-label-bottom" *ngIf="hint.last">{{ end | kendoDate : format }}</div>
-        </div>
-    `, isInline: true, directives: [{ type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "kendoDate": i1$4.DatePipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ResizeHintComponent, decorators: [{
-            type: Component,
-            args: [{
-                    // eslint-disable-next-line @angular-eslint/component-selector
-                    selector: '[kendoResizeHint]',
-                    template: `
-        <div class="k-marquee-color"></div>
-        <div class="k-marquee-text">
-            <div class="k-label-top" *ngIf="hint.first">{{ start | kendoDate : format }}</div>
-            <div class="k-label-bottom" *ngIf="hint.last">{{ end | kendoDate : format }}</div>
-        </div>
-    `
-                }]
-        }], propDecorators: { hint: [{
-                type: Input
-            }], format: [{
-                type: Input
-            }], marqueeClasses: [{
-                type: HostBinding,
-                args: ['class.k-marquee']
-            }, {
-                type: HostBinding,
-                args: ['class.k-scheduler-marquee']
-            }, {
-                type: HostBinding,
-                args: ['class.k-first']
-            }, {
-                type: HostBinding,
-                args: ['class.k-last']
-            }], left: [{
-                type: HostBinding,
-                args: ['style.left.px']
-            }, {
-                type: HostBinding,
-                args: ['style.right.px']
-            }], top: [{
-                type: HostBinding,
-                args: ['style.top.px']
-            }], width: [{
-                type: HostBinding,
-                args: ['style.width.px']
-            }], height: [{
-                type: HostBinding,
-                args: ['style.height.px']
-            }] } });
-
 /**
  * @hidden
  */
@@ -10835,9 +10801,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
 /**
  * @hidden
  */
-class MonthSlotDirective extends BaseSlotDirective {
-    constructor(element, slotService, localization) {
+class MonthSlotComponent extends BaseSlotDirective {
+    constructor(element, slotService, localization, cdr) {
         super(element, slotService, localization);
+        this.cdr = cdr;
+        this.moreHorizontalIcon = moreHorizontalIcon;
         this.isDaySlot = true;
         this._linkHeight = null;
     }
@@ -10850,6 +10818,9 @@ class MonthSlotDirective extends BaseSlotDirective {
     get end() {
         return addUTCDays(this.start, 1);
     }
+    isFirstDayOfMonth(day) {
+        return isEqualDate(day, firstDayOfMonth(day));
+    }
     get linkHeight() {
         if (this._linkHeight === null) {
             const element = firstElementChild(this.nativeElement);
@@ -10862,41 +10833,190 @@ class MonthSlotDirective extends BaseSlotDirective {
         this.removeShowMore();
     }
     showMore(rect) {
-        if (!this.showMoreElement) {
-            const element = this.showMoreElement = document.createElement('div');
-            element.innerHTML = '<span class="k-icon k-i-more-horizontal"></span>';
-            element.className = 'k-more-events k-button';
-            element.style.width = `${rect.width}px`;
-            element.style.left = `${rect.left}px`;
-            element.style.top = `${rect.top}px`;
-            this.nativeElement.appendChild(element);
-        }
+        this.showMoreButton = true;
+        this.style = `width: ${rect.width}px; left: ${rect.left}px; top: ${rect.top}px; border-color: inherit;`;
+        this.cdr.detectChanges();
     }
     hideMore() {
+        this.showMoreButton = false;
         this.removeShowMore();
     }
     invalidate() {
         super.invalidate();
         this._linkHeight = null;
+        this.showMoreButton = false;
         this.removeShowMore();
     }
     removeShowMore() {
-        if (this.showMoreElement) {
-            this.showMoreElement.parentNode.removeChild(this.showMoreElement);
-            this.showMoreElement = null;
-        }
+        this.showMoreButton = false;
+        this.cdr.detectChanges();
     }
 }
-MonthSlotDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MonthSlotDirective, deps: [{ token: i0.ElementRef }, { token: MonthSlotService }, { token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
-MonthSlotDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: MonthSlotDirective, selector: "[monthSlot]", inputs: { start: "start" }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MonthSlotDirective, decorators: [{
-            type: Directive,
+MonthSlotComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MonthSlotComponent, deps: [{ token: i0.ElementRef }, { token: MonthSlotService }, { token: i1$1.LocalizationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+MonthSlotComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: MonthSlotComponent, selector: "[monthSlot]", inputs: { resourcesByIndex: "resourcesByIndex", monthDaySlotTemplateRef: "monthDaySlotTemplateRef", start: ["monthSlot", "start"] }, usesInheritance: true, ngImport: i0, template: `
+        <span *ngIf="!monthDaySlotTemplateRef" aria-hidden="true" class="k-link k-nav-day">
+            {{ start | kendoDate: isFirstDayOfMonth(start) ? 'MMM dd' : 'dd' }}
+        </span>
+        <ng-container
+            *ngIf="monthDaySlotTemplateRef"
+            [ngTemplateOutlet]="monthDaySlotTemplateRef"
+            [ngTemplateOutletContext]="{ date: start, resources: resourcesByIndex }"
+            >
+        </ng-container>
+
+        <div *ngIf="showMoreButton" class="k-more-events k-button" [style]="style">
+            <kendo-icon-wrapper
+                innerCssClass="k-i-more-horizontal"
+                name="more-horizontal"
+                [svgIcon]="moreHorizontalIcon"
+                >
+            </kendo-icon-wrapper>
+        </div>
+    `, isInline: true, components: [{ type: i4.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i11.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "kendoDate": i1$4.DatePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MonthSlotComponent, decorators: [{
+            type: Component,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
-                    selector: '[monthSlot]'
+                    selector: '[monthSlot]',
+                    template: `
+        <span *ngIf="!monthDaySlotTemplateRef" aria-hidden="true" class="k-link k-nav-day">
+            {{ start | kendoDate: isFirstDayOfMonth(start) ? 'MMM dd' : 'dd' }}
+        </span>
+        <ng-container
+            *ngIf="monthDaySlotTemplateRef"
+            [ngTemplateOutlet]="monthDaySlotTemplateRef"
+            [ngTemplateOutletContext]="{ date: start, resources: resourcesByIndex }"
+            >
+        </ng-container>
+
+        <div *ngIf="showMoreButton" class="k-more-events k-button" [style]="style">
+            <kendo-icon-wrapper
+                innerCssClass="k-i-more-horizontal"
+                name="more-horizontal"
+                [svgIcon]="moreHorizontalIcon"
+                >
+            </kendo-icon-wrapper>
+        </div>
+    `
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: MonthSlotService }, { type: i1$1.LocalizationService }]; }, propDecorators: { start: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: MonthSlotService }, { type: i1$1.LocalizationService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { resourcesByIndex: [{
                 type: Input
+            }], monthDaySlotTemplateRef: [{
+                type: Input
+            }], start: [{
+                type: Input,
+                args: ['monthSlot']
+            }] } });
+
+/**
+ * @hidden
+ */
+class HintContainerComponent {
+    constructor(changeDetector) {
+        this.changeDetector = changeDetector;
+        this.changeDetector.detach();
+    }
+    detectChanges() {
+        this.changeDetector.detectChanges();
+    }
+}
+HintContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: HintContainerComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+HintContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: HintContainerComponent, selector: "kendo-hint-container", queries: [{ propertyName: "hintTemplate", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0, template: `
+        <ng-container [ngTemplateOutlet]="hintTemplate">
+        </ng-container>
+    `, isInline: true, directives: [{ type: i11.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: HintContainerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-hint-container',
+                    template: `
+        <ng-container [ngTemplateOutlet]="hintTemplate">
+        </ng-container>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { hintTemplate: [{
+                type: ContentChild,
+                args: [TemplateRef, { static: false }]
+            }] } });
+
+/**
+ * @hidden
+ */
+class ResizeHintComponent {
+    constructor() {
+        this.marqueeClasses = true;
+    }
+    get left() {
+        return this.hint.rect.left;
+    }
+    get top() {
+        return this.hint.rect.top;
+    }
+    get width() {
+        return this.hint.rect.width;
+    }
+    get height() {
+        return this.hint.rect.height;
+    }
+    get start() {
+        return toLocalDate(this.hint.start);
+    }
+    get end() {
+        return toLocalDate(this.hint.end);
+    }
+}
+ResizeHintComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ResizeHintComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ResizeHintComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ResizeHintComponent, selector: "[kendoResizeHint]", inputs: { hint: "hint", format: "format" }, host: { properties: { "class.k-marquee": "this.marqueeClasses", "class.k-scheduler-marquee": "this.marqueeClasses", "class.k-first": "this.marqueeClasses", "class.k-last": "this.marqueeClasses", "style.left.px": "this.left", "style.right.px": "this.left", "style.top.px": "this.top", "style.width.px": "this.width", "style.height.px": "this.height" } }, ngImport: i0, template: `
+        <div class="k-marquee-color"></div>
+        <div class="k-marquee-text">
+            <div class="k-label-top" *ngIf="hint.first">{{ start | kendoDate : format }}</div>
+            <div class="k-label-bottom" *ngIf="hint.last">{{ end | kendoDate : format }}</div>
+        </div>
+    `, isInline: true, directives: [{ type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "kendoDate": i1$4.DatePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ResizeHintComponent, decorators: [{
+            type: Component,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/component-selector
+                    selector: '[kendoResizeHint]',
+                    template: `
+        <div class="k-marquee-color"></div>
+        <div class="k-marquee-text">
+            <div class="k-label-top" *ngIf="hint.first">{{ start | kendoDate : format }}</div>
+            <div class="k-label-bottom" *ngIf="hint.last">{{ end | kendoDate : format }}</div>
+        </div>
+    `
+                }]
+        }], propDecorators: { hint: [{
+                type: Input
+            }], format: [{
+                type: Input
+            }], marqueeClasses: [{
+                type: HostBinding,
+                args: ['class.k-marquee']
+            }, {
+                type: HostBinding,
+                args: ['class.k-scheduler-marquee']
+            }, {
+                type: HostBinding,
+                args: ['class.k-first']
+            }, {
+                type: HostBinding,
+                args: ['class.k-last']
+            }], left: [{
+                type: HostBinding,
+                args: ['style.left.px']
+            }, {
+                type: HostBinding,
+                args: ['style.right.px']
+            }], top: [{
+                type: HostBinding,
+                args: ['style.top.px']
+            }], width: [{
+                type: HostBinding,
+                args: ['style.width.px']
+            }], height: [{
+                type: HostBinding,
+                args: ['style.height.px']
             }] } });
 
 class ResourceIterator {
@@ -11039,9 +11159,6 @@ class MonthViewRendererComponent extends BaseView {
     addDay(dayStart) {
         return addDays(dayStart, 1);
     }
-    isFirstDayOfMonth(day) {
-        return isEqualDate(day, firstDayOfMonth(day));
-    }
     optionsChange(changes) {
         this.schedulerMonthDaySlotTemplate = changes[`${this.type}DaySlotTemplate`];
         super.optionsChange(changes);
@@ -11227,9 +11344,10 @@ MonthViewRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
                              <tr *ngFor="let week of weeks;  let rangeIndex = index; trackBy: itemIndex">
                                 <ng-container *ngFor="let resource of horizontalResources | resourceIterator; let horizontalIndex = index; trackBy: itemIndex">
                                      <td *ngFor="let day of week; let index = index; trackBy: itemIndex"
-                                         monthSlot
+                                         [monthSlot]="day"
+                                         [monthDaySlotTemplateRef]="monthDaySlotTemplateRef"
+                                         [resourcesByIndex]="resourcesByIndex(verticalResources.length ? verticalIndex : horizontalIndex)"
                                          [ngClass]="daySlotClass(day, verticalResources.length ? verticalIndex : horizontalIndex)"
-                                         [start]="day"
                                          [id]="{ resourceIndex: verticalResources.length ? verticalIndex : horizontalIndex, rangeIndex: rangeIndex, index: index }"
                                          [title]="cellTitle(day)"
                                          [class.k-selected]="isSlotSelected({
@@ -11239,12 +11357,7 @@ MonthViewRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
                                              resources: resourcesByIndex(verticalResources.length ? verticalIndex : horizontalIndex)
                                          })"
                                         >
-                                        <span aria-hidden="true" class="k-link k-nav-day" *ngIf="!monthDaySlotTemplateRef">
-                                            {{ day | kendoDate: isFirstDayOfMonth(day) ? 'MMM dd' : 'dd' }}
-                                        </span>
-                                        <ng-container *ngIf="monthDaySlotTemplateRef" [ngTemplateOutlet]="monthDaySlotTemplateRef"
-                                            [ngTemplateOutletContext]="{ date: day, resources: resourcesByIndex(verticalResources.length ? verticalIndex : horizontalIndex) }"></ng-container>
-                                     </td>
+                                    </td>
                                 </ng-container>
                              </tr>
                          </ng-container>
@@ -11290,7 +11403,7 @@ MonthViewRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
                 </div>
             </div>
         </div>
-    `, isInline: true, components: [{ type: MonthViewItemComponent, selector: "[monthViewItem]" }, { type: HintContainerComponent, selector: "kendo-hint-container" }, { type: ResizeHintComponent, selector: "[kendoResizeHint]", inputs: ["hint", "format"] }], directives: [{ type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i11.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i11.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i11.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: MonthSlotDirective, selector: "[monthSlot]", inputs: ["start"] }, { type: i11.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: FocusableDirective, selector: "[kendoSchedulerFocusIndex]", inputs: ["kendoSchedulerFocusIndex", "containerType"] }], pipes: { "resourceIterator": ResourceIteratorPipe, "kendoDate": i1$4.DatePipe, "repeat": RepeatPipe, "async": i11.AsyncPipe } });
+    `, isInline: true, components: [{ type: MonthSlotComponent, selector: "[monthSlot]", inputs: ["resourcesByIndex", "monthDaySlotTemplateRef", "monthSlot"] }, { type: MonthViewItemComponent, selector: "[monthViewItem]" }, { type: HintContainerComponent, selector: "kendo-hint-container" }, { type: ResizeHintComponent, selector: "[kendoResizeHint]", inputs: ["hint", "format"] }], directives: [{ type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i11.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i11.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i11.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i11.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: FocusableDirective, selector: "[kendoSchedulerFocusIndex]", inputs: ["kendoSchedulerFocusIndex", "containerType"] }], pipes: { "resourceIterator": ResourceIteratorPipe, "kendoDate": i1$4.DatePipe, "repeat": RepeatPipe, "async": i11.AsyncPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MonthViewRendererComponent, decorators: [{
             type: Component,
             args: [{
@@ -11364,9 +11477,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                              <tr *ngFor="let week of weeks;  let rangeIndex = index; trackBy: itemIndex">
                                 <ng-container *ngFor="let resource of horizontalResources | resourceIterator; let horizontalIndex = index; trackBy: itemIndex">
                                      <td *ngFor="let day of week; let index = index; trackBy: itemIndex"
-                                         monthSlot
+                                         [monthSlot]="day"
+                                         [monthDaySlotTemplateRef]="monthDaySlotTemplateRef"
+                                         [resourcesByIndex]="resourcesByIndex(verticalResources.length ? verticalIndex : horizontalIndex)"
                                          [ngClass]="daySlotClass(day, verticalResources.length ? verticalIndex : horizontalIndex)"
-                                         [start]="day"
                                          [id]="{ resourceIndex: verticalResources.length ? verticalIndex : horizontalIndex, rangeIndex: rangeIndex, index: index }"
                                          [title]="cellTitle(day)"
                                          [class.k-selected]="isSlotSelected({
@@ -11376,12 +11490,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                                              resources: resourcesByIndex(verticalResources.length ? verticalIndex : horizontalIndex)
                                          })"
                                         >
-                                        <span aria-hidden="true" class="k-link k-nav-day" *ngIf="!monthDaySlotTemplateRef">
-                                            {{ day | kendoDate: isFirstDayOfMonth(day) ? 'MMM dd' : 'dd' }}
-                                        </span>
-                                        <ng-container *ngIf="monthDaySlotTemplateRef" [ngTemplateOutlet]="monthDaySlotTemplateRef"
-                                            [ngTemplateOutletContext]="{ date: day, resources: resourcesByIndex(verticalResources.length ? verticalIndex : horizontalIndex) }"></ng-container>
-                                     </td>
+                                    </td>
                                 </ng-container>
                              </tr>
                          </ng-container>
@@ -11715,17 +11824,18 @@ class ViewFooterComponent {
     }
 }
 ViewFooterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ViewFooterComponent, deps: [{ token: ViewStateService }], target: i0.ɵɵFactoryTarget.Component });
-ViewFooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ViewFooterComponent, selector: "[viewFooter]", inputs: { items: "items" }, outputs: { itemClick: "itemClick" }, host: { properties: { "class.k-scheduler-footer": "this.hostClasses", "class.k-toolbar": "this.hostClasses", "style.justify-content": "this.inlineJustifyContentStyle" } }, ngImport: i0, template: `
+ViewFooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ViewFooterComponent, selector: "[viewFooter]", inputs: { items: "items" }, outputs: { itemClick: "itemClick" }, host: { properties: { "class.k-scheduler-footer": "this.hostClasses", "class.k-toolbar": "this.hostClasses", "class.k-toolbar-md": "this.hostClasses", "style.justify-content": "this.inlineJustifyContentStyle" } }, ngImport: i0, template: `
         <span class="k-scheduler-navigation">
             <button
+                *ngFor="let item of items"
                 type="button"
                 kendoButton
-                *ngFor="let item of items"
+                [icon]="item.fontIcon"
+                [svgIcon]="item.svgIcon"
                 [ngClass]="item.cssClass"
                 (click)="onItemClick($event, item)"
                 [kendoSchedulerFocusIndex]="0"
                 containerType='footer'>
-                <span class="k-button-icon k-icon" [ngClass]="item.iconClass"></span>
                 <span class="k-button-text">{{ item.text }}</span>
             </button>
         </span>
@@ -11738,14 +11848,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                     template: `
         <span class="k-scheduler-navigation">
             <button
+                *ngFor="let item of items"
                 type="button"
                 kendoButton
-                *ngFor="let item of items"
+                [icon]="item.fontIcon"
+                [svgIcon]="item.svgIcon"
                 [ngClass]="item.cssClass"
                 (click)="onItemClick($event, item)"
                 [kendoSchedulerFocusIndex]="0"
                 containerType='footer'>
-                <span class="k-button-icon k-icon" [ngClass]="item.iconClass"></span>
                 <span class="k-button-text">{{ item.text }}</span>
             </button>
         </span>
@@ -11757,6 +11868,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             }, {
                 type: HostBinding,
                 args: ['class.k-toolbar']
+            }, {
+                type: HostBinding,
+                args: ['class.k-toolbar-md']
             }], inlineJustifyContentStyle: [{
                 type: HostBinding,
                 args: ['style.justify-content']
@@ -11774,7 +11888,7 @@ class WorkHoursFooterDirective {
         this.footer = footer;
         this.localization = localization;
         this.showWorkHours = false;
-        this.footerItems = [{ cssClass: 'k-scheduler-fullday', iconClass: 'k-i-clock', text: '' }];
+        this.footerItems = [{ cssClass: 'k-scheduler-fullday', fontIcon: 'clock', svgIcon: clockIcon, text: '' }];
     }
     ngOnInit() {
         this.toggleWorkHours();
@@ -11817,26 +11931,29 @@ ViewsSharedModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", versi
         RepeatPipe,
         ResourceIteratorPipe,
         HintContainerComponent,
-        ResizeHintComponent], imports: [CommonModule, IntlModule, SharedModule, ButtonsModule], exports: [ViewFooterComponent,
+        ResizeHintComponent], imports: [CommonModule, IntlModule, SharedModule, ButtonsModule, IconsModule], exports: [ViewFooterComponent,
         WorkHoursFooterDirective,
         RepeatPipe,
         ResourceIteratorPipe,
         HintContainerComponent,
         ResizeHintComponent, IntlModule,
         CommonModule,
-        SharedModule] });
-ViewsSharedModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ViewsSharedModule, imports: [[CommonModule, IntlModule, SharedModule, ButtonsModule], IntlModule,
+        SharedModule,
+        IconsModule] });
+ViewsSharedModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ViewsSharedModule, imports: [[CommonModule, IntlModule, SharedModule, ButtonsModule, IconsModule], IntlModule,
         CommonModule,
-        SharedModule] });
+        SharedModule,
+        IconsModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ViewsSharedModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule, IntlModule, SharedModule, ButtonsModule],
+                    imports: [CommonModule, IntlModule, SharedModule, ButtonsModule, IconsModule],
                     exports: [
                         DECLARATIONS,
                         IntlModule,
                         CommonModule,
-                        SharedModule
+                        SharedModule,
+                        IconsModule
                     ],
                     declarations: [
                         DECLARATIONS
@@ -11853,17 +11970,20 @@ MonthViewModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version:
 MonthViewModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MonthViewModule, declarations: [MonthViewComponent,
         MonthViewRendererComponent,
         MonthViewItemComponent,
-        MonthSlotDirective,
-        MultiWeekViewComponent], imports: [ViewsSharedModule], exports: [MonthViewComponent,
+        MonthSlotComponent,
+        MultiWeekViewComponent], imports: [ViewsSharedModule,
+        IconsModule], exports: [MonthViewComponent,
         MultiWeekViewComponent] });
 MonthViewModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MonthViewModule, imports: [[
-            ViewsSharedModule
+            ViewsSharedModule,
+            IconsModule
         ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MonthViewModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
-                        ViewsSharedModule
+                        ViewsSharedModule,
+                        IconsModule
                     ],
                     exports: [
                         MonthViewComponent,
@@ -11873,7 +11993,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                         MonthViewComponent,
                         MonthViewRendererComponent,
                         MonthViewItemComponent,
-                        MonthSlotDirective,
+                        MonthSlotComponent,
                         MultiWeekViewComponent
                     ]
                 }]
@@ -12730,6 +12850,13 @@ class DayTimeViewItemComponent extends BaseViewItem {
         super(slotService, localization, focusService, element, renderer, localeId);
         this.intlService = intlService;
         this.localeId = localeId;
+        this.caretAltLeftIcon = caretAltLeftIcon;
+        this.caretAltRightIcon = caretAltRightIcon;
+        this.caretAltUpIcon = caretAltUpIcon;
+        this.caretAltDownIcon = caretAltDownIcon;
+        this.arrowRotateCwIcon = arrowRotateCwIcon;
+        this.arrowsNoRepeatIcon = arrowsNoRepeatIcon;
+        this.xIcon = xIcon;
     }
     get eventTime() {
         return this.intlService.format('{0:t}–{1:t}', toLocalDate(this.item.startTime), toLocalDate(this.item.endTime));
@@ -12738,9 +12865,24 @@ class DayTimeViewItemComponent extends BaseViewItem {
 DayTimeViewItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DayTimeViewItemComponent, deps: [{ token: i1$4.IntlService }, { token: DayTimeSlotService }, { token: i1$1.LocalizationService }, { token: FocusService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: LOCALE_ID }], target: i0.ɵɵFactoryTarget.Component });
 DayTimeViewItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: DayTimeViewItemComponent, selector: "[dayTimeViewItem]", inputs: { vertical: "vertical", isAllDay: "isAllDay" }, usesInheritance: true, ngImport: i0, template: `
         <span class="k-event-actions">
-            <span class="k-icon k-i-caret-alt-left" *ngIf="item.tail && !vertical"></span>
-            <span class="k-icon k-i-arrow-rotate-cw" *ngIf="isRecurrence"></span>
-            <span class="k-icon k-i-arrows-no-repeat" *ngIf="isRecurrenceException"></span>
+            <kendo-icon-wrapper
+                *ngIf="item.tail && !vertical"
+                name="caret-alt-left"
+                [svgIcon]="caretAltLeftIcon"
+                >
+            </kendo-icon-wrapper>
+            <kendo-icon-wrapper
+                *ngIf="isRecurrence"
+                name="arrow-rotate-cw"
+                [svgIcon]="arrowRotateCwIcon"
+                >
+            </kendo-icon-wrapper>
+            <kendo-icon-wrapper
+                *ngIf="isRecurrenceException"
+                name="arrows-no-repeat"
+                [svgIcon]="arrowsNoRepeatIcon"
+                >
+            </kendo-icon-wrapper>
         </span>
         <ng-container *ngIf="eventTemplate" [ngTemplateOutlet]="eventTemplate"
             [ngTemplateOutletContext]="{ $implicit: item.event, event: item.event, resources: resources }">
@@ -12752,17 +12894,22 @@ DayTimeViewItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0
 
         <span class="k-event-actions">
             <span *ngIf="removable" class="k-link k-event-delete" aria-hidden="true" [attr.title]="deleteMessage">
-                <span class="k-icon k-i-x"></span>
+                <kendo-icon-wrapper name="x" [svgIcon]="xIcon"></kendo-icon-wrapper>
             </span>
-            <span class="k-icon k-i-caret-alt-right" *ngIf="item.head && !vertical"></span>
+            <kendo-icon-wrapper
+                *ngIf="item.head && !vertical"
+                name="caret-alt-right"
+                [svgIcon]="caretAltRightIcon"
+                >
+            </kendo-icon-wrapper>
         </span>
 
         <span class="k-event-top-actions" *ngIf="item.tail && vertical">
-            <span class="k-icon k-i-caret-alt-up"></span>
+            <kendo-icon-wrapper name="caret-alt-up" [svgIcon]="caretAltUpIcon"></kendo-icon-wrapper>
         </span>
 
         <span class="k-event-bottom-actions" *ngIf="item.head && vertical">
-            <span class="k-icon k-i-caret-alt-down"></span>
+            <kendo-icon-wrapper name="caret-alt-down" [svgIcon]="caretAltDownIcon"></kendo-icon-wrapper>
         </span>
 
         <ng-container *ngIf="resizable && vertical">
@@ -12774,7 +12921,7 @@ DayTimeViewItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0
             <span class="k-resize-handle k-resize-w"></span>
             <span class="k-resize-handle k-resize-e"></span>
         </ng-container>
-    `, isInline: true, directives: [{ type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i11.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+    `, isInline: true, components: [{ type: i4.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i11.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DayTimeViewItemComponent, decorators: [{
             type: Component,
             args: [{
@@ -12782,9 +12929,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                     selector: '[dayTimeViewItem]',
                     template: `
         <span class="k-event-actions">
-            <span class="k-icon k-i-caret-alt-left" *ngIf="item.tail && !vertical"></span>
-            <span class="k-icon k-i-arrow-rotate-cw" *ngIf="isRecurrence"></span>
-            <span class="k-icon k-i-arrows-no-repeat" *ngIf="isRecurrenceException"></span>
+            <kendo-icon-wrapper
+                *ngIf="item.tail && !vertical"
+                name="caret-alt-left"
+                [svgIcon]="caretAltLeftIcon"
+                >
+            </kendo-icon-wrapper>
+            <kendo-icon-wrapper
+                *ngIf="isRecurrence"
+                name="arrow-rotate-cw"
+                [svgIcon]="arrowRotateCwIcon"
+                >
+            </kendo-icon-wrapper>
+            <kendo-icon-wrapper
+                *ngIf="isRecurrenceException"
+                name="arrows-no-repeat"
+                [svgIcon]="arrowsNoRepeatIcon"
+                >
+            </kendo-icon-wrapper>
         </span>
         <ng-container *ngIf="eventTemplate" [ngTemplateOutlet]="eventTemplate"
             [ngTemplateOutletContext]="{ $implicit: item.event, event: item.event, resources: resources }">
@@ -12796,17 +12958,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
 
         <span class="k-event-actions">
             <span *ngIf="removable" class="k-link k-event-delete" aria-hidden="true" [attr.title]="deleteMessage">
-                <span class="k-icon k-i-x"></span>
+                <kendo-icon-wrapper name="x" [svgIcon]="xIcon"></kendo-icon-wrapper>
             </span>
-            <span class="k-icon k-i-caret-alt-right" *ngIf="item.head && !vertical"></span>
+            <kendo-icon-wrapper
+                *ngIf="item.head && !vertical"
+                name="caret-alt-right"
+                [svgIcon]="caretAltRightIcon"
+                >
+            </kendo-icon-wrapper>
         </span>
 
         <span class="k-event-top-actions" *ngIf="item.tail && vertical">
-            <span class="k-icon k-i-caret-alt-up"></span>
+            <kendo-icon-wrapper name="caret-alt-up" [svgIcon]="caretAltUpIcon"></kendo-icon-wrapper>
         </span>
 
         <span class="k-event-bottom-actions" *ngIf="item.head && vertical">
-            <span class="k-icon k-i-caret-alt-down"></span>
+            <kendo-icon-wrapper name="caret-alt-down" [svgIcon]="caretAltDownIcon"></kendo-icon-wrapper>
         </span>
 
         <ng-container *ngIf="resizable && vertical">
@@ -14660,12 +14827,12 @@ const DIRECTIVES = [TimeSlotDirective, DaySlotDirective, DayTimeViewItemComponen
 class DayTimeModule {
 }
 DayTimeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DayTimeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DayTimeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DayTimeModule, declarations: [TimeSlotDirective, DaySlotDirective, DayTimeViewItemComponent], imports: [CommonModule, SharedModule, ViewsSharedModule], exports: [TimeSlotDirective, DaySlotDirective, DayTimeViewItemComponent] });
-DayTimeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DayTimeModule, imports: [[CommonModule, SharedModule, ViewsSharedModule]] });
+DayTimeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DayTimeModule, declarations: [TimeSlotDirective, DaySlotDirective, DayTimeViewItemComponent], imports: [CommonModule, SharedModule, ViewsSharedModule, IconsModule], exports: [TimeSlotDirective, DaySlotDirective, DayTimeViewItemComponent] });
+DayTimeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DayTimeModule, imports: [[CommonModule, SharedModule, ViewsSharedModule, IconsModule]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DayTimeModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule, SharedModule, ViewsSharedModule],
+                    imports: [CommonModule, SharedModule, ViewsSharedModule, IconsModule],
                     exports: [
                         DIRECTIVES
                     ],
@@ -17131,7 +17298,7 @@ PDFCommandDirective.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
         </span>
         <span *ngIf="iconClass" class="k-button-icon" [ngClass]="iconClass"></span>
         <span class="k-button-text"><ng-content></ng-content></span>
-    `, isInline: true, components: [{ type: i3$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i11.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    `, isInline: true, components: [{ type: i4.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i11.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PDFCommandDirective, decorators: [{
             type: Component,
             args: [{