@progress/kendo-angular-scheduler 13.0.0-develop.2 → 13.0.0-develop.21

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

@@ -14,7 +14,7 @@ import { validatePackage } from '@progress/kendo-licensing';
 import * as i6 from '@progress/kendo-angular-dateinputs';
 import { PreventableEvent as PreventableEvent$1, CalendarModule, DateInputsModule } from '@progress/kendo-angular-dateinputs';
 import { Subject, BehaviorSubject, fromEvent, Subscription, combineLatest, merge } from 'rxjs';
-import * as i12 from '@angular/forms';
+import * as i14 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import * as i1 from '@progress/kendo-angular-dialog';
 import { DialogCloseResult, DialogModule } from '@progress/kendo-angular-dialog';
@@ -22,18 +22,18 @@ 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, arrowRotateCwIcon, arrowsNoRepeatIcon, xIcon, moreHorizontalIcon, clockIcon, caretAltUpIcon, caretAltDownIcon } from '@progress/kendo-svg-icons';
-import * as i3 from '@progress/kendo-angular-buttons';
+import { caretAltLeftIcon, caretAltRightIcon, calendarIcon, saveIcon, cancelOutlineIcon, arrowRotateCwIcon, arrowsNoRepeatIcon, xIcon, moreHorizontalIcon, clockIcon, caretAltUpIcon, caretAltDownIcon } from '@progress/kendo-svg-icons';
+import * as i4 from '@progress/kendo-angular-buttons';
 import { Button, ButtonsModule } from '@progress/kendo-angular-buttons';
 import * as i11 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i1$3 from '@progress/kendo-angular-dropdowns';
 import { DropDownsModule } from '@progress/kendo-angular-dropdowns';
-import { parseRule, serializeRule, expand } from '@progress/kendo-recurrence';
-import * as i4 from '@progress/kendo-angular-label';
+import * as i5 from '@progress/kendo-angular-inputs';
+import { CheckBoxModule, TextAreaModule, NumericTextBoxModule, TextBoxModule, FormFieldModule } from '@progress/kendo-angular-inputs';
+import * as i3 from '@progress/kendo-angular-label';
 import { LabelModule } from '@progress/kendo-angular-label';
-import * as i14 from '@progress/kendo-angular-inputs';
-import { CheckBoxModule, TextAreaModule, NumericTextBoxModule, TextBoxModule } from '@progress/kendo-angular-inputs';
+import { parseRule, serializeRule, expand } from '@progress/kendo-recurrence';
 import { orderBy, groupBy } from '@progress/kendo-data-query';
 import * as i4$1 from '@progress/kendo-angular-icons';
 import { IconsModule } from '@progress/kendo-angular-icons';
@@ -48,8 +48,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-scheduler',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1684846737,
-    version: '13.0.0-develop.2',
+    publishDate: 1685972982,
+    version: '13.0.0-develop.21',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -2485,6 +2485,12 @@ class ToolbarNavigationComponent {
         this.dateRangeText.current = isDesktop ? this.dateRangeText.long : this.dateRangeText.short;
         this.cd.detectChanges();
     }
+    get arrowIcons() {
+        return !this.localization.rtl ? ['caret-alt-left', 'caret-alt-right'] : ['caret-alt-right', 'caret-alt-left'];
+    }
+    get arrowSVGIcons() {
+        return !this.localization.rtl ? ['caretAltLeftIcon', 'caretAltRightIcon'] : ['caretAltRightIcon', 'caretAltLeftIcon'];
+    }
 }
 ToolbarNavigationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ToolbarNavigationComponent, deps: [{ token: i1$2.PopupService }, { token: ToolbarService }, { token: i1$1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: ViewContextService }], target: i0.ɵɵFactoryTarget.Component });
 ToolbarNavigationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ToolbarNavigationComponent, selector: "[kendoSchedulerToolbarNavigation]", inputs: { min: "min", max: "max" }, host: { properties: { "class.k-toolbar-group": "this.hostClass" } }, providers: [
@@ -2502,8 +2508,8 @@ ToolbarNavigationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
             <button kendoButton
                 (click)="prevClick()"
                 class="k-nav-prev"
-                icon="caret-alt-left"
-                [svgIcon]="svgIcon('caretAltLeftIcon')"
+                [icon]="arrowIcons[0]"
+                [svgIcon]="svgIcon(arrowSVGIcons[0])"
                 [attr.title]="previousText"
                 [attr.aria-label]="previousText"
                 [kendoSchedulerFocusIndex]="0"
@@ -2513,8 +2519,8 @@ ToolbarNavigationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
                 (click)="nextClick()"
                 type="button"
                 class="k-nav-next"
-                icon="caret-alt-right"
-                [svgIcon]="svgIcon('caretAltRightIcon')"
+                [icon]="arrowIcons[1]"
+                [svgIcon]="svgIcon(arrowSVGIcons[1])"
                 [attr.title]="nextText"
                 [attr.aria-label]="nextText"
                 [kendoSchedulerFocusIndex]="0"
@@ -2551,7 +2557,7 @@ ToolbarNavigationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
                 </kendo-calendar-messages>
             </kendo-calendar>
         </ng-template>
-    `, isInline: true, components: [{ 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"] }, { type: i6.CalendarComponent, selector: "kendo-calendar", inputs: ["id", "focusedDate", "min", "max", "rangeValidation", "selection", "value", "disabled", "tabindex", "tabIndex", "disabledDates", "navigation", "activeView", "bottomView", "topView", "type", "animateNavigation", "weekNumber", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "navigationItemTemplate", "size"], outputs: ["activeViewChange", "navigate", "activeViewDateChange", "blur", "focus", "valueChange"], exportAs: ["kendo-calendar"] }, { type: i6.CalendarCustomMessagesComponent, selector: "kendo-calendar-messages" }], directives: [{ type: FocusableDirective, selector: "[kendoSchedulerFocusIndex]", inputs: ["kendoSchedulerFocusIndex", "containerType"] }], pipes: { "async": i11.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, components: [{ type: i4.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"] }, { type: i6.CalendarComponent, selector: "kendo-calendar", inputs: ["id", "focusedDate", "min", "max", "rangeValidation", "selection", "value", "disabled", "tabindex", "tabIndex", "disabledDates", "navigation", "activeView", "bottomView", "topView", "type", "animateNavigation", "weekNumber", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "navigationItemTemplate", "size"], outputs: ["activeViewChange", "navigate", "activeViewDateChange", "blur", "focus", "valueChange"], exportAs: ["kendo-calendar"] }, { type: i6.CalendarCustomMessagesComponent, selector: "kendo-calendar-messages" }], directives: [{ type: FocusableDirective, selector: "[kendoSchedulerFocusIndex]", inputs: ["kendoSchedulerFocusIndex", "containerType"] }], pipes: { "async": i11.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ToolbarNavigationComponent, decorators: [{
             type: Component,
             args: [{
@@ -2574,8 +2580,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             <button kendoButton
                 (click)="prevClick()"
                 class="k-nav-prev"
-                icon="caret-alt-left"
-                [svgIcon]="svgIcon('caretAltLeftIcon')"
+                [icon]="arrowIcons[0]"
+                [svgIcon]="svgIcon(arrowSVGIcons[0])"
                 [attr.title]="previousText"
                 [attr.aria-label]="previousText"
                 [kendoSchedulerFocusIndex]="0"
@@ -2585,8 +2591,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 (click)="nextClick()"
                 type="button"
                 class="k-nav-next"
-                icon="caret-alt-right"
-                [svgIcon]="svgIcon('caretAltRightIcon')"
+                [icon]="arrowIcons[1]"
+                [svgIcon]="svgIcon(arrowSVGIcons[1])"
                 [attr.title]="nextText"
                 [attr.aria-label]="nextText"
                 [kendoSchedulerFocusIndex]="0"
@@ -2742,7 +2748,7 @@ ToolbarViewSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
                 </span>
             </button>
         </span>
-    `, isInline: true, components: [{ 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: FocusableDirective, selector: "[kendoSchedulerFocusIndex]", inputs: ["kendoSchedulerFocusIndex", "containerType"] }, { type: i11.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+    `, isInline: true, components: [{ type: i4.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: FocusableDirective, selector: "[kendoSchedulerFocusIndex]", inputs: ["kendoSchedulerFocusIndex", "containerType"] }, { type: i11.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ToolbarViewSelectorComponent, decorators: [{
             type: Component,
             args: [{
@@ -3151,6 +3157,12 @@ class SchedulerDateTimePickerComponent {
         this.onTouchedCallback = (_) => { };
         this.onChangeCallback = (_) => { };
     }
+    /**
+     * @hidden
+     */
+    get focusableId() {
+        return this.isAllDay ? this.datePicker?.focusableId : this.dateTimePicker?.focusableId;
+    }
     writeValue(newDate) {
         if (newDate instanceof Date) {
             this.date = newDate;
@@ -3164,7 +3176,7 @@ class SchedulerDateTimePickerComponent {
      * @hidden
      */
     focus() {
-        this.datePicker.focus();
+        this.datePicker ? this.datePicker.focus() : this.dateTimePicker.focus();
     }
     /**
      * @hidden
@@ -3182,19 +3194,20 @@ class SchedulerDateTimePickerComponent {
 SchedulerDateTimePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SchedulerDateTimePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
 SchedulerDateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: SchedulerDateTimePickerComponent, selector: "kendo-scheduler-datetime-picker", inputs: { isAllDay: "isAllDay" }, outputs: { valueChange: "valueChange" }, providers: [
         SCHEDULER_DATETIMEPICKER_VALUE_ACCESSOR
-    ], viewQueries: [{ propertyName: "datePicker", first: true, predicate: ["datepicker"], descendants: true, static: true }], ngImport: i0, template: `
+    ], viewQueries: [{ propertyName: "datePicker", first: true, predicate: ["datepicker"], descendants: true }, { propertyName: "dateTimePicker", first: true, predicate: ["datetimepicker"], descendants: true }], ngImport: i0, template: `
     <kendo-datepicker
+        *ngIf='isAllDay'
         #datepicker
         [(value)]='date'
         (valueChange)='onValueChange($event)'
-        [style.width.px]="170"
     ></kendo-datepicker>
-    <kendo-timepicker *ngIf='!isAllDay'
+    <kendo-datetimepicker
+        *ngIf='!isAllDay'
+        #datetimepicker
         [(value)]='date'
         (valueChange)='onValueChange($event)'
-        [style.width.px]="170"
-    ></kendo-timepicker>
-    `, isInline: true, components: [{ type: i6.DatePickerComponent, selector: "kendo-datepicker", inputs: ["focusableId", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "navigationItemTemplate", "activeView", "bottomView", "topView", "calendarType", "animateCalendarNavigation", "disabled", "readonly", "readOnlyInput", "popupSettings", "navigation", "min", "max", "incompleteDateValidation", "focusedDate", "value", "format", "twoDigitYearMax", "formatPlaceholder", "placeholder", "tabindex", "tabIndex", "disabledDates", "title", "subtitle", "rangeValidation", "disabledDatesValidation", "weekNumber", "size", "rounded", "fillMode", "adaptiveMode"], outputs: ["valueChange", "focus", "blur", "open", "close"], exportAs: ["kendo-datepicker"] }, { type: i6.TimePickerComponent, selector: "kendo-timepicker", inputs: ["focusableId", "disabled", "readonly", "readOnlyInput", "format", "formatPlaceholder", "placeholder", "min", "max", "incompleteDateValidation", "cancelButton", "nowButton", "steps", "popupSettings", "tabindex", "tabIndex", "title", "subtitle", "rangeValidation", "adaptiveMode", "value", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur", "open", "close"], exportAs: ["kendo-timepicker"] }], directives: [{ type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    >
+    `, isInline: true, components: [{ type: i6.DatePickerComponent, selector: "kendo-datepicker", inputs: ["focusableId", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "navigationItemTemplate", "activeView", "bottomView", "topView", "calendarType", "animateCalendarNavigation", "disabled", "readonly", "readOnlyInput", "popupSettings", "navigation", "min", "max", "incompleteDateValidation", "focusedDate", "value", "format", "twoDigitYearMax", "formatPlaceholder", "placeholder", "tabindex", "tabIndex", "disabledDates", "title", "subtitle", "rangeValidation", "disabledDatesValidation", "weekNumber", "size", "rounded", "fillMode", "adaptiveMode"], outputs: ["valueChange", "focus", "blur", "open", "close"], exportAs: ["kendo-datepicker"] }, { type: i6.DateTimePickerComponent, selector: "kendo-datetimepicker", inputs: ["focusableId", "value", "format", "twoDigitYearMax", "tabindex", "disabledDates", "popupSettings", "title", "subtitle", "disabled", "readonly", "readOnlyInput", "cancelButton", "formatPlaceholder", "placeholder", "steps", "focusedDate", "calendarType", "animateCalendarNavigation", "weekNumber", "min", "max", "rangeValidation", "disabledDatesValidation", "incompleteDateValidation", "adaptiveMode", "defaultTab", "size", "rounded", "fillMode"], outputs: ["valueChange", "open", "close", "focus", "blur"], exportAs: ["kendo-datetimepicker"] }], directives: [{ type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SchedulerDateTimePickerComponent, decorators: [{
             type: Component,
             args: [{
@@ -3204,21 +3217,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     selector: 'kendo-scheduler-datetime-picker',
                     template: `
     <kendo-datepicker
+        *ngIf='isAllDay'
         #datepicker
         [(value)]='date'
         (valueChange)='onValueChange($event)'
-        [style.width.px]="170"
     ></kendo-datepicker>
-    <kendo-timepicker *ngIf='!isAllDay'
+    <kendo-datetimepicker
+        *ngIf='!isAllDay'
+        #datetimepicker
         [(value)]='date'
         (valueChange)='onValueChange($event)'
-        [style.width.px]="170"
-    ></kendo-timepicker>
+    >
     `
                 }]
         }], propDecorators: { datePicker: [{
                 type: ViewChild,
-                args: ['datepicker', { static: true }]
+                args: ['datepicker']
+            }], dateTimePicker: [{
+                type: ViewChild,
+                args: ['datetimepicker']
             }], isAllDay: [{
                 type: Input
             }], valueChange: [{
@@ -3253,6 +3270,12 @@ class TimeZoneEditorComponent {
         this.tzNames = timezoneNames();
         this.tzSource = this.tzNames.slice();
     }
+    /**
+     * @hidden
+     */
+    get focusableId() {
+        return this.tzComboBox.focusableId;
+    }
     /**
      * @hidden
      */
@@ -3643,12 +3666,18 @@ class RecurrenceFrequencyEditorComponent {
 RecurrenceFrequencyEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RecurrenceFrequencyEditorComponent, deps: [{ token: RecurrenceService }, { token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
 RecurrenceFrequencyEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: RecurrenceFrequencyEditorComponent, selector: "kendo-recurrence-frequency-editor", viewQueries: [{ propertyName: "weekDayButtons", predicate: Button, descendants: true }], ngImport: i0, template: `
         <div class='k-form-field'>
-            <label class="k-form-label" (click)="onFrequencyClick()">{{ textFor('repeat') }}</label>
-
-            <div class='k-form-field-wrap'>
-                <kendo-buttongroup [selection]="'single'">
+            <kendo-label
+                [text]="textFor('repeat')"
+                (click)="onFrequencyClick()"
+                labelCssClass="k-form-label"
+            ></kendo-label>
+            <div class="k-form-field-wrap">
+                <kendo-buttongroup
+                    class="k-scheduler-recurrence-repeat k-button-group-solid"
+                    width="100%"
+                    selection="single"
+                >
                     <button *ngFor='let freq of frequencies' kendoButton
-                            [style.width.px]="100"
                             [togglable]="true"
                             [selected]="freq.value === selected"
                             (click)="onClick(freq)"
@@ -3656,19 +3685,25 @@ RecurrenceFrequencyEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersio
                 </kendo-buttongroup>
             </div>
         </div>
-    `, isInline: true, components: [{ type: i3.ButtonGroupComponent, selector: "kendo-buttongroup", inputs: ["disabled", "selection", "width", "tabIndex", "navigable"], outputs: ["navigate"], exportAs: ["kendoButtonGroup"] }, { 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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+    `, isInline: true, components: [{ type: i3.LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional", "labelCssStyle", "labelCssClass"], exportAs: ["kendoLabel"] }, { type: i4.ButtonGroupComponent, selector: "kendo-buttongroup", inputs: ["disabled", "selection", "width", "tabIndex", "navigable"], outputs: ["navigate"], exportAs: ["kendoButtonGroup"] }, { type: i4.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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RecurrenceFrequencyEditorComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-recurrence-frequency-editor',
                     template: `
         <div class='k-form-field'>
-            <label class="k-form-label" (click)="onFrequencyClick()">{{ textFor('repeat') }}</label>
-
-            <div class='k-form-field-wrap'>
-                <kendo-buttongroup [selection]="'single'">
+            <kendo-label
+                [text]="textFor('repeat')"
+                (click)="onFrequencyClick()"
+                labelCssClass="k-form-label"
+            ></kendo-label>
+            <div class="k-form-field-wrap">
+                <kendo-buttongroup
+                    class="k-scheduler-recurrence-repeat k-button-group-solid"
+                    width="100%"
+                    selection="single"
+                >
                     <button *ngFor='let freq of frequencies' kendoButton
-                            [style.width.px]="100"
                             [togglable]="true"
                             [selected]="freq.value === selected"
                             (click)="onClick(freq)"
@@ -3690,6 +3725,7 @@ class RecurrenceIntervalEditorComponent {
     constructor(recurrence, localization) {
         this.recurrence = recurrence;
         this.localization = localization;
+        this.cssClass = true;
         this.numericOptions = {
             min: 1,
             format: '#',
@@ -3750,13 +3786,18 @@ class RecurrenceIntervalEditorComponent {
     }
 }
 RecurrenceIntervalEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RecurrenceIntervalEditorComponent, deps: [{ token: RecurrenceService }, { token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-RecurrenceIntervalEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: RecurrenceIntervalEditorComponent, selector: "kendo-recurrence-interval-editor", inputs: { userNumericOptions: "userNumericOptions" }, ngImport: i0, template: `
-        <div class='k-form-field'>
-            <kendo-label class="k-form-label" [for]="intervalNumeric" (click)="intervalNumeric.focus()" [text]="textForRepeatEvery()"></kendo-label>
+RecurrenceIntervalEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: RecurrenceIntervalEditorComponent, selector: "kendo-recurrence-interval-editor", inputs: { userNumericOptions: "userNumericOptions" }, host: { properties: { "class.k-scheduler-recurrence-interval-editor": "this.cssClass" } }, ngImport: i0, template: `
+        <div class="k-form-field">
+            <kendo-label
+                [for]="intervalNumeric"
+                [text]="textForRepeatEvery()"
+                labelCssClass="k-form-label"
+                (click)="intervalNumeric.focus()"
+            ></kendo-label>
             <div class="k-form-field-wrap">
                 <kendo-numerictextbox
                     #intervalNumeric
-                    [style.width.px]="70"
+                    class="k-recur-interval"
                     [min]="numericOptions.min"
                     [max]="numericOptions.max"
                     [decimals]="0"
@@ -3771,22 +3812,26 @@ RecurrenceIntervalEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion
                     (blur)="onIntervalBlur()"
                     (valueChange)="onIntervalChange($event)">
                 </kendo-numerictextbox>
-
-                <span>{{ textForFrequency() }}</span>
+                <span>&nbsp;{{ textForFrequency() }}</span>
             </div>
         </div>
-    `, isInline: true, components: [{ type: i4.LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional"], exportAs: ["kendoLabel"] }, { type: i14.NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur"], exportAs: ["kendoNumericTextBox"] }] });
+    `, isInline: true, components: [{ type: i3.LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional", "labelCssStyle", "labelCssClass"], exportAs: ["kendoLabel"] }, { type: i5.NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur"], exportAs: ["kendoNumericTextBox"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RecurrenceIntervalEditorComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-recurrence-interval-editor',
                     template: `
-        <div class='k-form-field'>
-            <kendo-label class="k-form-label" [for]="intervalNumeric" (click)="intervalNumeric.focus()" [text]="textForRepeatEvery()"></kendo-label>
+        <div class="k-form-field">
+            <kendo-label
+                [for]="intervalNumeric"
+                [text]="textForRepeatEvery()"
+                labelCssClass="k-form-label"
+                (click)="intervalNumeric.focus()"
+            ></kendo-label>
             <div class="k-form-field-wrap">
                 <kendo-numerictextbox
                     #intervalNumeric
-                    [style.width.px]="70"
+                    class="k-recur-interval"
                     [min]="numericOptions.min"
                     [max]="numericOptions.max"
                     [decimals]="0"
@@ -3801,13 +3846,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     (blur)="onIntervalBlur()"
                     (valueChange)="onIntervalChange($event)">
                 </kendo-numerictextbox>
-
-                <span>{{ textForFrequency() }}</span>
+                <span>&nbsp;{{ textForFrequency() }}</span>
             </div>
         </div>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: RecurrenceService }, { type: i1$1.LocalizationService }]; }, propDecorators: { userNumericOptions: [{
+        }], ctorParameters: function () { return [{ type: RecurrenceService }, { type: i1$1.LocalizationService }]; }, propDecorators: { cssClass: [{
+                type: HostBinding,
+                args: ['class.k-scheduler-recurrence-interval-editor']
+            }], userNumericOptions: [{
                 type: Input
             }] } });
 
