@progress/kendo-angular-scheduler 12.2.0-develop.1 → 12.2.0-develop.3

package/esm2020/package-metadata.mjs

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-scheduler',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1684331190,
-    version: '12.2.0-develop.1',
+    publishDate: 1684487904,
+    version: '12.2.0-develop.3',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };

package/esm2020/scheduler.component.mjs

@@ -261,6 +261,10 @@ export class SchedulerComponent {
          * Fires when the user clicks the **PDF export** command button.
          */
         this.pdfExport = new EventEmitter();
+        /**
+         * Fires when the Scheduler is resized horizontally.
+         */
+        this.schedulerResize = new EventEmitter();
         /**
          * @hidden
          */
@@ -543,6 +547,12 @@ export class SchedulerComponent {
             this.viewContext.notifyAction(action);
         }
     }
+    /**
+     * @hidden
+     */
+    onToolbarWidthChange(width) {
+        this.schedulerResize.emit(width);
+    }
     /**
      * Creates a popup editor for the new event.
      *
@@ -882,7 +892,7 @@ export class SchedulerComponent {
     }
 }
 SchedulerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SchedulerComponent, deps: [{ token: i0.ElementRef }, { token: i1.ViewContextService }, { token: i2.ViewStateService }, { token: i3.EditService }, { token: i4.DialogsService }, { token: i5.IntlService }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i6.PDFService }, { token: i7.LocalizationService }, { token: i8.DomEventsService }, { token: i0.Renderer2 }, { token: i9.FocusService }], target: i0.ɵɵFactoryTarget.Component });
-SchedulerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: SchedulerComponent, selector: "kendo-scheduler", inputs: { selectedViewIndex: "selectedViewIndex", editable: "editable", selectable: "selectable", min: "min", max: "max", eventHeight: "eventHeight", columnWidth: "columnWidth", showWorkHours: "showWorkHours", startTime: "startTime", endTime: "endTime", workDayStart: "workDayStart", workDayEnd: "workDayEnd", workWeekStart: "workWeekStart", workWeekEnd: "workWeekEnd", weekStart: "weekStart", slotDuration: "slotDuration", slotDivisions: "slotDivisions", slotFill: "slotFill", scrollTime: "scrollTime", group: "group", resources: "resources", loading: "loading", timezone: "timezone", events: "events", selectedDate: "selectedDate", modelFields: "modelFields", currentTimeMarker: "currentTimeMarker", highlightOngoingEvents: "highlightOngoingEvents", slotClass: "slotClass", eventClass: "eventClass", eventStyles: "eventStyles", isSlotSelected: "isSlotSelected" }, outputs: { selectedViewIndexChange: "selectedViewIndexChange", navigate: "navigate", dateChange: "dateChange", slotClick: "slotClick", slotDblClick: "slotDblClick", create: "create", eventClick: "eventClick", eventDblClick: "eventDblClick", eventKeydown: "eventKeydown", cancel: "cancel", save: "save", remove: "remove", resizeStart: "resizeStart", resize: "resize", resizeEnd: "resizeEnd", dragStart: "dragStart", drag: "drag", dragEnd: "dragEnd", slotDragStart: "slotDragStart", slotDrag: "slotDrag", slotDragEnd: "slotDragEnd", pdfExport: "pdfExport" }, host: { properties: { "class.k-widget": "this.hostClasses", "class.k-scheduler": "this.hostClasses", "class.k-floatwrap": "this.hostClasses", "attr.role": "this.ariaRole", "class.k-rtl": "this.rtl", "attr.dir": "this.dir" } }, providers: [
+SchedulerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: SchedulerComponent, selector: "kendo-scheduler", inputs: { selectedViewIndex: "selectedViewIndex", editable: "editable", selectable: "selectable", min: "min", max: "max", eventHeight: "eventHeight", columnWidth: "columnWidth", showWorkHours: "showWorkHours", startTime: "startTime", endTime: "endTime", workDayStart: "workDayStart", workDayEnd: "workDayEnd", workWeekStart: "workWeekStart", workWeekEnd: "workWeekEnd", weekStart: "weekStart", slotDuration: "slotDuration", slotDivisions: "slotDivisions", slotFill: "slotFill", scrollTime: "scrollTime", group: "group", resources: "resources", loading: "loading", timezone: "timezone", events: "events", selectedDate: "selectedDate", modelFields: "modelFields", currentTimeMarker: "currentTimeMarker", highlightOngoingEvents: "highlightOngoingEvents", slotClass: "slotClass", eventClass: "eventClass", eventStyles: "eventStyles", isSlotSelected: "isSlotSelected" }, outputs: { selectedViewIndexChange: "selectedViewIndexChange", navigate: "navigate", dateChange: "dateChange", slotClick: "slotClick", slotDblClick: "slotDblClick", create: "create", eventClick: "eventClick", eventDblClick: "eventDblClick", eventKeydown: "eventKeydown", cancel: "cancel", save: "save", remove: "remove", resizeStart: "resizeStart", resize: "resize", resizeEnd: "resizeEnd", dragStart: "dragStart", drag: "drag", dragEnd: "dragEnd", slotDragStart: "slotDragStart", slotDrag: "slotDrag", slotDragEnd: "slotDragEnd", pdfExport: "pdfExport", schedulerResize: "schedulerResize" }, host: { properties: { "class.k-widget": "this.hostClasses", "class.k-scheduler": "this.hostClasses", "class.k-floatwrap": "this.hostClasses", "attr.role": "this.ariaRole", "class.k-rtl": "this.rtl", "attr.dir": "this.dir" } }, providers: [
         EditService,
         DialogsService,
         DomEventsService,
@@ -1145,9 +1155,10 @@ SchedulerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
             [views]="$any(views)"
             [selectedView]="selectedView"
             [template]="toolbarTemplate"
-            (navigate)="onNavigationAction($event)"
             [min]="min"
             [max]="max"
+            (navigate)="onNavigationAction($event)"
+            (toolbarWidthChange)="onToolbarWidthChange($event)"
         ></kendo-scheduler-toolbar>
 
         <ng-container *ngTemplateOutlet="selectedView?.template">
@@ -1168,7 +1179,7 @@ SchedulerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
 
         <div [loading]="loading" kendoSchedulerLoading>
         </div>
-    `, isInline: true, components: [{ type: i10.ToolbarComponent, selector: "kendo-scheduler-toolbar", inputs: ["selectedView", "views", "dateRange", "selectedDate", "template", "min", "max"], outputs: ["navigate"] }, { type: i11.EditDialogComponent, selector: "kendo-scheduler-edit-dialog", inputs: ["resources", "timezone", "weekStart", "fields", "editTemplate"] }, { type: i12.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { type: i13.LoadingComponent, selector: "[kendoSchedulerLoading]", inputs: ["loading"] }], directives: [{ type: i14.LocalizedMessagesDirective, selector: "[kendoSchedulerLocalizedMessages]" }, { type: i15.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, components: [{ type: i10.ToolbarComponent, selector: "kendo-scheduler-toolbar", inputs: ["selectedView", "views", "dateRange", "selectedDate", "template", "min", "max"], outputs: ["navigate", "toolbarWidthChange"] }, { type: i11.EditDialogComponent, selector: "kendo-scheduler-edit-dialog", inputs: ["resources", "timezone", "weekStart", "fields", "editTemplate"] }, { type: i12.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { type: i13.LoadingComponent, selector: "[kendoSchedulerLoading]", inputs: ["loading"] }], directives: [{ type: i14.LocalizedMessagesDirective, selector: "[kendoSchedulerLocalizedMessages]" }, { type: i15.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SchedulerComponent, decorators: [{
             type: Component,
             args: [{
@@ -1438,9 +1449,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             [views]="$any(views)"
             [selectedView]="selectedView"
             [template]="toolbarTemplate"
-            (navigate)="onNavigationAction($event)"
             [min]="min"
             [max]="max"
+            (navigate)="onNavigationAction($event)"
+            (toolbarWidthChange)="onToolbarWidthChange($event)"
         ></kendo-scheduler-toolbar>
 
         <ng-container *ngTemplateOutlet="selectedView?.template">
@@ -1589,6 +1601,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Output
             }], pdfExport: [{
                 type: Output
+            }], schedulerResize: [{
+                type: Output
             }], editDialogTemplate: [{
                 type: ContentChild,
                 args: [EditDialogTemplateDirective, { static: false }]

package/esm2020/toolbar/navigation.component.mjs

@@ -43,21 +43,7 @@ export class ToolbarNavigationComponent {
         this.localization = localization;
         this.cd = cd;
         this.viewContext = viewContext;
-        /**
-         * @hidden
-         * TODO: Drop in next MAJOR version
-         */
-        this.inlineDisplayStyle = 'flex';
-        /**
-         * @hidden
-         * TODO: Drop in next MAJOR version
-         */
-        this.inlineFlexFlowStyle = 'inherit';
-        /**
-         * @hidden
-         * TODO: Drop in next MAJOR version
-         */
-        this.inlineGapStyle = 'inherit';
+        this.hostClass = true;
         /**
          * @hidden
          */
