@progress/kendo-vue-scheduler 4.3.2-dev.202403261314 → 4.3.2

package/dist/es/components/CurrentTimeMarker.js

@@ -6,6 +6,7 @@ var isV3 = allVue.version && allVue.version[0] === '3';
 import { cloneDate } from '@progress/kendo-date-math';
 import { first, isInTimeRange, intersects } from '../utils/main';
 import { getRect } from '../views/common/utils';
+import { canUseDOM } from '@progress/kendo-vue-common';
 var combineWidths = function combineWidths(slots) {
   var result = 0;
   slots.forEach(function (slot) {
@@ -75,8 +76,10 @@ var CurrentTimeMarkerVue2 = {
     }
     clearInterval(this.interval);
     this.interval = window.setInterval(this.position, this.updateInterval);
-    this.observer = new window.ResizeObserver(this.position);
-    this.observer.observe(this.ks.scheduler.$el);
+    if (canUseDOM && window.ResizeObserver) {
+      this.observer = new window.ResizeObserver(this.position);
+      this.observer.observe(this.ks.scheduler.$el);
+    }
   },
   destroyed: !!isV3 ? undefined : function () {
     if (this.observer) {

package/dist/es/components/CurrentTimeMarkerArrow.js

@@ -4,7 +4,7 @@ var allVue = Vue;
 var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
 import { cloneDate } from '@progress/kendo-date-math';
-import { classNames } from '@progress/kendo-vue-common';
+import { canUseDOM, classNames } from '@progress/kendo-vue-common';
 import { first, isInTimeRange, intersects } from '../utils/main';
 import { getRect } from '../views/common/utils';
 var setTime = function setTime(origin, candidate) {
@@ -49,8 +49,10 @@ var CurrentTimeMarkerArrowVue2 = {
     }
     clearInterval(this.interval);
     this.interval = window.setInterval(this.position, this.updateInterval);
-    this.observer = new window.ResizeObserver(this.position);
-    this.observer.observe(this.ks.scheduler.$el);
+    if (canUseDOM && window.ResizeObserver) {
+      this.observer = new window.ResizeObserver(this.position);
+      this.observer.observe(this.ks.scheduler.$el);
+    }
   },
   destroyed: !!isV3 ? undefined : function () {
     if (this.observer) {

package/dist/es/components/SchedulerForm.js

@@ -22,7 +22,7 @@ import { Dialog as KendoDialog } from '@progress/kendo-vue-dialogs';
 import { provideLocalizationService } from '@progress/kendo-vue-intl';
 import { SchedulerFormEditor } from '../editors/SchedulerFormEditor';
 import { messages, editorValidationRequired, editorValidationStart, editorValidationEnd, editorSave, editorCancel, editorTitle } from '../messages/main';
-import { getTemplate, guid } from '@progress/kendo-vue-common';
+import { canUseDOM, getTemplate, guid } from '@progress/kendo-vue-common';
 /**
  * @hidden
  */
@@ -170,7 +170,9 @@ var SchedulerFormVue2 = {
   },
   methods: {
     calculateMedia: function calculateMedia() {
-      this.media = window.matchMedia('(min-width: 600px)').matches ? 'desktop' : 'mobile';
+      if (canUseDOM && window.matchMedia) {
+        this.media = window.matchMedia('(min-width: 600px)').matches ? 'desktop' : 'mobile';
+      }
     },
     handleCancel: function handleCancel(event) {
       this.$emit('cancel', {

package/dist/es/components/header/navigation/NavigationDatePicker.js

@@ -58,8 +58,10 @@ var NavigationDatePickerVue2 = {
   mounted: function mounted() {
     this.buttonRef = this.$refs.button;
     this.calculateMedia();
-    this.observer = new window.ResizeObserver(this.calculateMedia);
-    this.observer.observe(this.ks.scheduler.$el);
+    if (canUseDOM && window.ResizeObserver) {
+      this.observer = new window.ResizeObserver(this.calculateMedia);
+      this.observer.observe(this.ks.scheduler.$el);
+    }
     this.hasMounted = true;
   },
   destroyed: !!isV3 ? undefined : function () {
@@ -254,7 +256,9 @@ var NavigationDatePickerVue2 = {
       this.$refs.button.focus();
     },
     calculateMedia: function calculateMedia() {
-      this.media = window.matchMedia('(min-width: 1024px)').matches ? 'desktop' : 'mobile';
+      if (canUseDOM && window.matchMedia) {
+        this.media = window.matchMedia('(min-width: 1024px)').matches ? 'desktop' : 'mobile';
+      }
     }
   }
 };

package/dist/es/components/header/view-selector/ViewSelectorList.js

@@ -7,6 +7,7 @@ import { ButtonGroup } from '@progress/kendo-vue-buttons';
 import { ViewSelectorItem } from './ViewSelectorItem';
 import { provideLocalizationService } from '@progress/kendo-vue-intl';
 import { messages, dropdownlistSelectViewAriaLabel } from '../../../messages/main';
+import { canUseDOM } from '@progress/kendo-vue-common';
 /**
  * @hidden
  */
@@ -25,9 +26,11 @@ var ViewSelectorListVue2 = {
   },
   mounted: function mounted() {
     this.calculateMedia();
-    this.observer = new window.ResizeObserver(this.calculateMedia);
-    if (this.ks.scheduler) {
-      this.observer.observe(this.ks.scheduler.$el);
+    if (canUseDOM && window.ResizeObserver) {
+      this.observer = new window.ResizeObserver(this.calculateMedia);
+      if (this.ks.scheduler) {
+        this.observer.observe(this.ks.scheduler.$el);
+      }
     }
   },
   destroyed: !!isV3 ? undefined : function () {
@@ -120,7 +123,9 @@ var ViewSelectorListVue2 = {
       this.setActiveViewName(event.target.value);
     },
     calculateMedia: function calculateMedia() {
-      this.media = window.matchMedia('(min-width: 1024px)').matches ? 'desktop' : 'mobile';
+      if (canUseDOM && window.matchMedia) {
+        this.media = window.matchMedia('(min-width: 1024px)').matches ? 'desktop' : 'mobile';
+      }
     }
   }
 };

package/dist/es/items/SchedulerViewItem.js

@@ -129,7 +129,7 @@ var SchedulerViewItemVue2 = {
     if (!this.ks.scheduler || !this.ks.scheduler.$el || this.observer) {
       return;
     }
-    if (canUseDOM) {
+    if (canUseDOM && window.ResizeObserver) {
       this.observer = new window.ResizeObserver(this.handleResize);
       this.observer.observe(this.ks.scheduler.$el);
     }

package/dist/es/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-vue-scheduler',
     productName: 'Kendo UI for Vue',
     productCodes: ['KENDOUIVUE', 'KENDOUICOMPLETE'],
-    publishDate: 1711458705,
+    publishDate: 1711527619,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-vue-ui/my-license/?utm_medium=product&utm_source=kendovue&utm_campaign=kendo-ui-vue-purchase-license-keys-warning'
 };

package/dist/es/slots/SchedulerEditSlot.js

@@ -15,7 +15,6 @@ import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
-var inject = allVue.inject;
 import { getDefaultSlots, getTemplate, Keys } from '@progress/kendo-vue-common';
 import { DATA_ACTION } from '../Scheduler';
 import { setField, getField, findFirstItem, isGroupped, compareSlots, findCurrentItem, getSortedSlots } from '../utils/main';
@@ -34,6 +33,7 @@ var SchedulerEditSlotVue2 = {
       type: Number,
       default: undefined
     },
+    className: String,
     form: Object,
     formItem: Object,
     refTo: [Function, Object],
@@ -131,11 +131,9 @@ var SchedulerEditSlotVue2 = {
     var h = gh || createElement;
     var defaultSlot = getDefaultSlots(this);
     var _a = this.$props,
-      refTo = _a.refTo,
       propViewSlot = _a.viewSlot,
       propForm = _a.form,
       propFormItem = _a.formItem,
-      onFormItemChange = _a.onFormItemChange,
       items = _a.items,
       row = _a.row,
       group = _a.group,
@@ -149,7 +147,8 @@ var SchedulerEditSlotVue2 = {
       zonedStart = _a.zonedStart,
       zonedEnd = _a.zonedEnd,
       navDay = _a.navDay,
-      itemsPerSlot = _a.itemsPerSlot;
+      itemsPerSlot = _a.itemsPerSlot,
+      className = _a.className;
     var selected = this.bv.selectedSlots.some(function (s) {
       return compareSlots(s.cSlot, _this.cSlot);
     });
@@ -157,8 +156,9 @@ var SchedulerEditSlotVue2 = {
     var editSlotRenderDefaultRendering =
     // @ts-ignore  function children
     h(SchedulerViewSlot, {
-      slotRender: this.$props.slotRender,
+      className: className,
       attrs: this.v3 ? undefined : {
+        className: className,
         slotRender: this.$props.slotRender,
         isAllDay: this.isAllDay,
         expandable: this.expandable,
@@ -182,6 +182,7 @@ var SchedulerEditSlotVue2 = {
         formItem: this.compFormItem
         // Focus
       },
+      slotRender: this.$props.slotRender,
       isAllDay: this.isAllDay,
       expandable: this.expandable,
       editable: this.editable,

package/dist/es/slots/SchedulerSlot.d.ts

@@ -20,6 +20,8 @@ export interface SchedulerSlotProps extends Slot {
     viewSlot?: any;
     /** @hidden */
     slotStyle?: any;
+    /** @hidden */
+    className?: string;
     /**
      * Specifies the `id` of the wrapping element of the SchedulerSlot.
      */

package/dist/es/slots/SchedulerSlot.js

@@ -54,6 +54,7 @@ var SchedulerSlotVue2 = {
     row: Number,
     group: Object,
     range: Object,
+    className: String,
     isWorkDay: {
       type: Boolean,
       default: true
@@ -90,11 +91,12 @@ var SchedulerSlotVue2 = {
       return this.$props.tabIndex !== undefined ? this.$props.tabIndex === null ? undefined : this.$props.tabIndex : this.$props.selected ? 0 : -1;
     },
     slotClass: function slotClass() {
-      return {
+      var _a;
+      return _a = {
         'k-scheduler-cell k-slot-cell': true,
         'k-nonwork-hour': !this.$props.isWorkHour || !this.$props.isWorkDay,
         'k-selected': this.$props.selected
-      };
+      }, _a[this.$props.className] = this.$props.className, _a;
     },
     slotLabel: function slotLabel() {
       return "".concat(formatEventTime(this.intl, this.$props.zonedStart, this.$props.zonedEnd, this.$props.isAllDay || false));

package/dist/es/slots/SchedulerViewSlot.js

@@ -22,6 +22,7 @@ var SchedulerViewSlotVue2 = {
   },
   props: {
     refTo: [Function, Object],
+    className: String,
     items: Array,
     row: Number,
     group: Object,
@@ -93,7 +94,7 @@ var SchedulerViewSlotVue2 = {
     if (!this.ks.scheduler || !this.ks.scheduler.$el) {
       return;
     }
-    if (canUseDOM) {
+    if (canUseDOM && window.ResizeObserver) {
       this.observer = new window.ResizeObserver(this.handleResize);
       this.observer.observe(this.ks.scheduler.$el);
     }
@@ -125,7 +126,8 @@ var SchedulerViewSlotVue2 = {
       zonedEnd = _a.zonedEnd,
       navDay = _a.navDay,
       itemsPerSlot = _a.itemsPerSlot,
-      editable = _a.editable;
+      editable = _a.editable,
+      className = _a.className;
     var slotRender;
     var slotRenderDefaultRendering =
     // @ts-ignore  function children
@@ -151,7 +153,8 @@ var SchedulerViewSlotVue2 = {
         editable: editable,
         formItem: this.formItem,
         selected: this.selected,
-        slotStyle: this.$props.slotStyle
+        slotStyle: this.$props.slotStyle,
+        className: className
       },
       isAllDay: this.isAllDay,
       items: items,
@@ -181,7 +184,8 @@ var SchedulerViewSlotVue2 = {
       onKeydown: this.handleKeyDown,
       onFocus: this.handleFocus,
       selected: this.selected,
-      slotStyle: this.$props.slotStyle
+      slotStyle: this.$props.slotStyle,
+      className: className
     }, this.v3 ? function () {
       return [defaultSlot];
     } : [defaultSlot]);

package/dist/es/views/agenda/AgendaView.js

@@ -93,27 +93,33 @@ var AgendaViewVue2 = {
     this.intl = provideIntlService(this);
   },
   mounted: function mounted() {
+    var _this = this;
     useCellSync({
       element: this.$el,
       selector: '.k-scheduler-datecolumn',
       explicitDepth: false
     });
-    useCellSync({
-      element: this.$el,
-      selector: '.k-scheduler-timecolumn',
-      explicitDepth: false
+    setTimeout(function () {
+      return useCellSync({
+        element: _this.$el,
+        selector: '.k-scheduler-timecolumn',
+        explicitDepth: false
+      });
     });
   },
   updated: function updated() {
+    var _this = this;
     useCellSync({
       element: this.$el,
       selector: '.k-scheduler-datecolumn',
       explicitDepth: false
     });
-    useCellSync({
-      element: this.$el,
-      selector: '.k-scheduler-timecolumn',
-      explicitDepth: false
+    setTimeout(function () {
+      return useCellSync({
+        element: _this.$el,
+        selector: '.k-scheduler-timecolumn',
+        explicitDepth: false
+      });
     });
   },
   computed: {
@@ -159,7 +165,7 @@ var AgendaViewVue2 = {
   },
   // @ts-ignore
   render: function render(createElement) {
-    var _this = this;
+    var _this2 = this;
     var h = gh || createElement;
     var EditTask = this.$props.editTask || SchedulerEditTask;
     var EditSlot = this.$props.editSlot || SchedulerEditSlot;
@@ -188,111 +194,111 @@ var AgendaViewVue2 = {
         }, [
         // @ts-ignore  function children
         h(VerticalResourceIterator, {
-          resources: _this.ks.props.resources,
-          attrs: _this.v3 ? undefined : {
-            resources: _this.ks.props.resources,
-            group: _this.ks.props.group
+          resources: _this2.ks.props.resources,
+          attrs: _this2.v3 ? undefined : {
+            resources: _this2.ks.props.resources,
+            group: _this2.ks.props.group
           },
-          group: _this.ks.props.group
-        }, _this.v3 ? function () {
+          group: _this2.ks.props.group
+        }, _this2.v3 ? function () {
           return [
           // @ts-ignore
           h(AgendaViewHead)];
         } : [h(AgendaViewHead)])]),
         // @ts-ignore  function children
         h(VerticalResourceIterator, {
-          resources: _this.ks.props.resources,
-          attrs: _this.v3 ? undefined : {
-            resources: _this.ks.props.resources,
-            group: _this.ks.props.group,
+          resources: _this2.ks.props.resources,
+          attrs: _this2.v3 ? undefined : {
+            resources: _this2.ks.props.resources,
+            group: _this2.ks.props.group,
             nested: true
           },
-          group: _this.ks.props.group,
+          group: _this2.ks.props.group,
           nested: true
-        }, _this.v3 ? function () {
+        }, _this2.v3 ? function () {
           return [h(AgendaViewBody, {
-            items: _this.items,
-            attrs: _this.v3 ? undefined : {
-              items: _this.items,
+            items: _this2.items,
+            attrs: _this2.v3 ? undefined : {
+              items: _this2.items,
               agendaSlots: agendaSlots,
-              task: _this.$props.task,
-              editable: _this.$props.editable
+              task: _this2.$props.task,
+              editable: _this2.$props.editable
             },
             agendaSlots: agendaSlots,
-            task: _this.$props.task,
-            editable: _this.$props.editable,
-            onDataaction: _this.handleDataAction,
-            on: _this.v3 ? undefined : {
-              "dataaction": _this.handleDataAction
+            task: _this2.$props.task,
+            editable: _this2.$props.editable,
+            onDataaction: _this2.handleDataAction,
+            on: _this2.v3 ? undefined : {
+              "dataaction": _this2.handleDataAction
             }
           })];
         } : [h(AgendaViewBody, {
-          items: _this.items,
-          attrs: _this.v3 ? undefined : {
-            items: _this.items,
+          items: _this2.items,
+          attrs: _this2.v3 ? undefined : {
+            items: _this2.items,
             agendaSlots: agendaSlots,
-            task: _this.$props.task,
-            editable: _this.$props.editable
+            task: _this2.$props.task,
+            editable: _this2.$props.editable
           },
           agendaSlots: agendaSlots,
-          task: _this.$props.task,
-          editable: _this.$props.editable,
-          onDataaction: _this.handleDataAction,
-          on: _this.v3 ? undefined : {
-            "dataaction": _this.handleDataAction
+          task: _this2.$props.task,
+          editable: _this2.$props.editable,
+          onDataaction: _this2.handleDataAction,
+          on: _this2.v3 ? undefined : {
+            "dataaction": _this2.handleDataAction
           }
         })])];
       } : [h("div", {
         "class": "k-scheduler-head"
       }, [h(VerticalResourceIterator, {
-        resources: _this.ks.props.resources,
-        attrs: _this.v3 ? undefined : {
-          resources: _this.ks.props.resources,
-          group: _this.ks.props.group
+        resources: _this2.ks.props.resources,
+        attrs: _this2.v3 ? undefined : {
+          resources: _this2.ks.props.resources,
+          group: _this2.ks.props.group
         },
-        group: _this.ks.props.group
-      }, _this.v3 ? function () {
+        group: _this2.ks.props.group
+      }, _this2.v3 ? function () {
         return [h(AgendaViewHead)];
       } : [h(AgendaViewHead)])]), h(VerticalResourceIterator, {
-        resources: _this.ks.props.resources,
-        attrs: _this.v3 ? undefined : {
-          resources: _this.ks.props.resources,
-          group: _this.ks.props.group,
+        resources: _this2.ks.props.resources,
+        attrs: _this2.v3 ? undefined : {
+          resources: _this2.ks.props.resources,
+          group: _this2.ks.props.group,
           nested: true
         },
-        group: _this.ks.props.group,
+        group: _this2.ks.props.group,
         nested: true
-      }, _this.v3 ? function () {
+      }, _this2.v3 ? function () {
         return [h(AgendaViewBody, {
-          items: _this.items,
-          attrs: _this.v3 ? undefined : {
-            items: _this.items,
+          items: _this2.items,
+          attrs: _this2.v3 ? undefined : {
+            items: _this2.items,
             agendaSlots: agendaSlots,
-            task: _this.$props.task,
-            editable: _this.$props.editable
+            task: _this2.$props.task,
+            editable: _this2.$props.editable
           },
           agendaSlots: agendaSlots,
-          task: _this.$props.task,
-          editable: _this.$props.editable,
-          onDataaction: _this.handleDataAction,
-          on: _this.v3 ? undefined : {
-            "dataaction": _this.handleDataAction
+          task: _this2.$props.task,
+          editable: _this2.$props.editable,
+          onDataaction: _this2.handleDataAction,
+          on: _this2.v3 ? undefined : {
+            "dataaction": _this2.handleDataAction
           }
         })];
       } : [h(AgendaViewBody, {
-        items: _this.items,
-        attrs: _this.v3 ? undefined : {
-          items: _this.items,
+        items: _this2.items,
+        attrs: _this2.v3 ? undefined : {
+          items: _this2.items,
           agendaSlots: agendaSlots,
-          task: _this.$props.task,
-          editable: _this.$props.editable
+          task: _this2.$props.task,
+          editable: _this2.$props.editable
         },
         agendaSlots: agendaSlots,
-        task: _this.$props.task,
-        editable: _this.$props.editable,
-        onDataaction: _this.handleDataAction,
-        on: _this.v3 ? undefined : {
-          "dataaction": _this.handleDataAction
+        task: _this2.$props.task,
+        editable: _this2.$props.editable,
+        onDataaction: _this2.handleDataAction,
+        on: _this2.v3 ? undefined : {
+          "dataaction": _this2.handleDataAction
         }
       })])])
     );

package/dist/es/views/agenda/AgendaViewBody.js

@@ -101,7 +101,8 @@ var AgendaViewBodyVue2 = {
           editable: this.$props.editable,
           row: filtered.length * (this.ri.groupIndex || 0) + slotIndex,
           col: 0,
-          viewSlot: this.$props.viewSlot
+          viewSlot: this.$props.viewSlot,
+          className: "k-scheduler-datecolumn k-group-cell"
         },
         editable: this.$props.editable,
         row: filtered.length * (this.ri.groupIndex || 0) + slotIndex,
@@ -111,7 +112,7 @@ var AgendaViewBodyVue2 = {
         on: this.v3 ? undefined : {
           "dataaction": this.handleDataAction
         },
-        "class": "k-scheduler-datecolumn k-group-cell"
+        className: "k-scheduler-datecolumn k-group-cell"
       }, this.v3 ? function () {
         return [h("div", [h("strong", {
           "class": "k-scheduler-agendaday"

package/dist/es/views/day/DayViewVerticalRow.js

@@ -81,6 +81,7 @@ var DayViewVerticalRowVue2 = {
           viewSlot: this.$props.viewSlot,
           form: this.$props.form,
           index: slotIndex,
+          className: 'k-scheduler-alldays-slot',
           row: groupOffset * (groupIndex || 0) + (groupIndex || 0) * GRID_OFFSET,
           col: slotIndex,
           expandable: true,
@@ -93,7 +94,7 @@ var DayViewVerticalRowVue2 = {
         on: this.v3 ? undefined : {
           "dataaction": this.handleDataAction
         },
-        "class": 'k-scheduler-alldays-slot',
+        className: 'k-scheduler-alldays-slot',
         row: groupOffset * (groupIndex || 0) + (groupIndex || 0) * GRID_OFFSET,
         col: slotIndex,
         expandable: true,

package/dist/esm/components/CurrentTimeMarker.js

@@ -6,6 +6,7 @@ var isV3 = allVue.version && allVue.version[0] === '3';
 import { cloneDate } from '@progress/kendo-date-math';
 import { first, isInTimeRange, intersects } from '../utils/main.js';
 import { getRect } from '../views/common/utils.js';
+import { canUseDOM } from '@progress/kendo-vue-common';
 var combineWidths = function combineWidths(slots) {
   var result = 0;
   slots.forEach(function (slot) {
@@ -75,8 +76,10 @@ var CurrentTimeMarkerVue2 = {
     }
     clearInterval(this.interval);
     this.interval = window.setInterval(this.position, this.updateInterval);
-    this.observer = new window.ResizeObserver(this.position);
-    this.observer.observe(this.ks.scheduler.$el);
+    if (canUseDOM && window.ResizeObserver) {
+      this.observer = new window.ResizeObserver(this.position);
+      this.observer.observe(this.ks.scheduler.$el);
+    }
   },
   destroyed: !!isV3 ? undefined : function () {
     if (this.observer) {

package/dist/esm/components/CurrentTimeMarkerArrow.js

@@ -4,7 +4,7 @@ var allVue = Vue;
 var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
 import { cloneDate } from '@progress/kendo-date-math';
-import { classNames } from '@progress/kendo-vue-common';
+import { canUseDOM, classNames } from '@progress/kendo-vue-common';
 import { first, isInTimeRange, intersects } from '../utils/main.js';
 import { getRect } from '../views/common/utils.js';
 var setTime = function setTime(origin, candidate) {
@@ -49,8 +49,10 @@ var CurrentTimeMarkerArrowVue2 = {
     }
     clearInterval(this.interval);
     this.interval = window.setInterval(this.position, this.updateInterval);
-    this.observer = new window.ResizeObserver(this.position);
-    this.observer.observe(this.ks.scheduler.$el);
+    if (canUseDOM && window.ResizeObserver) {
+      this.observer = new window.ResizeObserver(this.position);
+      this.observer.observe(this.ks.scheduler.$el);
+    }
   },
   destroyed: !!isV3 ? undefined : function () {
     if (this.observer) {

package/dist/esm/components/SchedulerForm.js

@@ -22,7 +22,7 @@ import { Dialog as KendoDialog } from '@progress/kendo-vue-dialogs';
 import { provideLocalizationService } from '@progress/kendo-vue-intl';
 import { SchedulerFormEditor } from '../editors/SchedulerFormEditor.js';
 import { messages, editorValidationRequired, editorValidationStart, editorValidationEnd, editorSave, editorCancel, editorTitle } from '../messages/main.js';
-import { getTemplate, guid } from '@progress/kendo-vue-common';
+import { canUseDOM, getTemplate, guid } from '@progress/kendo-vue-common';
 /**
  * @hidden
  */
@@ -170,7 +170,9 @@ var SchedulerFormVue2 = {
   },
   methods: {
     calculateMedia: function calculateMedia() {
-      this.media = window.matchMedia('(min-width: 600px)').matches ? 'desktop' : 'mobile';
+      if (canUseDOM && window.matchMedia) {
+        this.media = window.matchMedia('(min-width: 600px)').matches ? 'desktop' : 'mobile';
+      }
     },
     handleCancel: function handleCancel(event) {
       this.$emit('cancel', {

package/dist/esm/components/header/navigation/NavigationDatePicker.js

@@ -58,8 +58,10 @@ var NavigationDatePickerVue2 = {
   mounted: function mounted() {
     this.buttonRef = this.$refs.button;
     this.calculateMedia();
-    this.observer = new window.ResizeObserver(this.calculateMedia);
-    this.observer.observe(this.ks.scheduler.$el);
+    if (canUseDOM && window.ResizeObserver) {
+      this.observer = new window.ResizeObserver(this.calculateMedia);
+      this.observer.observe(this.ks.scheduler.$el);
+    }
     this.hasMounted = true;
   },
   destroyed: !!isV3 ? undefined : function () {
@@ -254,7 +256,9 @@ var NavigationDatePickerVue2 = {
       this.$refs.button.focus();
     },
     calculateMedia: function calculateMedia() {
-      this.media = window.matchMedia('(min-width: 1024px)').matches ? 'desktop' : 'mobile';
+      if (canUseDOM && window.matchMedia) {
+        this.media = window.matchMedia('(min-width: 1024px)').matches ? 'desktop' : 'mobile';
+      }
     }
   }
 };