@@ -3866,36 +3913,52 @@ class RecurrenceWeekdayRuleEditorComponent {
 }
 RecurrenceWeekdayRuleEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RecurrenceWeekdayRuleEditorComponent, deps: [{ token: RecurrenceService }, { token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
 RecurrenceWeekdayRuleEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: RecurrenceWeekdayRuleEditorComponent, selector: "kendo-recurrence-weekday-rule-editor", viewQueries: [{ propertyName: "weekDayButtons", predicate: Button, descendants: true }], ngImport: i0, template: `
-        <div class='k-form-field'>
-            <label class='k-form-label' (click)="onWeeklyRepeatOnClick()">{{ textFor('weeklyRepeatOn') }}</label>
-
-            <div class='k-form-field-wrap'>
-                <kendo-buttongroup [selection]="'multiple'">
-                    <button *ngFor='let day of weekDays' kendoButton
-                            [style.width.px]="75"
-                            [toggleable]="true"
-                            [selected]="isSelected(day)"
-                            (selectedChange)="onSelectedChange($event, day.value)"
+        <div class="k-form-field">
+            <kendo-label
+                [text]="textFor('weeklyRepeatOn')"
+                labelCssClass="k-form-label"
+                (click)="onWeeklyRepeatOnClick()"
+            ></kendo-label>
+            <div class="k-form-field-wrap">
+                <kendo-buttongroup
+                    class="k-button-group-solid"
+                    width="100%"
+                    selection="multiple"
+                >
+                    <button
+                        *ngFor='let day of weekDays'
+                        kendoButton
+                        [toggleable]="true"
+                        [selected]="isSelected(day)"
+                        (selectedChange)="onSelectedChange($event, day.value)"
                     >{{ capitalize(day.text) }}</button>
                 </kendo-buttongroup>
             </div>
         </div>
-    `, isInline: true, components: [{ type: i3.ButtonGroupComponent, selector: "kendo-buttongroup", inputs: ["disabled", "selection", "width", "tabIndex", "navigable"], outputs: ["navigate"], exportAs: ["kendoButtonGroup"] }, { 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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+    `, isInline: true, components: [{ type: i3.LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional", "labelCssStyle", "labelCssClass"], exportAs: ["kendoLabel"] }, { type: i4.ButtonGroupComponent, selector: "kendo-buttongroup", inputs: ["disabled", "selection", "width", "tabIndex", "navigable"], outputs: ["navigate"], exportAs: ["kendoButtonGroup"] }, { type: i4.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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RecurrenceWeekdayRuleEditorComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-recurrence-weekday-rule-editor',
                     template: `
-        <div class='k-form-field'>
-            <label class='k-form-label' (click)="onWeeklyRepeatOnClick()">{{ textFor('weeklyRepeatOn') }}</label>
-
-            <div class='k-form-field-wrap'>
-                <kendo-buttongroup [selection]="'multiple'">
-                    <button *ngFor='let day of weekDays' kendoButton
-                            [style.width.px]="75"
-                            [toggleable]="true"
-                            [selected]="isSelected(day)"
-                            (selectedChange)="onSelectedChange($event, day.value)"
+        <div class="k-form-field">
+            <kendo-label
+                [text]="textFor('weeklyRepeatOn')"
+                labelCssClass="k-form-label"
+                (click)="onWeeklyRepeatOnClick()"
+            ></kendo-label>
+            <div class="k-form-field-wrap">
+                <kendo-buttongroup
+                    class="k-button-group-solid"
+                    width="100%"
+                    selection="multiple"
+                >
+                    <button
+                        *ngFor='let day of weekDays'
+                        kendoButton
+                        [toggleable]="true"
+                        [selected]="isSelected(day)"
+                        (selectedChange)="onSelectedChange($event, day.value)"
                     >{{ capitalize(day.text) }}</button>
                 </kendo-buttongroup>
             </div>
@@ -4195,192 +4258,200 @@ class RecurrenceMonthlyYearlyEditorComponent {
 RecurrenceMonthlyYearlyEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RecurrenceMonthlyYearlyEditorComponent, deps: [{ token: RecurrenceService }, { token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
 RecurrenceMonthlyYearlyEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: RecurrenceMonthlyYearlyEditorComponent, selector: "kendo-recurrence-monthly-yearly-editor", inputs: { userNumericOptions: "userNumericOptions" }, viewQueries: [{ propertyName: "repeatOnRadioButtons", predicate: RepeatOnRadioButtonDirective, descendants: true }], ngImport: i0, template: `
         <div class='k-form-field'>
-            <label class='k-form-label' (click)="onRepeatOnLabelClick()">{{ textForRepeatOn() }}</label>
-
-            <ul class='k-form-field-wrap k-reset' [style.width.px]='650'>
-                <li class='k-radio-item'>
-                    <input kendoRecurrenceRepeatOnRadioButton='monthday-{{uniqueId}}' />
-
-                    <label class='k-radio-label' for='k-repeaton-monthday-{{uniqueId}}'>
-                        <ng-template [ngIf]="currentFreq === 'monthly'">
-                            {{ textFor('monthlyDay') }}
+            <kendo-label
+                [text]="textForRepeatOn()"
+                labelCssClass="k-form-label"
+                (click)="onRepeatOnLabelClick()"
+            ></kendo-label>
+            <div class="k-form-field-wrap">
+                <ul class='k-radio-list'>
+                    <li class='k-radio-list-item'>
+                        <span class="k-radio-wrap">
+                            <input kendoRecurrenceRepeatOnRadioButton='monthday-{{uniqueId}}' />
+                        </span>
+                        <label [labelClass]="false" class='k-radio-label' for='k-repeaton-monthday-{{uniqueId}}'>
+                            <ng-template [ngIf]="currentFreq === 'monthly'">
+                                {{ textFor('monthlyDay') }}
+                            </ng-template>
+                        </label>
+
+                        <ng-template [ngIf]="currentFreq === 'yearly'">
+                            <kendo-dropdownlist
+                                [data]='months'
+                                textField='text'
+                                valueField='value'
+                                [value]='currentMonthMonthDay'
+                                [valuePrimitive]='true'
+                                (valueChange)="onMonthChange($event, 'monthday')"
+                                [disabled]="isDisabled('monthday')"
+                                [style.width.px]="170"
+                                [style.margin]="'0 .4ex 0 1ex'">
+                            </kendo-dropdownlist>
                         </ng-template>
-                    </label>
 
-                    <ng-template [ngIf]="currentFreq === 'yearly'">
+                        <kendo-numerictextbox
+                            class="k-recur-monthday"
+                            [min]="numericOptions.min"
+                            [max]="numericOptions.max"
+                            [decimals]="0"
+                            [format]="numericOptions.format"
+                            [autoCorrect]="numericOptions.autoCorrect"
+                            [readonly]="numericOptions.readonly"
+                            [selectOnFocus]="numericOptions.selectOnFocus"
+                            [spinners]="numericOptions.spinners"
+                            [step]="numericOptions.step"
+                            [title]="numericOptions.title"
+                            [value]='monthDay'
+                            (valueChange)='onMonthDayChange($event)'
+                            [disabled]="isDisabled('monthday')">
+                        </kendo-numerictextbox>
+                    </li>
+                    <li class='k-radio-list-item'>
+                        <span class="k-radio-wrap">
+                            <input kendoRecurrenceRepeatOnRadioButton='weekday-{{uniqueId}}' />
+                        </span>
+                        <label [labelClass]="false" class='k-radio-label' for='k-repeaton-weekday-{{uniqueId}}'></label>
+
                         <kendo-dropdownlist
-                            [data]='months'
+                            [data]='offsetPositions'
                             textField='text'
                             valueField='value'
-                            [value]='currentMonthMonthDay'
+                            [value]='offset'
                             [valuePrimitive]='true'
-                            (valueChange)="onMonthChange($event, 'monthday')"
-                            [disabled]="isDisabled('monthday')"
-                            [style.width.px]="170"
+                            (valueChange)='onOffsetPositionChange($event)'
+                            [disabled]="isDisabled('weekday')"
                             [style.margin]="'0 .4ex 0 1ex'">
                         </kendo-dropdownlist>
-                    </ng-template>
-
-                    <kendo-numerictextbox
-                        [style.width.px]='70'
-                        [min]="numericOptions.min"
-                        [max]="numericOptions.max"
-                        [decimals]="0"
-                        [format]="numericOptions.format"
-                        [autoCorrect]="numericOptions.autoCorrect"
-                        [readonly]="numericOptions.readonly"
-                        [selectOnFocus]="numericOptions.selectOnFocus"
-                        [spinners]="numericOptions.spinners"
-                        [step]="numericOptions.step"
-                        [title]="numericOptions.title"
-                        [value]='monthDay'
-                        (valueChange)='onMonthDayChange($event)'
-                        [disabled]="isDisabled('monthday')"
-                        [style.margin]="'0 .4ex 0 1ex'">
-                    </kendo-numerictextbox>
-                </li>
-                <li class='k-radio-item'>
-                    <input kendoRecurrenceRepeatOnRadioButton='weekday-{{uniqueId}}' />
-                    <label class='k-radio-label' for='k-repeaton-weekday-{{uniqueId}}'></label>
-
-                    <kendo-dropdownlist
-                        [data]='offsetPositions'
-                        textField='text'
-                        valueField='value'
-                        [value]='offset'
-                        [valuePrimitive]='true'
-                        (valueChange)='onOffsetPositionChange($event)'
-                        [disabled]="isDisabled('weekday')"
-                        [style.width.px]="170"
-                        [style.margin]="'0 .4ex 0 1ex'">
-                    </kendo-dropdownlist>
-
-                    <kendo-dropdownlist
-                        [data]="extendedWeekDays"
-                        textField='text'
-                        valueField='value'
-                        [value]='weekDay'
-                        [valuePrimitive]='true'
-                        (valueChange)='onWeekDayChange($event)'
-                        [disabled]="isDisabled('weekday')"
-                        [style.width.px]="170"
-                        [style.margin]="'0 .4ex 0 1ex'">
-                    </kendo-dropdownlist>
-
-                    <ng-template [ngIf]="currentFreq === 'yearly'">
-                        <span>{{ textFor('yearlyOf') }}</span>
 
                         <kendo-dropdownlist
-                            [data]='months'
+                            [data]="extendedWeekDays"
                             textField='text'
                             valueField='value'
-                            [value]='currentMonthWeekDay'
+                            [value]='weekDay'
                             [valuePrimitive]='true'
-                            (valueChange)="onMonthChange($event, 'weekday')"
+                            (valueChange)='onWeekDayChange($event)'
                             [disabled]="isDisabled('weekday')"
-                            [style.width.px]="170"
                             [style.margin]="'0 .4ex 0 1ex'">
                         </kendo-dropdownlist>
-                    </ng-template>
-                </li>
-            </ul>
+
+                        <ng-template [ngIf]="currentFreq === 'yearly'">
+                            <span>{{ textFor('yearlyOf') }}</span>
+
+                            <kendo-dropdownlist
+                                [data]='months'
+                                textField='text'
+                                valueField='value'
+                                [value]='currentMonthWeekDay'
+                                [valuePrimitive]='true'
+                                (valueChange)="onMonthChange($event, 'weekday')"
+                                [disabled]="isDisabled('weekday')"
+                                [style.margin]="'0 .4ex 0 1ex'">
+                            </kendo-dropdownlist>
+                        </ng-template>
+                    </li>
+                </ul>
+            </div>
         </div>
-    `, isInline: true, components: [{ type: i1$3.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["iconClass", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { type: i14.NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur"], exportAs: ["kendoNumericTextBox"] }], directives: [{ type: RepeatOnRadioButtonDirective, selector: "[kendoRecurrenceRepeatOnRadioButton]", inputs: ["kendoRecurrenceRepeatOnRadioButton"] }, { type: i4.LabelDirective, selector: "label[for]", inputs: ["for"] }, { type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    `, isInline: true, components: [{ type: i3.LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional", "labelCssStyle", "labelCssClass"], exportAs: ["kendoLabel"] }, { type: i1$3.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["iconClass", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { type: i5.NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur"], exportAs: ["kendoNumericTextBox"] }], directives: [{ type: RepeatOnRadioButtonDirective, selector: "[kendoRecurrenceRepeatOnRadioButton]", inputs: ["kendoRecurrenceRepeatOnRadioButton"] }, { type: i3.LabelDirective, selector: "label[for]", inputs: ["for", "labelClass"] }, { type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RecurrenceMonthlyYearlyEditorComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-recurrence-monthly-yearly-editor',
                     template: `
         <div class='k-form-field'>
-            <label class='k-form-label' (click)="onRepeatOnLabelClick()">{{ textForRepeatOn() }}</label>
-
-            <ul class='k-form-field-wrap k-reset' [style.width.px]='650'>
-                <li class='k-radio-item'>
-                    <input kendoRecurrenceRepeatOnRadioButton='monthday-{{uniqueId}}' />
-
-                    <label class='k-radio-label' for='k-repeaton-monthday-{{uniqueId}}'>
-                        <ng-template [ngIf]="currentFreq === 'monthly'">
-                            {{ textFor('monthlyDay') }}
+            <kendo-label
+                [text]="textForRepeatOn()"
+                labelCssClass="k-form-label"
+                (click)="onRepeatOnLabelClick()"
+            ></kendo-label>
+            <div class="k-form-field-wrap">
+                <ul class='k-radio-list'>
+                    <li class='k-radio-list-item'>
+                        <span class="k-radio-wrap">
+                            <input kendoRecurrenceRepeatOnRadioButton='monthday-{{uniqueId}}' />
+                        </span>
+                        <label [labelClass]="false" class='k-radio-label' for='k-repeaton-monthday-{{uniqueId}}'>
+                            <ng-template [ngIf]="currentFreq === 'monthly'">
+                                {{ textFor('monthlyDay') }}
+                            </ng-template>
+                        </label>
+
+                        <ng-template [ngIf]="currentFreq === 'yearly'">
+                            <kendo-dropdownlist
+                                [data]='months'
+                                textField='text'
+                                valueField='value'
+                                [value]='currentMonthMonthDay'
+                                [valuePrimitive]='true'
+                                (valueChange)="onMonthChange($event, 'monthday')"
+                                [disabled]="isDisabled('monthday')"
+                                [style.width.px]="170"
+                                [style.margin]="'0 .4ex 0 1ex'">
+                            </kendo-dropdownlist>
                         </ng-template>
-                    </label>
 
-                    <ng-template [ngIf]="currentFreq === 'yearly'">
+                        <kendo-numerictextbox
+                            class="k-recur-monthday"
+                            [min]="numericOptions.min"
+                            [max]="numericOptions.max"
+                            [decimals]="0"
+                            [format]="numericOptions.format"
+                            [autoCorrect]="numericOptions.autoCorrect"
+                            [readonly]="numericOptions.readonly"
+                            [selectOnFocus]="numericOptions.selectOnFocus"
+                            [spinners]="numericOptions.spinners"
+                            [step]="numericOptions.step"
+                            [title]="numericOptions.title"
+                            [value]='monthDay'
+                            (valueChange)='onMonthDayChange($event)'
+                            [disabled]="isDisabled('monthday')">
+                        </kendo-numerictextbox>
+                    </li>
+                    <li class='k-radio-list-item'>
+                        <span class="k-radio-wrap">
+                            <input kendoRecurrenceRepeatOnRadioButton='weekday-{{uniqueId}}' />
+                        </span>
+                        <label [labelClass]="false" class='k-radio-label' for='k-repeaton-weekday-{{uniqueId}}'></label>
+
                         <kendo-dropdownlist
-                            [data]='months'
+                            [data]='offsetPositions'
                             textField='text'
                             valueField='value'
-                            [value]='currentMonthMonthDay'
+                            [value]='offset'
                             [valuePrimitive]='true'
-                            (valueChange)="onMonthChange($event, 'monthday')"
-                            [disabled]="isDisabled('monthday')"
-                            [style.width.px]="170"
+                            (valueChange)='onOffsetPositionChange($event)'
+                            [disabled]="isDisabled('weekday')"
                             [style.margin]="'0 .4ex 0 1ex'">
                         </kendo-dropdownlist>
-                    </ng-template>
-
-                    <kendo-numerictextbox
-                        [style.width.px]='70'
-                        [min]="numericOptions.min"
-                        [max]="numericOptions.max"
-                        [decimals]="0"
-                        [format]="numericOptions.format"
-                        [autoCorrect]="numericOptions.autoCorrect"
-                        [readonly]="numericOptions.readonly"
-                        [selectOnFocus]="numericOptions.selectOnFocus"
-                        [spinners]="numericOptions.spinners"
-                        [step]="numericOptions.step"
-                        [title]="numericOptions.title"
-                        [value]='monthDay'
-                        (valueChange)='onMonthDayChange($event)'
-                        [disabled]="isDisabled('monthday')"
-                        [style.margin]="'0 .4ex 0 1ex'">
-                    </kendo-numerictextbox>
-                </li>
-                <li class='k-radio-item'>
-                    <input kendoRecurrenceRepeatOnRadioButton='weekday-{{uniqueId}}' />
-                    <label class='k-radio-label' for='k-repeaton-weekday-{{uniqueId}}'></label>
-
-                    <kendo-dropdownlist
-                        [data]='offsetPositions'
-                        textField='text'
-                        valueField='value'
-                        [value]='offset'
-                        [valuePrimitive]='true'
-                        (valueChange)='onOffsetPositionChange($event)'
-                        [disabled]="isDisabled('weekday')"
-                        [style.width.px]="170"
-                        [style.margin]="'0 .4ex 0 1ex'">
-                    </kendo-dropdownlist>
-
-                    <kendo-dropdownlist
-                        [data]="extendedWeekDays"
-                        textField='text'
-                        valueField='value'
-                        [value]='weekDay'
-                        [valuePrimitive]='true'
-                        (valueChange)='onWeekDayChange($event)'
-                        [disabled]="isDisabled('weekday')"
-                        [style.width.px]="170"
-                        [style.margin]="'0 .4ex 0 1ex'">
-                    </kendo-dropdownlist>
-
-                    <ng-template [ngIf]="currentFreq === 'yearly'">
-                        <span>{{ textFor('yearlyOf') }}</span>
 
                         <kendo-dropdownlist
-                            [data]='months'
+                            [data]="extendedWeekDays"
                             textField='text'
                             valueField='value'
-                            [value]='currentMonthWeekDay'
+                            [value]='weekDay'
                             [valuePrimitive]='true'
-                            (valueChange)="onMonthChange($event, 'weekday')"
+                            (valueChange)='onWeekDayChange($event)'
                             [disabled]="isDisabled('weekday')"
-                            [style.width.px]="170"
                             [style.margin]="'0 .4ex 0 1ex'">
                         </kendo-dropdownlist>
-                    </ng-template>
-                </li>
-            </ul>
+
+                        <ng-template [ngIf]="currentFreq === 'yearly'">
+                            <span>{{ textFor('yearlyOf') }}</span>
+
+                            <kendo-dropdownlist
+                                [data]='months'
+                                textField='text'
+                                valueField='value'
+                                [value]='currentMonthWeekDay'
+                                [valuePrimitive]='true'
+                                (valueChange)="onMonthChange($event, 'weekday')"
+                                [disabled]="isDisabled('weekday')"
+                                [style.margin]="'0 .4ex 0 1ex'">
+                            </kendo-dropdownlist>
+                        </ng-template>
+                    </li>
+                </ul>
+            </div>
         </div>
     `
                 }]
@@ -4460,6 +4531,7 @@ class RecurrenceEndRuleEditorComponent {
     constructor(recurrence, localization) {
         this.recurrence = recurrence;
         this.localization = localization;
+        this.cssClass = true;
         this.numericOptions = {
             min: 1,
             format: '#',
@@ -4559,142 +4631,167 @@ class RecurrenceEndRuleEditorComponent {
     }
 }
 RecurrenceEndRuleEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RecurrenceEndRuleEditorComponent, deps: [{ token: RecurrenceService }, { token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-RecurrenceEndRuleEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: RecurrenceEndRuleEditorComponent, selector: "kendo-recurrence-end-rule-editor", inputs: { userNumericOptions: "userNumericOptions", userDatePickerOptions: "userDatePickerOptions" }, viewQueries: [{ propertyName: "endRuleRadioButtons", predicate: EndRuleRadioButtonDirective, descendants: true }], ngImport: i0, template: `
-        <div class='k-form-field'>
-            <label class='k-form-label' (click)="onEndLabelClick()">{{ textFor('endLabel') }}</label>
-
-            <ul class='k-form-field-wrap k-reset'>
-                <li class='k-radio-item'>
-                    <input kendoRecurrenceEndRuleRadioButton='k-endrule-never-{{uniqueId}}' />
-                    <label class='k-radio-label' for='k-endrule-never-{{uniqueId}}'>{{ textFor('endNever') }}</label>
-                </li>
-                <li class='k-radio-item'>
-                    <input kendoRecurrenceEndRuleRadioButton='k-endrule-count-{{uniqueId}}' />
-                    <label class='k-radio-label' for='k-endrule-count-{{uniqueId}}'>{{ textFor('endAfter') }}</label>
-
-                    <kendo-numerictextbox
-                        #afterOccurances
-                        [style.width.px]='70'
-                        [autoCorrect]='numericOptions.autoCorrect'
-                        [decimals]='0'
-                        [disabled]='isCountDisabled'
-                        [format]="numericOptions.format"
-                        [min]='numericOptions.min'
-                        [max]="numericOptions.max"
-                        [readonly]="numericOptions.readonly"
-                        [selectOnFocus]="numericOptions.selectOnFocus"
-                        [spinners]="numericOptions.spinners"
-                        [step]="numericOptions.step"
-                        [title]="numericOptions.title"
-                        [(value)]='countValue'
-                        (blur)="onCountBlur()"
-                        (valueChange)='onCountChange($event)'>
-                    </kendo-numerictextbox>
-                    <kendo-label [for]="afterOccurances" [text]="textFor('endOccurrence')"></kendo-label>
-                </li>
-                <li class='k-radio-item'>
-                    <input kendoRecurrenceEndRuleRadioButton='k-endrule-until-{{uniqueId}}' />
-                    <label class='k-radio-label' for='k-endrule-until-{{uniqueId}}'>{{ textFor('endOn') }}</label>
-
-                    <kendo-datepicker
-                        [style.width.px]='150'
-                        [disabled]='isUntilDisabled'
-                        [activeView]="datePickerOptions.activeView"
-                        [bottomView]="datePickerOptions.bottomView"
-                        [disabledDatesValidation]="datePickerOptions.disabledDatesValidation"
-                        [focusedDate]="datePickerOptions.focusedDate"
-                        [format]="datePickerOptions.format"
-                        [formatPlaceholder]="datePickerOptions.formatPlaceHolder"
-                        [max]="datePickerOptions.max"
-                        [min]="datePickerOptions.min"
-                        [navigation]="datePickerOptions.navigation"
-                        [placeholder]="datePickerOptions.placeholder"
-                        [readOnlyInput]="datePickerOptions.readOnlyInput"
-                        [readonly]="datePickerOptions.readonly"
-                        [title]="datePickerOptions.title"
-                        [topView]="datePickerOptions.topView"
-                        [weekNumber]="datePickerOptions.weekNumber"
-                        [disabledDates]="datePickerOptions.disabledDates"
-                        [popupSettings]="datePickerOptions.popupSettings"
-                        [(value)]='untilValue'
-                        (blur)="onUntilBlur()"
-                        (valueChange)='onUntilChange($event)'>
-                    </kendo-datepicker>
-                </li>
-            </ul>
+RecurrenceEndRuleEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: RecurrenceEndRuleEditorComponent, selector: "kendo-recurrence-end-rule-editor", inputs: { userNumericOptions: "userNumericOptions", userDatePickerOptions: "userDatePickerOptions" }, host: { properties: { "class.k-scheduler-recurrence-end-rule-editor": "this.cssClass" } }, viewQueries: [{ propertyName: "endRuleRadioButtons", predicate: EndRuleRadioButtonDirective, descendants: true }], ngImport: i0, template: `
+        <div class="k-form-field">
+            <kendo-label
+                [text]="textFor('endLabel')"
+                (click)="onEndLabelClick()"
+                labelCssClass="k-form-label"
+            ></kendo-label>
+            <div class="k-form-field-wrap">
+                <ul class='k-radio-list'>
+                    <li class='k-radio-list-item'>
+                        <span class="k-radio-wrap">
+                            <input kendoRecurrenceEndRuleRadioButton='k-endrule-never-{{uniqueId}}' />
+                        </span>
+                        <label [labelClass]="false" class='k-radio-label' for='k-endrule-never-{{uniqueId}}'>{{ textFor('endNever') }}</label>
+                    </li>
+                    <li class='k-radio-list-item'>
+                        <span class="k-radio-wrap">
+                            <input kendoRecurrenceEndRuleRadioButton='k-endrule-count-{{uniqueId}}' />
+                        </span>
+                        <label [labelClass]="false" class='k-radio-label' for='k-endrule-count-{{uniqueId}}'>{{ textFor('endAfter') }}</label>
+                        <kendo-numerictextbox
+                            #afterOccurances
+                            class="k-recur-count"
+                            [style.width.px]='70'
+                            [autoCorrect]='numericOptions.autoCorrect'
+                            [decimals]='0'
+                            [disabled]='isCountDisabled'
+                            [format]="numericOptions.format"
+                            [min]='numericOptions.min'
+                            [max]="numericOptions.max"
+                            [readonly]="numericOptions.readonly"
+                            [selectOnFocus]="numericOptions.selectOnFocus"
+                            [spinners]="numericOptions.spinners"
+                            [step]="numericOptions.step"
+                            [title]="numericOptions.title"
+                            [(value)]='countValue'
+                            (blur)="onCountBlur()"
+                            (valueChange)='onCountChange($event)'>
+                        </kendo-numerictextbox>
+                        <span>{{ textFor('endOccurrence') }}</span>
+                    </li>
+                    <li class='k-radio-list-item'>
+                        <span class="k-radio-wrap">
+                            <input kendoRecurrenceEndRuleRadioButton='k-endrule-until-{{uniqueId}}' />
+                        </span>
+                        <label [labelClass]="false" class='k-radio-label' for='k-endrule-until-{{uniqueId}}'>{{ textFor('endOn') }}</label>
+                        <kendo-datepicker
+                            class="k-recur-until"
+                            [style.width.px]='150'
+                            [disabled]='isUntilDisabled'
+                            [activeView]="datePickerOptions.activeView"
+                            [bottomView]="datePickerOptions.bottomView"
+                            [disabledDatesValidation]="datePickerOptions.disabledDatesValidation"
+                            [focusedDate]="datePickerOptions.focusedDate"
+                            [format]="datePickerOptions.format"
+                            [formatPlaceholder]="datePickerOptions.formatPlaceHolder"
+                            [max]="datePickerOptions.max"
+                            [min]="datePickerOptions.min"
+                            [navigation]="datePickerOptions.navigation"
+                            [placeholder]="datePickerOptions.placeholder"
+                            [readOnlyInput]="datePickerOptions.readOnlyInput"
+                            [readonly]="datePickerOptions.readonly"
+                            [title]="datePickerOptions.title"
+                            [topView]="datePickerOptions.topView"
+                            [weekNumber]="datePickerOptions.weekNumber"
+                            [disabledDates]="datePickerOptions.disabledDates"
+                            [popupSettings]="datePickerOptions.popupSettings"
+                            [(value)]='untilValue'
+                            (blur)="onUntilBlur()"
+                            (valueChange)='onUntilChange($event)'>
+                        </kendo-datepicker>
+                    </li>
+                </ul>
+            </div>
         </div>
-    `, isInline: true, components: [{ type: i14.NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur"], exportAs: ["kendoNumericTextBox"] }, { type: i4.LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional"], exportAs: ["kendoLabel"] }, { type: i6.DatePickerComponent, selector: "kendo-datepicker", inputs: ["focusableId", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "navigationItemTemplate", "activeView", "bottomView", "topView", "calendarType", "animateCalendarNavigation", "disabled", "readonly", "readOnlyInput", "popupSettings", "navigation", "min", "max", "incompleteDateValidation", "focusedDate", "value", "format", "twoDigitYearMax", "formatPlaceholder", "placeholder", "tabindex", "tabIndex", "disabledDates", "title", "subtitle", "rangeValidation", "disabledDatesValidation", "weekNumber", "size", "rounded", "fillMode", "adaptiveMode"], outputs: ["valueChange", "focus", "blur", "open", "close"], exportAs: ["kendo-datepicker"] }], directives: [{ type: EndRuleRadioButtonDirective, selector: "[kendoRecurrenceEndRuleRadioButton]", inputs: ["kendoRecurrenceEndRuleRadioButton"] }, { type: i4.LabelDirective, selector: "label[for]", inputs: ["for"] }] });
+    `, isInline: true, components: [{ type: i3.LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional", "labelCssStyle", "labelCssClass"], exportAs: ["kendoLabel"] }, { type: i5.NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur"], exportAs: ["kendoNumericTextBox"] }, { type: i6.DatePickerComponent, selector: "kendo-datepicker", inputs: ["focusableId", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "navigationItemTemplate", "activeView", "bottomView", "topView", "calendarType", "animateCalendarNavigation", "disabled", "readonly", "readOnlyInput", "popupSettings", "navigation", "min", "max", "incompleteDateValidation", "focusedDate", "value", "format", "twoDigitYearMax", "formatPlaceholder", "placeholder", "tabindex", "tabIndex", "disabledDates", "title", "subtitle", "rangeValidation", "disabledDatesValidation", "weekNumber", "size", "rounded", "fillMode", "adaptiveMode"], outputs: ["valueChange", "focus", "blur", "open", "close"], exportAs: ["kendo-datepicker"] }], directives: [{ type: EndRuleRadioButtonDirective, selector: "[kendoRecurrenceEndRuleRadioButton]", inputs: ["kendoRecurrenceEndRuleRadioButton"] }, { type: i3.LabelDirective, selector: "label[for]", inputs: ["for", "labelClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RecurrenceEndRuleEditorComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-recurrence-end-rule-editor',
                     template: `
-        <div class='k-form-field'>
-            <label class='k-form-label' (click)="onEndLabelClick()">{{ textFor('endLabel') }}</label>
-
-            <ul class='k-form-field-wrap k-reset'>
-                <li class='k-radio-item'>
-                    <input kendoRecurrenceEndRuleRadioButton='k-endrule-never-{{uniqueId}}' />
-                    <label class='k-radio-label' for='k-endrule-never-{{uniqueId}}'>{{ textFor('endNever') }}</label>
-                </li>
-                <li class='k-radio-item'>
-                    <input kendoRecurrenceEndRuleRadioButton='k-endrule-count-{{uniqueId}}' />
-                    <label class='k-radio-label' for='k-endrule-count-{{uniqueId}}'>{{ textFor('endAfter') }}</label>
-
-                    <kendo-numerictextbox
-                        #afterOccurances
-                        [style.width.px]='70'
-                        [autoCorrect]='numericOptions.autoCorrect'
-                        [decimals]='0'
-                        [disabled]='isCountDisabled'
-                        [format]="numericOptions.format"
-                        [min]='numericOptions.min'
-                        [max]="numericOptions.max"
-                        [readonly]="numericOptions.readonly"
-                        [selectOnFocus]="numericOptions.selectOnFocus"
-                        [spinners]="numericOptions.spinners"
-                        [step]="numericOptions.step"
-                        [title]="numericOptions.title"
-                        [(value)]='countValue'
-                        (blur)="onCountBlur()"
-                        (valueChange)='onCountChange($event)'>
-                    </kendo-numerictextbox>
-                    <kendo-label [for]="afterOccurances" [text]="textFor('endOccurrence')"></kendo-label>
-                </li>
-                <li class='k-radio-item'>
-                    <input kendoRecurrenceEndRuleRadioButton='k-endrule-until-{{uniqueId}}' />
-                    <label class='k-radio-label' for='k-endrule-until-{{uniqueId}}'>{{ textFor('endOn') }}</label>
-
-                    <kendo-datepicker
-                        [style.width.px]='150'
-                        [disabled]='isUntilDisabled'
-                        [activeView]="datePickerOptions.activeView"
-                        [bottomView]="datePickerOptions.bottomView"
-                        [disabledDatesValidation]="datePickerOptions.disabledDatesValidation"
-                        [focusedDate]="datePickerOptions.focusedDate"
-                        [format]="datePickerOptions.format"
-                        [formatPlaceholder]="datePickerOptions.formatPlaceHolder"
-                        [max]="datePickerOptions.max"
-                        [min]="datePickerOptions.min"
-                        [navigation]="datePickerOptions.navigation"
-                        [placeholder]="datePickerOptions.placeholder"
-                        [readOnlyInput]="datePickerOptions.readOnlyInput"
-                        [readonly]="datePickerOptions.readonly"
-                        [title]="datePickerOptions.title"
-                        [topView]="datePickerOptions.topView"
-                        [weekNumber]="datePickerOptions.weekNumber"
-                        [disabledDates]="datePickerOptions.disabledDates"
-                        [popupSettings]="datePickerOptions.popupSettings"
-                        [(value)]='untilValue'
-                        (blur)="onUntilBlur()"
-                        (valueChange)='onUntilChange($event)'>
-                    </kendo-datepicker>
-                </li>
-            </ul>
+        <div class="k-form-field">
+            <kendo-label
+                [text]="textFor('endLabel')"
+                (click)="onEndLabelClick()"
+                labelCssClass="k-form-label"
+            ></kendo-label>
+            <div class="k-form-field-wrap">
+                <ul class='k-radio-list'>
+                    <li class='k-radio-list-item'>
+                        <span class="k-radio-wrap">
+                            <input kendoRecurrenceEndRuleRadioButton='k-endrule-never-{{uniqueId}}' />
+                        </span>
+                        <label [labelClass]="false" class='k-radio-label' for='k-endrule-never-{{uniqueId}}'>{{ textFor('endNever') }}</label>
+                    </li>
+                    <li class='k-radio-list-item'>
+                        <span class="k-radio-wrap">
+                            <input kendoRecurrenceEndRuleRadioButton='k-endrule-count-{{uniqueId}}' />
+                        </span>
+                        <label [labelClass]="false" class='k-radio-label' for='k-endrule-count-{{uniqueId}}'>{{ textFor('endAfter') }}</label>
+                        <kendo-numerictextbox
+                            #afterOccurances
+                            class="k-recur-count"
+                            [style.width.px]='70'
+                            [autoCorrect]='numericOptions.autoCorrect'
+                            [decimals]='0'
+                            [disabled]='isCountDisabled'
+                            [format]="numericOptions.format"
+                            [min]='numericOptions.min'
+                            [max]="numericOptions.max"
+                            [readonly]="numericOptions.readonly"
+                            [selectOnFocus]="numericOptions.selectOnFocus"
+                            [spinners]="numericOptions.spinners"
+                            [step]="numericOptions.step"
+                            [title]="numericOptions.title"
+                            [(value)]='countValue'
+                            (blur)="onCountBlur()"
+                            (valueChange)='onCountChange($event)'>
+                        </kendo-numerictextbox>
+                        <span>{{ textFor('endOccurrence') }}</span>
+                    </li>
+                    <li class='k-radio-list-item'>
+                        <span class="k-radio-wrap">
+                            <input kendoRecurrenceEndRuleRadioButton='k-endrule-until-{{uniqueId}}' />
+                        </span>
+                        <label [labelClass]="false" class='k-radio-label' for='k-endrule-until-{{uniqueId}}'>{{ textFor('endOn') }}</label>
+                        <kendo-datepicker
+                            class="k-recur-until"
+                            [style.width.px]='150'
+                            [disabled]='isUntilDisabled'
+                            [activeView]="datePickerOptions.activeView"
+                            [bottomView]="datePickerOptions.bottomView"
+                            [disabledDatesValidation]="datePickerOptions.disabledDatesValidation"
+                            [focusedDate]="datePickerOptions.focusedDate"
+                            [format]="datePickerOptions.format"
+                            [formatPlaceholder]="datePickerOptions.formatPlaceHolder"
+                            [max]="datePickerOptions.max"
+                            [min]="datePickerOptions.min"
+                            [navigation]="datePickerOptions.navigation"
+                            [placeholder]="datePickerOptions.placeholder"
+                            [readOnlyInput]="datePickerOptions.readOnlyInput"
+                            [readonly]="datePickerOptions.readonly"
+                            [title]="datePickerOptions.title"
+                            [topView]="datePickerOptions.topView"
+                            [weekNumber]="datePickerOptions.weekNumber"
+                            [disabledDates]="datePickerOptions.disabledDates"
+                            [popupSettings]="datePickerOptions.popupSettings"
+                            [(value)]='untilValue'
+                            (blur)="onUntilBlur()"
+                            (valueChange)='onUntilChange($event)'>
+                        </kendo-datepicker>
+                    </li>
+                </ul>
+            </div>
         </div>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: RecurrenceService }, { type: i1$1.LocalizationService }]; }, propDecorators: { userNumericOptions: [{
+        }], ctorParameters: function () { return [{ type: RecurrenceService }, { type: i1$1.LocalizationService }]; }, propDecorators: { cssClass: [{
+                type: HostBinding,
+                args: ['class.k-scheduler-recurrence-end-rule-editor']
+            }], userNumericOptions: [{
                 type: Input
             }], userDatePickerOptions: [{
                 type: Input
@@ -5011,24 +5108,26 @@ RecurrenceEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
         <kendo-recurrence-frequency-editor>
         </kendo-recurrence-frequency-editor>
 
-        <kendo-recurrence-interval-editor
-            *ngIf="currentFreq !== 'never'"
-            [userNumericOptions]="repeatEveryOptions">
-        </kendo-recurrence-interval-editor>
-
-        <kendo-recurrence-weekday-rule-editor *ngIf="currentFreq === 'weekly'">
-        </kendo-recurrence-weekday-rule-editor>
-
-        <kendo-recurrence-monthly-yearly-editor
-            *ngIf="currentFreq === 'monthly' || currentFreq === 'yearly'"
-            [userNumericOptions]="repeatOnOptions">
-        </kendo-recurrence-monthly-yearly-editor>
-
-        <kendo-recurrence-end-rule-editor
-            *ngIf="currentFreq !== 'never'"
-            [userNumericOptions]="endAfterOptions"
-            [userDatePickerOptions]="endOnOptions">
-        </kendo-recurrence-end-rule-editor>
+        <div class="k-recur-view">
+            <kendo-recurrence-interval-editor
+                *ngIf="currentFreq !== 'never'"
+                [userNumericOptions]="repeatEveryOptions">
+            </kendo-recurrence-interval-editor>
+
+            <kendo-recurrence-weekday-rule-editor *ngIf="currentFreq === 'weekly'">
+            </kendo-recurrence-weekday-rule-editor>
+
+            <kendo-recurrence-monthly-yearly-editor
+                *ngIf="currentFreq === 'monthly' || currentFreq === 'yearly'"
+                [userNumericOptions]="repeatOnOptions">
+            </kendo-recurrence-monthly-yearly-editor>
+
+            <kendo-recurrence-end-rule-editor
+                *ngIf="currentFreq !== 'never'"
+                [userNumericOptions]="endAfterOptions"
+                [userDatePickerOptions]="endOnOptions">
+            </kendo-recurrence-end-rule-editor>
+        </div>
     `, isInline: true, components: [{ type: RecurrenceFrequencyEditorComponent, selector: "kendo-recurrence-frequency-editor" }, { type: RecurrenceIntervalEditorComponent, selector: "kendo-recurrence-interval-editor", inputs: ["userNumericOptions"] }, { type: RecurrenceWeekdayRuleEditorComponent, selector: "kendo-recurrence-weekday-rule-editor" }, { type: RecurrenceMonthlyYearlyEditorComponent, selector: "kendo-recurrence-monthly-yearly-editor", inputs: ["userNumericOptions"] }, { type: RecurrenceEndRuleEditorComponent, selector: "kendo-recurrence-end-rule-editor", inputs: ["userNumericOptions", "userDatePickerOptions"] }], directives: [{ type: RecurrenceEditorLocalizedMessagesDirective, selector: "[kendoRecurrenceEditorLocalizedMessages]" }, { type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RecurrenceEditorComponent, decorators: [{
             type: Component,
@@ -5151,24 +5250,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         <kendo-recurrence-frequency-editor>
         </kendo-recurrence-frequency-editor>
 
-        <kendo-recurrence-interval-editor
-            *ngIf="currentFreq !== 'never'"
-            [userNumericOptions]="repeatEveryOptions">
-        </kendo-recurrence-interval-editor>
-
-        <kendo-recurrence-weekday-rule-editor *ngIf="currentFreq === 'weekly'">
-        </kendo-recurrence-weekday-rule-editor>
-
-        <kendo-recurrence-monthly-yearly-editor
-            *ngIf="currentFreq === 'monthly' || currentFreq === 'yearly'"
-            [userNumericOptions]="repeatOnOptions">
-        </kendo-recurrence-monthly-yearly-editor>
-
-        <kendo-recurrence-end-rule-editor
-            *ngIf="currentFreq !== 'never'"
-            [userNumericOptions]="endAfterOptions"
-            [userDatePickerOptions]="endOnOptions">
-        </kendo-recurrence-end-rule-editor>
+        <div class="k-recur-view">
+            <kendo-recurrence-interval-editor
+                *ngIf="currentFreq !== 'never'"
+                [userNumericOptions]="repeatEveryOptions">
+            </kendo-recurrence-interval-editor>
+
+            <kendo-recurrence-weekday-rule-editor *ngIf="currentFreq === 'weekly'">
+            </kendo-recurrence-weekday-rule-editor>
+
+            <kendo-recurrence-monthly-yearly-editor
+                *ngIf="currentFreq === 'monthly' || currentFreq === 'yearly'"
+                [userNumericOptions]="repeatOnOptions">
+            </kendo-recurrence-monthly-yearly-editor>
+
+            <kendo-recurrence-end-rule-editor
+                *ngIf="currentFreq !== 'never'"
+                [userNumericOptions]="endAfterOptions"
+                [userDatePickerOptions]="endOnOptions">
+            </kendo-recurrence-end-rule-editor>
+        </div>
     `
                 }]
         }], ctorParameters: function () { return [{ type: RecurrenceService }, { type: i1$4.IntlService }]; }, propDecorators: { cssClass: [{
@@ -5207,6 +5308,8 @@ class EditDialogComponent {
         this.timezone = 'Etc/UTC';
         this.setTimeZone = false;
         this.setSeparateStartEndTimeZones = false;
+        this.saveIcon = saveIcon;
+        this.cancelIcon = cancelOutlineIcon;
         this.subs = this.editService.changed.subscribe(() => {
             this.ngZone.run(() => { this.onChange(); });
         });
@@ -5226,7 +5329,7 @@ class EditDialogComponent {
         if (this.editTemplate) {
             return this.editTemplate.autoFocusedElement;
         }
-        return '.k-form-field-wrap input';
+        return '.k-form-field input';
     }
     get isEditingSeries() {
         return this.editMode === EditMode.Series && Boolean(this.formGroup.get(this.fields.recurrenceRule));
@@ -5395,121 +5498,163 @@ class EditDialogComponent {
 }
 EditDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: EditDialogComponent, deps: [{ token: i0.NgZone }, { token: EditService }, { token: i1$1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: FocusService }], target: i0.ɵɵFactoryTarget.Component });
 EditDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: EditDialogComponent, selector: "kendo-scheduler-edit-dialog", inputs: { resources: "resources", timezone: "timezone", weekStart: "weekStart", fields: "fields", editTemplate: "editTemplate" }, viewQueries: [{ propertyName: "multipleResourceEditors", predicate: MultipleResourceEditorComponent, descendants: true }, { propertyName: "singleResourceEditors", predicate: SingleResourceEditorComponent, descendants: true }], ngImport: i0, template: `
-        <kendo-dialog (close)='onClose()' [minWidth]='750' *ngIf='isActive' title='{{ textFor("editorTitle") }}' class='k-scheduler-edit-dialog' [autoFocusedElement]="autoFocusedElement">
+        <kendo-dialog (close)='onClose()' [minWidth]='400' *ngIf='isActive' title='{{ textFor("editorTitle") }}' class='k-scheduler-edit-dialog' [autoFocusedElement]="autoFocusedElement">
             <ng-container *ngIf='!editTemplate'>
-                <div class='k-form k-form-horizontal'>
-                    <form novalidate [formGroup]='formGroup'>
-                        <!-- Title -->
-                        <div class='k-form-field'>
-                            <label for='k-event-title' class='k-form-label'>{{ textFor('editorEventTitle') }}</label>
-                            <div class='k-form-field-wrap'>
-                                <input #title id='k-event-title' kendoTextBox placeholder='Title' [formControl]='getControl(fields.title)' />
-                            </div>
-                        </div>
-
-                        <!-- Start -->
-                        <div class='k-form-field'>
-                            <label class='k-form-label' (click)="startDateTimePicker.focus()">{{ textFor('editorEventStart') }}</label>
-                            <div class='k-form-field-wrap'>
-                                <kendo-scheduler-datetime-picker #startDateTimePicker [formControl]='getControl(fields.start)'
-                                    [isAllDay]='getFormValue(fields.isAllDay)?.value'>
-                                </kendo-scheduler-datetime-picker>
-                            </div>
-                        </div>
-
-                        <div class='k-form-field' *ngIf="hasStartTimeZone">
-                            <label class='k-form-label' for='k-set-timezone'>{{ textFor('editorEventTimeZone') }}</label>
-                            <div class='k-form-field-wrap'>
-                                <input type='checkbox' id='k-set-timezone' kendoCheckBox formControlName='startTimezoneCheckbox' />
-                            </div>
-                        </div>
-
-                        <ng-container *ngIf="isStartTimeZoneVisible">
-                            <div class='k-form-field'>
-                                <label class='k-form-label' (click)="startTzPicker.focus()">{{ textFor('editorEventStartTimeZone') }}</label>
-
-                                <div class='k-form-field-wrap'>
-                                    <kendo-timezone-editor [width]="undefined" #startTzPicker [formControl]='getControl(fields.startTimezone)'></kendo-timezone-editor>
-                                </div>
-                            </div>
+                <form
+                    class='k-scheduler-edit-form k-form k-form-md k-form-vertical'
+                    novalidate
+                    [formGroup]='formGroup'
+                >
+                    <!-- Title -->
+                    <kendo-formfield>
+                        <kendo-label
+                            [for]="title"
+                            [text]="textFor('editorEventTitle')"
+                            labelCssClass="k-form-label"
+                        ></kendo-label>
+                        <input
+                            #title
+                            kendoTextBox
+                            placeholder='Title'
+                            [formControl]='getControl(fields.title)'
+                        />
+                    </kendo-formfield>
+
+                    <!-- Start -->
+                    <kendo-formfield>
+                        <kendo-label
+                            [for]="startDateTimePicker"
+                            [text]="textFor('editorEventStart')"
+                            labelCssClass="k-form-label"
+                        ></kendo-label>
+                        <kendo-scheduler-datetime-picker
+                            #startDateTimePicker
+                            [formControl]='getControl(fields.start)'
+                            [isAllDay]='getFormValue(fields.isAllDay)?.value'
+                        ></kendo-scheduler-datetime-picker>
+                    </kendo-formfield>
+
+                    <kendo-formfield *ngIf="hasStartTimeZone">
+                        <ng-container>
+                            <span class="k-checkbox-wrap">
+                                <input
+                                    id='k-set-timezone'
+                                    type='checkbox'
+                                    kendoCheckBox
+                                    formControlName='startTimezoneCheckbox'
+                                />
+                            </span>
+                            <label [labelClass]="false" class='k-checkbox-label' for='k-set-timezone'>{{ textFor('editorEventTimeZone') }}</label>
                         </ng-container>
-
-                        <!-- End -->
-                        <div class='k-form-field'>
-                            <label class='k-form-label' (click)="endDateTimePicker.focus()">{{ textFor('editorEventEnd') }}</label>
-                            <div class='k-form-field-wrap'>
-                                <kendo-scheduler-datetime-picker #endDateTimePicker [formControl]='getControl(fields.end)'
-                                    [isAllDay]='getFormValue(fields.isAllDay)?.value'>
-                                </kendo-scheduler-datetime-picker>
-                            </div>
-                        </div>
-
-                        <div class='k-form-field' *ngIf="isStartTimeZoneVisible && hasEndTimeZone">
-                            <label class='k-form-label' for='k-use-separate'>{{ textFor('editorEventSeparateTimeZones') }}</label>
-                            <div class='k-form-field-wrap'>
-                                <input type='checkbox' id='k-use-separate' kendoCheckBox formControlName='endTimezoneCheckbox' />
-                            </div>
-                        </div>
-
-                        <ng-container *ngIf="isEndTimeZoneVisible">
-                            <div class='k-form-field'>
-                                <label class='k-form-label' (click)="endTzPicker.focus()">{{ textFor('editorEventEndTimeZone') }}</label>
-
-                                <div class='k-form-field-wrap'>
-                                    <kendo-timezone-editor [width]="undefined"  #endTzPicker [formControl]='getControl(fields.endTimezone)'></kendo-timezone-editor>
-                                </div>
-                            </div>
+                    </kendo-formfield>
+
+                    <kendo-formfield *ngIf="isStartTimeZoneVisible">
+                        <kendo-label
+                            [for]="startTzPicker"
+                            [text]="textFor('editorEventStartTimeZone')"
+                            labelCssClass="k-form-label"
+                        ></kendo-label>
+                        <kendo-timezone-editor
+                            #startTzPicker
+                            [width]="undefined"
+                            [formControl]='getControl(fields.startTimezone)'
+                        ></kendo-timezone-editor>
+                    </kendo-formfield>
+
+                    <!-- End -->
+                    <kendo-formfield>
+                        <kendo-label
+                            [for]="endDateTimePicker"
+                            [text]="textFor('editorEventEnd')"
+                            labelCssClass="k-form-label"
+                        ></kendo-label>
+                        <kendo-scheduler-datetime-picker
+                            #endDateTimePicker
+                            [formControl]='getControl(fields.end)'
+                            [isAllDay]='getFormValue(fields.isAllDay)?.value'
+                        ></kendo-scheduler-datetime-picker>
+                    </kendo-formfield>
+
+                    <kendo-formfield *ngIf="isStartTimeZoneVisible && hasEndTimeZone">
+                        <ng-container>
+                            <span class="k-checkbox-wrap">
+                                <input
+                                    id='k-use-separate'
+                                    type='checkbox'
+                                    kendoCheckBox
+                                    formControlName='endTimezoneCheckbox'
+                                />
+                            </span>
+                            <label [labelClass]="false" class='k-checkbox-label' for='k-use-separate'>{{ textFor('editorEventSeparateTimeZones') }}</label>
                         </ng-container>
-
-                        <!-- All day -->
-                        <div class='k-form-field'>
-                            <label class='k-form-label' for='k-is-allday-chkbox'>{{ textFor('editorEventAllDay') }}</label>
-
-                            <div class='k-form-field-wrap' *ngIf="hasAllDay">
-                                <input type='checkbox' id='k-is-allday-chkbox' kendoCheckBox [formControl]='getControl(fields.isAllDay)' />
-                            </div>
-                        </div>
-
-                        <!-- Series -->
-                        <kendo-recurrence-editor
-                            *ngIf="isEditingSeries"
-                            [formControl]='getControl(fields.recurrenceRule)'
-                            [start]='recurrenceStart'
-                            [timezone]='eventTimezone'
-                            [weekStart]='weekStart'
-                        ></kendo-recurrence-editor>
-
-                        <!-- Description -->
-                        <div class='k-form-field' *ngIf='getFormValue(fields.description)'>
-                            <label class='k-form-label' for='k-event-description'>{{ textFor('editorEventDescription') }}</label>
-
-                            <div class='k-form-field-wrap'>
-                                <textarea id='k-event-description' kendoTextArea [formControl]='getControl(fields.description)'></textarea>
-                            </div>
-                        </div>
-
-                        <!-- Resources -->
-                        <ng-container *ngFor='let resource of resources'>
-                            <div class='k-form-field' *ngIf='getFormValue(resource.field)'>
-                                <label class='k-form-label' (click)="onResourceClick(resource)">
-                                    {{ resource.name ? resource.name : resource.field }}
-                                </label>
-                                <div class='k-form-field-wrap'>
-                                    <kendo-multiple-resource-editor
-                                        *ngIf='resource.multiple'
-                                        [formControl]='getControl(resource.field)'
-                                        [resource]='resource'>
-                                    </kendo-multiple-resource-editor>
-                                    <kendo-single-resource-editor
-                                        *ngIf='!resource.multiple'
-                                        [formControl]='getControl(resource.field)'
-                                        [resource]='resource'>
-                                    </kendo-single-resource-editor>
-                                </div>
-                            </div>
+                    </kendo-formfield>
+
+                    <kendo-formfield *ngIf="isEndTimeZoneVisible">
+                        <kendo-label
+                            [for]="endTzPicker"
+                            [text]="textFor('editorEventEndTimeZone')"
+                            labelCssClass="k-form-label"
+                        ></kendo-label>
+                        <kendo-timezone-editor
+                            #endTzPicker
+                            [width]="undefined"
+                            [formControl]='getControl(fields.endTimezone)'
+                        ></kendo-timezone-editor>
+                    </kendo-formfield>
+
+                    <!-- All day -->
+                    <kendo-formfield *ngIf="hasAllDay">
+                        <ng-container>
+                            <span class="k-checkbox-wrap">
+                                <input
+                                    id='k-is-allday-chkbox'
+                                    type='checkbox'
+                                    kendoCheckBox
+                                    [formControl]='getControl(fields.isAllDay)'
+                                />
+                            </span>
+                            <label [labelClass]="false" class='k-checkbox-label' for='k-is-allday-chkbox'>{{ textFor('editorEventAllDay') }}</label>
                         </ng-container>
-                    </form>
-                </div>
+                    </kendo-formfield>
+
+                    <!-- Series -->
+                    <kendo-recurrence-editor
+                        *ngIf="isEditingSeries"
+                        [formControl]='getControl(fields.recurrenceRule)'
+                        [start]='recurrenceStart'
+                        [timezone]='eventTimezone'
+                        [weekStart]='weekStart'
+                    ></kendo-recurrence-editor>
+
+                    <!-- Description -->
+                    <kendo-formfield *ngIf='getFormValue(fields.description)'>
+                        <kendo-label
+                            [for]="description"
+                            [text]="textFor('editorEventDescription')"
+                            labelCssClass="k-form-label"
+                        ></kendo-label>
+                        <textarea #description kendoTextArea [formControl]='getControl(fields.description)'></textarea>
+                    </kendo-formfield>
+
+                    <!-- Resources -->
+                    <ng-container *ngFor='let resource of resources'>
+                        <kendo-formfield *ngIf='getFormValue(resource.field)'>
+                            <label class='k-label k-form-label' (click)="onResourceClick(resource)">
+                                {{ resource.name ? resource.name : resource.field }}
+                            </label>
+                            <kendo-multiple-resource-editor
+                                *ngIf='resource.multiple'
+                                [formControl]='getControl(resource.field)'
+                                [resource]='resource'>
+                            </kendo-multiple-resource-editor>
+                            <kendo-single-resource-editor
+                                *ngIf='!resource.multiple'
+                                [formControl]='getControl(resource.field)'
+                                [resource]='resource'>
+                            </kendo-single-resource-editor>
+                        </kendo-formfield>
+                    </ng-container>
+                </form>
             </ng-container>
 
             <ng-container *ngIf='editTemplate'>
@@ -5526,132 +5671,186 @@ EditDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
                 </form>
             </ng-container>
 
-            <kendo-dialog-actions>
-                <button kendoButton (click)="onCancel($event)">{{ textFor('cancel') }}</button>
-                <button kendoButton themeColor="primary" (click)="onSave($event)" [disabled]="!formGroup.valid">{{ textFor('save') }}</button>
+            <kendo-dialog-actions layout="start">
+                <button
+                    kendoButton
+                    themeColor="primary"
+                    icon="save"
+                    [svgIcon]="saveIcon"
+                    [disabled]="!formGroup.valid"
+                    (click)="onSave($event)"
+                >{{ textFor('save') }}</button>
+                <button
+                    kendoButton
+                    icon="cancel-outline"
+                    [svgIcon]="cancelIcon"
+                    (click)="onCancel($event)"
+                >{{ textFor('cancel') }}</button>
             </kendo-dialog-actions>
         </kendo-dialog>
-    `, isInline: true, 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: i4.LabelDirective, selector: "label[for]", inputs: ["for"] }, { type: i14.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: i14.CheckBoxDirective, selector: "input[kendoCheckBox]", inputs: ["size", "rounded"] }, { type: i12.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i14.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: i5.FormFieldComponent, selector: "kendo-formfield", inputs: ["showHints", "orientation", "showErrors"] }, { type: i3.LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional", "labelCssStyle", "labelCssClass"], exportAs: ["kendoLabel"] }, { 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: i4.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: i14.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i14.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i14.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i5.TextBoxDirective, selector: "input[kendoTextBox]", inputs: ["value"] }, { type: i14.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: i14.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i14.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i14.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i5.CheckBoxDirective, selector: "input[kendoCheckBox]", inputs: ["size", "rounded"] }, { type: i14.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i3.LabelDirective, selector: "label[for]", inputs: ["for", "labelClass"] }, { type: i5.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.12", ngImport: i0, type: EditDialogComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-scheduler-edit-dialog',
                     template: `
-        <kendo-dialog (close)='onClose()' [minWidth]='750' *ngIf='isActive' title='{{ textFor("editorTitle") }}' class='k-scheduler-edit-dialog' [autoFocusedElement]="autoFocusedElement">
+        <kendo-dialog (close)='onClose()' [minWidth]='400' *ngIf='isActive' title='{{ textFor("editorTitle") }}' class='k-scheduler-edit-dialog' [autoFocusedElement]="autoFocusedElement">
             <ng-container *ngIf='!editTemplate'>
-                <div class='k-form k-form-horizontal'>
-                    <form novalidate [formGroup]='formGroup'>
-                        <!-- Title -->
-                        <div class='k-form-field'>
-                            <label for='k-event-title' class='k-form-label'>{{ textFor('editorEventTitle') }}</label>
-                            <div class='k-form-field-wrap'>
-                                <input #title id='k-event-title' kendoTextBox placeholder='Title' [formControl]='getControl(fields.title)' />
-                            </div>
-                        </div>
-
-                        <!-- Start -->
-                        <div class='k-form-field'>
-                            <label class='k-form-label' (click)="startDateTimePicker.focus()">{{ textFor('editorEventStart') }}</label>
-                            <div class='k-form-field-wrap'>
-                                <kendo-scheduler-datetime-picker #startDateTimePicker [formControl]='getControl(fields.start)'
-                                    [isAllDay]='getFormValue(fields.isAllDay)?.value'>
-                                </kendo-scheduler-datetime-picker>
-                            </div>
-                        </div>
-
-                        <div class='k-form-field' *ngIf="hasStartTimeZone">
-                            <label class='k-form-label' for='k-set-timezone'>{{ textFor('editorEventTimeZone') }}</label>
-                            <div class='k-form-field-wrap'>
-                                <input type='checkbox' id='k-set-timezone' kendoCheckBox formControlName='startTimezoneCheckbox' />
-                            </div>
-                        </div>
-
-                        <ng-container *ngIf="isStartTimeZoneVisible">
-                            <div class='k-form-field'>
-                                <label class='k-form-label' (click)="startTzPicker.focus()">{{ textFor('editorEventStartTimeZone') }}</label>
-
-                                <div class='k-form-field-wrap'>
-                                    <kendo-timezone-editor [width]="undefined" #startTzPicker [formControl]='getControl(fields.startTimezone)'></kendo-timezone-editor>
-                                </div>
-                            </div>
+                <form
+                    class='k-scheduler-edit-form k-form k-form-md k-form-vertical'
+                    novalidate
+                    [formGroup]='formGroup'
+                >
+                    <!-- Title -->
+                    <kendo-formfield>
+                        <kendo-label
+                            [for]="title"
+                            [text]="textFor('editorEventTitle')"
+                            labelCssClass="k-form-label"
+                        ></kendo-label>
+                        <input
+                            #title
+                            kendoTextBox
+                            placeholder='Title'
+                            [formControl]='getControl(fields.title)'
+                        />
+                    </kendo-formfield>
+
+                    <!-- Start -->
+                    <kendo-formfield>
+                        <kendo-label
+                            [for]="startDateTimePicker"
+                            [text]="textFor('editorEventStart')"
+                            labelCssClass="k-form-label"
+                        ></kendo-label>
+                        <kendo-scheduler-datetime-picker
+                            #startDateTimePicker
+                            [formControl]='getControl(fields.start)'
+                            [isAllDay]='getFormValue(fields.isAllDay)?.value'
+                        ></kendo-scheduler-datetime-picker>
+                    </kendo-formfield>
+
+                    <kendo-formfield *ngIf="hasStartTimeZone">
+                        <ng-container>
+                            <span class="k-checkbox-wrap">
+                                <input
+                                    id='k-set-timezone'
+                                    type='checkbox'
+                                    kendoCheckBox
+                                    formControlName='startTimezoneCheckbox'
+                                />
+                            </span>
+                            <label [labelClass]="false" class='k-checkbox-label' for='k-set-timezone'>{{ textFor('editorEventTimeZone') }}</label>
                         </ng-container>
-
-                        <!-- End -->
-                        <div class='k-form-field'>
-                            <label class='k-form-label' (click)="endDateTimePicker.focus()">{{ textFor('editorEventEnd') }}</label>
-                            <div class='k-form-field-wrap'>
-                                <kendo-scheduler-datetime-picker #endDateTimePicker [formControl]='getControl(fields.end)'
-                                    [isAllDay]='getFormValue(fields.isAllDay)?.value'>
-                                </kendo-scheduler-datetime-picker>
-                            </div>
-                        </div>
-
-                        <div class='k-form-field' *ngIf="isStartTimeZoneVisible && hasEndTimeZone">
-                            <label class='k-form-label' for='k-use-separate'>{{ textFor('editorEventSeparateTimeZones') }}</label>
-                            <div class='k-form-field-wrap'>
-                                <input type='checkbox' id='k-use-separate' kendoCheckBox formControlName='endTimezoneCheckbox' />
-                            </div>
-                        </div>
-
-                        <ng-container *ngIf="isEndTimeZoneVisible">
-                            <div class='k-form-field'>
-                                <label class='k-form-label' (click)="endTzPicker.focus()">{{ textFor('editorEventEndTimeZone') }}</label>
-
-                                <div class='k-form-field-wrap'>
-                                    <kendo-timezone-editor [width]="undefined"  #endTzPicker [formControl]='getControl(fields.endTimezone)'></kendo-timezone-editor>
-                                </div>
-                            </div>
+                    </kendo-formfield>
+
+                    <kendo-formfield *ngIf="isStartTimeZoneVisible">
+                        <kendo-label
+                            [for]="startTzPicker"
+                            [text]="textFor('editorEventStartTimeZone')"
+                            labelCssClass="k-form-label"
+                        ></kendo-label>
+                        <kendo-timezone-editor
+                            #startTzPicker
+                            [width]="undefined"
+                            [formControl]='getControl(fields.startTimezone)'
+                        ></kendo-timezone-editor>
+                    </kendo-formfield>
+
+                    <!-- End -->
+                    <kendo-formfield>
+                        <kendo-label
+                            [for]="endDateTimePicker"
+                            [text]="textFor('editorEventEnd')"
+                            labelCssClass="k-form-label"
+                        ></kendo-label>
+                        <kendo-scheduler-datetime-picker
+                            #endDateTimePicker
+                            [formControl]='getControl(fields.end)'
+                            [isAllDay]='getFormValue(fields.isAllDay)?.value'
+                        ></kendo-scheduler-datetime-picker>
+                    </kendo-formfield>
+
+                    <kendo-formfield *ngIf="isStartTimeZoneVisible && hasEndTimeZone">
+                        <ng-container>
+                            <span class="k-checkbox-wrap">
+                                <input
+                                    id='k-use-separate'
+                                    type='checkbox'
+                                    kendoCheckBox
+                                    formControlName='endTimezoneCheckbox'
+                                />
+                            </span>
+                            <label [labelClass]="false" class='k-checkbox-label' for='k-use-separate'>{{ textFor('editorEventSeparateTimeZones') }}</label>
                         </ng-container>
-
-                        <!-- All day -->
-                        <div class='k-form-field'>
-                            <label class='k-form-label' for='k-is-allday-chkbox'>{{ textFor('editorEventAllDay') }}</label>
-
-                            <div class='k-form-field-wrap' *ngIf="hasAllDay">
-                                <input type='checkbox' id='k-is-allday-chkbox' kendoCheckBox [formControl]='getControl(fields.isAllDay)' />
-                            </div>
-                        </div>
-
-                        <!-- Series -->
-                        <kendo-recurrence-editor
-                            *ngIf="isEditingSeries"
-                            [formControl]='getControl(fields.recurrenceRule)'
-                            [start]='recurrenceStart'
-                            [timezone]='eventTimezone'
-                            [weekStart]='weekStart'
-                        ></kendo-recurrence-editor>
-
-                        <!-- Description -->
-                        <div class='k-form-field' *ngIf='getFormValue(fields.description)'>
-                            <label class='k-form-label' for='k-event-description'>{{ textFor('editorEventDescription') }}</label>
-
-                            <div class='k-form-field-wrap'>
-                                <textarea id='k-event-description' kendoTextArea [formControl]='getControl(fields.description)'></textarea>
-                            </div>
-                        </div>
-
-                        <!-- Resources -->
-                        <ng-container *ngFor='let resource of resources'>
-                            <div class='k-form-field' *ngIf='getFormValue(resource.field)'>
-                                <label class='k-form-label' (click)="onResourceClick(resource)">
-                                    {{ resource.name ? resource.name : resource.field }}
-                                </label>
-                                <div class='k-form-field-wrap'>
-                                    <kendo-multiple-resource-editor
-                                        *ngIf='resource.multiple'
-                                        [formControl]='getControl(resource.field)'
-                                        [resource]='resource'>
-                                    </kendo-multiple-resource-editor>
-                                    <kendo-single-resource-editor
-                                        *ngIf='!resource.multiple'
-                                        [formControl]='getControl(resource.field)'
-                                        [resource]='resource'>
-                                    </kendo-single-resource-editor>
-                                </div>
-                            </div>
+                    </kendo-formfield>
+
+                    <kendo-formfield *ngIf="isEndTimeZoneVisible">
+                        <kendo-label
+                            [for]="endTzPicker"
+                            [text]="textFor('editorEventEndTimeZone')"
+                            labelCssClass="k-form-label"
+                        ></kendo-label>
+                        <kendo-timezone-editor
+                            #endTzPicker
+                            [width]="undefined"
+                            [formControl]='getControl(fields.endTimezone)'
+                        ></kendo-timezone-editor>
+                    </kendo-formfield>
+
+                    <!-- All day -->
+                    <kendo-formfield *ngIf="hasAllDay">
+                        <ng-container>
+                            <span class="k-checkbox-wrap">
+                                <input
+                                    id='k-is-allday-chkbox'
+                                    type='checkbox'
+                                    kendoCheckBox
+                                    [formControl]='getControl(fields.isAllDay)'
+                                />
+                            </span>
+                            <label [labelClass]="false" class='k-checkbox-label' for='k-is-allday-chkbox'>{{ textFor('editorEventAllDay') }}</label>
                         </ng-container>
-                    </form>
-                </div>
+                    </kendo-formfield>
+
+                    <!-- Series -->
+                    <kendo-recurrence-editor
+                        *ngIf="isEditingSeries"
+                        [formControl]='getControl(fields.recurrenceRule)'
+                        [start]='recurrenceStart'
+                        [timezone]='eventTimezone'
+                        [weekStart]='weekStart'
+                    ></kendo-recurrence-editor>
+
+                    <!-- Description -->
+                    <kendo-formfield *ngIf='getFormValue(fields.description)'>
+                        <kendo-label
+                            [for]="description"
+                            [text]="textFor('editorEventDescription')"
+                            labelCssClass="k-form-label"
+                        ></kendo-label>
+                        <textarea #description kendoTextArea [formControl]='getControl(fields.description)'></textarea>
+                    </kendo-formfield>
+
+                    <!-- Resources -->
+                    <ng-container *ngFor='let resource of resources'>
+                        <kendo-formfield *ngIf='getFormValue(resource.field)'>
+                            <label class='k-label k-form-label' (click)="onResourceClick(resource)">
+                                {{ resource.name ? resource.name : resource.field }}
+                            </label>
+                            <kendo-multiple-resource-editor
+                                *ngIf='resource.multiple'
+                                [formControl]='getControl(resource.field)'
+                                [resource]='resource'>
+                            </kendo-multiple-resource-editor>
+                            <kendo-single-resource-editor
+                                *ngIf='!resource.multiple'
+                                [formControl]='getControl(resource.field)'
+                                [resource]='resource'>
+                            </kendo-single-resource-editor>
+                        </kendo-formfield>
+                    </ng-container>
+                </form>
             </ng-container>
 
             <ng-container *ngIf='editTemplate'>
@@ -5668,9 +5867,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 </form>
             </ng-container>
 
-            <kendo-dialog-actions>
-                <button kendoButton (click)="onCancel($event)">{{ textFor('cancel') }}</button>
-                <button kendoButton themeColor="primary" (click)="onSave($event)" [disabled]="!formGroup.valid">{{ textFor('save') }}</button>
+            <kendo-dialog-actions layout="start">
+                <button
+                    kendoButton
+                    themeColor="primary"
+                    icon="save"
+                    [svgIcon]="saveIcon"
+                    [disabled]="!formGroup.valid"
+                    (click)="onSave($event)"
+                >{{ textFor('save') }}</button>
+                <button
+                    kendoButton
+                    icon="cancel-outline"
+                    [svgIcon]="cancelIcon"
+                    (click)="onCancel($event)"
+                >{{ textFor('cancel') }}</button>
             </kendo-dialog-actions>
         </kendo-dialog>
     `
@@ -8288,7 +8499,7 @@ AgendaTaskItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
                 <kendo-icon-wrapper name="x" [svgIcon]="xIcon"></kendo-icon-wrapper>
             </span>
         </div>
-    `, isInline: true, components: [{ type: i4$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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, components: [{ type: i4$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], 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.12", ngImport: i0, type: AgendaTaskItemComponent, decorators: [{
             type: Component,
             args: [{
@@ -8338,9 +8549,9 @@ class AgendaListComponent {
     constructor(intlService, localization) {
         this.intlService = intlService;
         this.localization = localization;
+        this.classes = true;
         this.caretAltLeftIcon = caretAltLeftIcon;
         this.caretAltRightIcon = caretAltRightIcon;
-        this.classes = true;
     }
     extractDataItem(item) {
         return item.type === "group" ? item.dataItem.items[0] : item.dataItem;
@@ -8389,6 +8600,12 @@ class AgendaListComponent {
             });
         }
     }
+    get arrowIcons() {
+        return !this.localization.rtl ? ['caret-alt-left', 'caret-alt-right'] : ['caret-alt-right', 'caret-alt-left'];
+    }
+    get arrowSVGIcons() {
+        return !this.localization.rtl ? [this.caretAltLeftIcon, this.caretAltRightIcon] : [this.caretAltRightIcon, this.caretAltLeftIcon];
+    }
 }
 AgendaListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AgendaListComponent, deps: [{ token: i1$4.IntlService }, { token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
 AgendaListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: AgendaListComponent, 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: `
@@ -8409,16 +8626,16 @@ AgendaListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
                             <div *ngIf="!agendaTimeTemplate">
                                 <kendo-icon-wrapper
                                     *ngIf="extractDataItem(item).tail"
-                                    name="caret-alt-left"
-                                    [svgIcon]="caretAltLeftIcon"
+                                    [name]="arrowIcons[0]"
+                                    [svgIcon]="arrowSVGIcons[0]"
                                     >
                                 </kendo-icon-wrapper>
 
                                 {{ formatTime(extractDataItem(item)) }}
                                 <kendo-icon-wrapper
                                     *ngIf="extractDataItem(item).head"
-                                    name="caret-alt-right"
-                                    [svgIcon]="caretAltRightIcon"
+                                    [name]="arrowIcons[1]"
+                                    [svgIcon]="arrowSVGIcons[1]"
                                     >
                                 </kendo-icon-wrapper>
                             </div>
@@ -8438,7 +8655,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: i4$1.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"] }] });
+    `, isInline: true, components: [{ type: AgendaHeaderItemComponent, selector: "[kendoSchedulerAgendaHeaderItem]", inputs: ["kendoSchedulerAgendaHeaderItem", "agendaDateTemplate"] }, { type: i4$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], 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.12", ngImport: i0, type: AgendaListComponent, decorators: [{
             type: Component,
             args: [{
@@ -8462,16 +8679,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                             <div *ngIf="!agendaTimeTemplate">
                                 <kendo-icon-wrapper
                                     *ngIf="extractDataItem(item).tail"
-                                    name="caret-alt-left"
-                                    [svgIcon]="caretAltLeftIcon"
+                                    [name]="arrowIcons[0]"
+                                    [svgIcon]="arrowSVGIcons[0]"
                                     >
                                 </kendo-icon-wrapper>
 
                                 {{ formatTime(extractDataItem(item)) }}
                                 <kendo-icon-wrapper
                                     *ngIf="extractDataItem(item).head"
-                                    name="caret-alt-right"
-                                    [svgIcon]="caretAltRightIcon"
+                                    [name]="arrowIcons[1]"
+                                    [svgIcon]="arrowSVGIcons[1]"
                                     >
                                 </kendo-icon-wrapper>
                             </div>
@@ -9409,6 +9626,8 @@ class BaseViewItem {
         this.renderer = renderer;
         this.localeId = localeId;
         this.className = true;
+        this.caretAltLeftIcon = caretAltLeftIcon;
+        this.caretAltRightIcon = caretAltRightIcon;
         this.subs = new Subscription();
     }
     get taskIndex() {
@@ -9517,6 +9736,12 @@ class BaseViewItem {
         this.slotService.unregisterItem(this);
         this.subs.unsubscribe();
     }
+    get arrowIcons() {
+        return !this.localization.rtl ? ['caret-alt-left', 'caret-alt-right'] : ['caret-alt-right', 'caret-alt-left'];
+    }
+    get arrowSVGIcons() {
+        return !this.localization.rtl ? [this.caretAltLeftIcon, this.caretAltRightIcon] : [this.caretAltRightIcon, this.caretAltLeftIcon];
+    }
 }
 BaseViewItem.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: BaseViewItem, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
 BaseViewItem.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: BaseViewItem, 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 });
@@ -9581,8 +9806,8 @@ MonthViewItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
         <span class="k-event-actions">
             <kendo-icon-wrapper
                 *ngIf="item.tail"
-                name="caret-alt-left"
-                [svgIcon]="caretAltLeftIcon"
+                [name]="arrowIcons[0]"
+                [svgIcon]="arrowSVGIcons[0]"
                 >
             </kendo-icon-wrapper>
             <kendo-icon-wrapper
@@ -9611,8 +9836,8 @@ MonthViewItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
             </span>
             <kendo-icon-wrapper
                 *ngIf="item.head"
-                name="caret-alt-right"
-                [svgIcon]="caretAltRightIcon"
+                [name]="arrowIcons[1]"
+                [svgIcon]="arrowSVGIcons[1]"
                 >
             </kendo-icon-wrapper>
         </span>
@@ -9621,7 +9846,7 @@ MonthViewItemComponent.ɵ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, components: [{ type: i4$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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+    `, isInline: true, components: [{ type: i4$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], 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.12", ngImport: i0, type: MonthViewItemComponent, decorators: [{
             type: Component,
             args: [{
@@ -9631,8 +9856,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         <span class="k-event-actions">
             <kendo-icon-wrapper
                 *ngIf="item.tail"
-                name="caret-alt-left"
-                [svgIcon]="caretAltLeftIcon"
+                [name]="arrowIcons[0]"
+                [svgIcon]="arrowSVGIcons[0]"
                 >
             </kendo-icon-wrapper>
             <kendo-icon-wrapper
@@ -9661,8 +9886,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             </span>
             <kendo-icon-wrapper
                 *ngIf="item.head"
-                name="caret-alt-right"
-                [svgIcon]="caretAltRightIcon"
+                [name]="arrowIcons[1]"
+                [svgIcon]="arrowSVGIcons[1]"
                 >
             </kendo-icon-wrapper>
         </span>
@@ -10943,7 +11168,7 @@ MonthSlotComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
             >
             </kendo-icon-wrapper>
         </div>
-    `, isInline: true, components: [{ type: i4$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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "kendoDate": i1$4.DatePipe } });
+    `, isInline: true, components: [{ type: i4$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], 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.12", ngImport: i0, type: MonthSlotComponent, decorators: [{
             type: Component,
             args: [{
@@ -11880,7 +12105,7 @@ ViewFooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
                 <span class="k-button-text">{{ item.text }}</span>
             </button>
         </span>
-    `, isInline: true, components: [{ 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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i11.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: FocusableDirective, selector: "[kendoSchedulerFocusIndex]", inputs: ["kendoSchedulerFocusIndex", "containerType"] }] });
+    `, isInline: true, components: [{ type: i4.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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i11.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: FocusableDirective, selector: "[kendoSchedulerFocusIndex]", inputs: ["kendoSchedulerFocusIndex", "containerType"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ViewFooterComponent, decorators: [{
             type: Component,
             args: [{
@@ -12905,8 +13130,8 @@ DayTimeViewItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0
         <span class="k-event-actions">
             <kendo-icon-wrapper
                 *ngIf="item.tail && !vertical"
-                name="caret-alt-left"
-                [svgIcon]="caretAltLeftIcon"
+                [name]="arrowIcons[0]"
+                [svgIcon]="arrowSVGIcons[0]"
                 >
             </kendo-icon-wrapper>
             <kendo-icon-wrapper
@@ -12936,8 +13161,8 @@ DayTimeViewItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0
             </span>
             <kendo-icon-wrapper
                 *ngIf="item.head && !vertical"
-                name="caret-alt-right"
-                [svgIcon]="caretAltRightIcon"
+                [name]="arrowIcons[1]"
+                [svgIcon]="arrowSVGIcons[1]"
                 >
             </kendo-icon-wrapper>
         </span>
@@ -12959,7 +13184,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, components: [{ type: i4$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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+    `, isInline: true, components: [{ type: i4$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], 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.12", ngImport: i0, type: DayTimeViewItemComponent, decorators: [{
             type: Component,
             args: [{
@@ -12969,8 +13194,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         <span class="k-event-actions">
             <kendo-icon-wrapper
                 *ngIf="item.tail && !vertical"
-                name="caret-alt-left"
-                [svgIcon]="caretAltLeftIcon"
+                [name]="arrowIcons[0]"
+                [svgIcon]="arrowSVGIcons[0]"
                 >
             </kendo-icon-wrapper>
             <kendo-icon-wrapper
@@ -13000,8 +13225,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             </span>
             <kendo-icon-wrapper
                 *ngIf="item.head && !vertical"
-                name="caret-alt-right"
-                [svgIcon]="caretAltRightIcon"
+                [name]="arrowIcons[1]"
+                [svgIcon]="arrowSVGIcons[1]"
                 >
             </kendo-icon-wrapper>
         </span>
@@ -16691,7 +16916,8 @@ const importedKendoModules = [
     DropDownsModule,
     ReactiveFormsModule,
     SharedModule,
-    LabelModule
+    LabelModule,
+    FormFieldModule
 ];
 /**
  * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
@@ -16778,7 +17004,8 @@ SchedulerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version
         DropDownsModule,
         ReactiveFormsModule,
         SharedModule,
-        LabelModule], exports: [AgendaViewComponent,
+        LabelModule,
+        FormFieldModule], exports: [AgendaViewComponent,
         MonthViewModule,
         MultiDayViewModule,
         ReactiveEditingDirective,
@@ -17337,7 +17564,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: i4$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$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], 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.12", ngImport: i0, type: PDFCommandDirective, decorators: [{
             type: Component,
             args: [{