@@ -199,10 +185,10 @@ export class ToolbarNavigationComponent {
     }
 }
 ToolbarNavigationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ToolbarNavigationComponent, deps: [{ token: i1.PopupService }, { token: i2.ToolbarService }, { token: i3.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i4.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: { "style.display": "this.inlineDisplayStyle", "style.flex-flow": "this.inlineFlexFlowStyle", "style.gap": "this.inlineGapStyle" } }, providers: [
+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: [
         PopupService
     ], viewQueries: [{ propertyName: "calendar", first: true, predicate: ["calendar"], descendants: true }], ngImport: i0, template: `
-        <span class="k-scheduler-navigation k-button-group" role="group">
+        <span class="k-scheduler-navigation k-button-group k-button-group-solid" role="group">
             <button kendoButton
                 (click)="todayClick()"
                 class="k-nav-today"
@@ -274,7 +260,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                         PopupService
                     ],
                     template: `
-        <span class="k-scheduler-navigation k-button-group" role="group">
+        <span class="k-scheduler-navigation k-button-group k-button-group-solid" role="group">
             <button kendoButton
                 (click)="todayClick()"
                 class="k-nav-today"
@@ -340,15 +326,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         }], ctorParameters: function () { return [{ type: i1.PopupService }, { type: i2.ToolbarService }, { type: i3.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i4.ViewContextService }]; }, propDecorators: { calendar: [{
                 type: ViewChild,
                 args: ['calendar', { static: false }]
-            }], inlineDisplayStyle: [{
-                type: HostBinding,
-                args: ['style.display']
-            }], inlineFlexFlowStyle: [{
-                type: HostBinding,
-                args: ['style.flex-flow']
-            }], inlineGapStyle: [{
+            }], hostClass: [{
                 type: HostBinding,
-                args: ['style.gap']
+                args: ['class.k-toolbar-group']
             }], min: [{
                 type: Input
             }], max: [{

package/esm2020/toolbar/toolbar.component.mjs

@@ -2,7 +2,7 @@
 * Copyright © 2023 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Component, EventEmitter, HostBinding, Input, Output } from '@angular/core';
+import { Component, ElementRef, EventEmitter, HostBinding, Input, NgZone, Output } from '@angular/core';
 import { Observable, Subscription } from 'rxjs';
 import { SchedulerView } from '../types';
 import { ToolbarTemplateDirective } from './toolbar-template.directive';
@@ -11,16 +11,20 @@ import * as i0 from "@angular/core";
 import * as i1 from "./toolbar.service";
 import * as i2 from "./navigation.component";
 import * as i3 from "./view-selector.component";
-import * as i4 from "@angular/common";
+import * as i4 from "@progress/kendo-angular-common";
+import * as i5 from "@angular/common";
 /**
  * @hidden
  */
 export class ToolbarComponent {
-    constructor(service) {
+    constructor(service, element, zone) {
         this.service = service;
+        this.element = element;
+        this.zone = zone;
         this.hostClasses = true;
         this.toolbarRole = 'toolbar';
         this.navigate = new EventEmitter();
+        this.toolbarWidthChange = new EventEmitter();
         // The template context is the same as the service context,
         // but with resolved values instead of observables.
         this.templateContext = {};
@@ -30,6 +34,7 @@ export class ToolbarComponent {
     ngOnInit() {
         this.subs.add(this.selectedDate.subscribe(date => this.templateContext.selectedDate = date));
         this.subs.add(this.dateRange.subscribe(dateRange => this.templateContext.dateRange = dateRange));
+        this.resizeHandler();
     }
     ngOnChanges() {
         this.service.context = {
@@ -48,9 +53,15 @@ export class ToolbarComponent {
     ngOnDestroy() {
         this.subs.unsubscribe();
     }
+    resizeHandler() {
+        const element = this.element.nativeElement;
+        this.zone.run(() => this.toolbarWidth = element.offsetWidth);
+        this.toolbarWidthChange.emit(this.toolbarWidth);
+    }
+    ;
 }
-ToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ToolbarComponent, deps: [{ token: i1.ToolbarService }], target: i0.ɵɵFactoryTarget.Component });
-ToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ToolbarComponent, selector: "kendo-scheduler-toolbar", inputs: { selectedView: "selectedView", views: "views", dateRange: "dateRange", selectedDate: "selectedDate", template: "template", min: "min", max: "max" }, outputs: { navigate: "navigate" }, host: { properties: { "class.k-scheduler-toolbar": "this.hostClasses", "class.k-toolbar": "this.hostClasses", "class.k-toolbar-md": "this.hostClasses", "attr.role": "this.toolbarRole" } }, usesOnChanges: true, ngImport: i0, template: `
+ToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ToolbarComponent, deps: [{ token: i1.ToolbarService }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+ToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ToolbarComponent, selector: "kendo-scheduler-toolbar", inputs: { selectedView: "selectedView", views: "views", dateRange: "dateRange", selectedDate: "selectedDate", template: "template", min: "min", max: "max" }, outputs: { navigate: "navigate", toolbarWidthChange: "toolbarWidthChange" }, host: { properties: { "class.k-scheduler-toolbar": "this.hostClasses", "class.k-toolbar": "this.hostClasses", "class.k-toolbar-md": "this.hostClasses", "attr.role": "this.toolbarRole" } }, usesOnChanges: true, ngImport: i0, template: `
         <ng-template
             *ngIf="template; else defaultTemplate"
             [ngTemplateOutlet]="template.templateRef"
@@ -61,9 +72,11 @@ ToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versi
         <ng-template #defaultTemplate>
             <div kendoSchedulerToolbarNavigation [min]="min" [max]="max"></div>
             <span class="k-spacer"></span>
-            <div kendoSchedulerToolbarViewSelector></div>
+            <div kendoSchedulerToolbarViewSelector [toolbarWidth]="toolbarWidth"></div>
         </ng-template>
-    `, isInline: true, components: [{ type: i2.ToolbarNavigationComponent, selector: "[kendoSchedulerToolbarNavigation]", inputs: ["min", "max"] }, { type: i3.ToolbarViewSelectorComponent, selector: "[kendoSchedulerToolbarViewSelector]" }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+
+        <kendo-resize-sensor (resize)="resizeHandler()" [style]="'display: contents;'"></kendo-resize-sensor>
+    `, isInline: true, components: [{ type: i2.ToolbarNavigationComponent, selector: "[kendoSchedulerToolbarNavigation]", inputs: ["min", "max"] }, { type: i3.ToolbarViewSelectorComponent, selector: "[kendoSchedulerToolbarViewSelector]", inputs: ["toolbarWidth", "responsiveBreakpoint"] }, { type: i4.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ToolbarComponent, decorators: [{
             type: Component,
             args: [{
@@ -79,11 +92,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         <ng-template #defaultTemplate>
             <div kendoSchedulerToolbarNavigation [min]="min" [max]="max"></div>
             <span class="k-spacer"></span>
-            <div kendoSchedulerToolbarViewSelector></div>
+            <div kendoSchedulerToolbarViewSelector [toolbarWidth]="toolbarWidth"></div>
         </ng-template>
+
+        <kendo-resize-sensor (resize)="resizeHandler()" [style]="'display: contents;'"></kendo-resize-sensor>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: i1.ToolbarService }]; }, propDecorators: { hostClasses: [{
+        }], ctorParameters: function () { return [{ type: i1.ToolbarService }, { type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: { hostClasses: [{
                 type: HostBinding,
                 args: ['class.k-scheduler-toolbar']
             }, {
@@ -105,10 +120,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], template: [{
                 type: Input
-            }], navigate: [{
-                type: Output
             }], min: [{
                 type: Input
             }], max: [{
                 type: Input
+            }], navigate: [{
+                type: Output
+            }], toolbarWidthChange: [{
+                type: Output
             }] } });

package/esm2020/toolbar/toolbar.module.mjs

@@ -8,6 +8,7 @@ import { ButtonsModule } from '@progress/kendo-angular-buttons';
 import { CalendarModule } from '@progress/kendo-angular-dateinputs';
 import { PopupModule } from '@progress/kendo-angular-popup';
 import { EventsModule } from '@progress/kendo-angular-common';
+import { ResizeSensorModule } from '@progress/kendo-angular-common';
 import { ToolbarNavigationComponent } from './navigation.component';
 import { ToolbarComponent } from './toolbar.component';
 import { ToolbarTemplateDirective } from './toolbar-template.directive';
@@ -35,7 +36,8 @@ ToolbarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version:
         CalendarModule,
         PopupModule,
         EventsModule,
-        SharedModule], exports: [ToolbarComponent, ToolbarNavigationComponent,
+        SharedModule,
+        ResizeSensorModule], exports: [ToolbarComponent, ToolbarNavigationComponent,
         ToolbarTemplateDirective,
         ToolbarViewSelectorComponent] });
 ToolbarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ToolbarModule, imports: [[
@@ -44,7 +46,8 @@ ToolbarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version:
             CalendarModule,
             PopupModule,
             EventsModule,
-            SharedModule
+            SharedModule,
+            ResizeSensorModule
         ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ToolbarModule, decorators: [{
             type: NgModule,
@@ -55,7 +58,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                         CalendarModule,
                         PopupModule,
                         EventsModule,
-                        SharedModule
+                        SharedModule,
+                        ResizeSensorModule
                     ],
                     exports: [
                         ToolbarComponent,

package/esm2020/toolbar/view-selector.component.mjs

@@ -2,7 +2,7 @@
 * Copyright © 2023 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Component, HostBinding } from '@angular/core';
+import { Component, Input } from '@angular/core';
 import { ToolbarService } from './toolbar.service';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
 import * as i0 from "@angular/core";
@@ -31,9 +31,12 @@ export class ToolbarViewSelectorComponent {
         this.service = service;
         this.localization = localization;
         /**
-         * @hidden
+         * Specifies the Toolbar width (in pixels) at which the responsive behavior should be enabled.
+         * The responsive behavior means that the ButtonGroup with the views will be replaced by a `select` element.
+         *
+         * @default 1024
          */
-        this.hostClasses = true;
+        this.responsiveBreakpoint = 1024;
     }
     /**
      * @hidden
@@ -80,9 +83,9 @@ export class ToolbarViewSelectorComponent {
     }
 }
 ToolbarViewSelectorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ToolbarViewSelectorComponent, deps: [{ token: i1.ToolbarService }, { token: i2.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-ToolbarViewSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ToolbarViewSelectorComponent, selector: "[kendoSchedulerToolbarViewSelector]", host: { properties: { "class.k-scheduler-views-wrapper": "this.hostClasses" } }, ngImport: i0, template: `
+ToolbarViewSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ToolbarViewSelectorComponent, selector: "[kendoSchedulerToolbarViewSelector]", inputs: { toolbarWidth: "toolbarWidth", responsiveBreakpoint: "responsiveBreakpoint" }, ngImport: i0, template: `
         <select
-            *ngIf="ctx.views?.length > 1"
+            *ngIf="ctx.views?.length > 1 && toolbarWidth <= responsiveBreakpoint"
             (change)="onChange($event)"
             class="k-views-dropdown k-picker-md k-rounded-md k-picker-solid k-dropdownlist k-picker"
             [attr.aria-label]="selectView"
@@ -95,7 +98,11 @@ ToolbarViewSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
                 {{ view.title }}
             </option>
         </select>
-        <span class="k-scheduler-views k-button-group" role="group">
+        <span
+            *ngIf="toolbarWidth > responsiveBreakpoint"
+            class="k-toolbar-button-group k-scheduler-views k-button-group k-button-group-solid"
+            role="group"
+        >
             <button kendoButton
                 type="button"
                 *ngFor="let view of ctx.views"
@@ -117,7 +124,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     selector: '[kendoSchedulerToolbarViewSelector]',
                     template: `
         <select
-            *ngIf="ctx.views?.length > 1"
+            *ngIf="ctx.views?.length > 1 && toolbarWidth <= responsiveBreakpoint"
             (change)="onChange($event)"
             class="k-views-dropdown k-picker-md k-rounded-md k-picker-solid k-dropdownlist k-picker"
             [attr.aria-label]="selectView"
@@ -130,7 +137,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 {{ view.title }}
             </option>
         </select>
-        <span class="k-scheduler-views k-button-group" role="group">
+        <span
+            *ngIf="toolbarWidth > responsiveBreakpoint"
+            class="k-toolbar-button-group k-scheduler-views k-button-group k-button-group-solid"
+            role="group"
+        >
             <button kendoButton
                 type="button"
                 *ngFor="let view of ctx.views"
@@ -146,7 +157,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         </span>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: i1.ToolbarService }, { type: i2.LocalizationService }]; }, propDecorators: { hostClasses: [{
-                type: HostBinding,
-                args: ['class.k-scheduler-views-wrapper']
+        }], ctorParameters: function () { return [{ type: i1.ToolbarService }, { type: i2.LocalizationService }]; }, propDecorators: { toolbarWidth: [{
+                type: Input
+            }], responsiveBreakpoint: [{
+                type: Input
             }] } });