@progress/kendo-vue-scheduler 3.5.0 → 3.5.1-dev.202208150613

package/dist/esm/editors/SchedulerFormEditor.js

@@ -0,0 +1,1079 @@
+var __rest = this && this.__rest || function (s, e) {
+  var t = {};
+
+  for (var p in s) {
+    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  }
+
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+}; // @ts-ignore
+
+
+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 { timezoneNames } from '@progress/kendo-date-math';
+import { Error, Label as KLabel } from '@progress/kendo-vue-labels';
+import { provideLocalizationService } from '@progress/kendo-vue-intl';
+import { Field, FormElement } from '@progress/kendo-vue-form';
+import { Input as KInput, Checkbox, TextArea } from '@progress/kendo-vue-inputs';
+import { getListeners, templateRendering } from '@progress/kendo-vue-common';
+import { messages, editorEventTitle, editorEventStart, editorEventEnd, editorEventDescription, editorEventAllDay, editorEventTimeZone, editorEventSeparateTimeZones, editorEventStartTimeZone, editorEventEndTimeZone, editorValidationRequired } from '../messages'; // import { useSchedulerPropsContext, useSchedulerFieldsContext } from '../context.js';
+
+import { FilterableComboBox } from './FilterableComboBox.js';
+import { getDefaultSlots } from '@progress/kendo-vue-common';
+import { RecurrenceEditor as KendoRecurrenceEditor } from '../recurrence/RecurrenceEditor.js';
+import { ResourceEditor as KendoResourceEditor } from './ResourceEditor.js';
+import { ZonedDateTime } from './ZonedDateTime.js';
+/**
+ * @hidden
+ */
+
+var SchedulerFormEditorVue2 = {
+  name: 'KendoSchedulerFormEditor',
+  props: {
+    as: [String, Function, Object],
+    id: String,
+    tabIndex: Number,
+    titleLabel: {
+      type: [String, Function, Object],
+      default: function _default() {
+        return KLabel;
+      }
+    },
+    titleError: {
+      type: [String, Function, Object],
+      default: function _default() {
+        return Error;
+      }
+    },
+    titleEditor: {
+      type: [String, Function, Object],
+      default: function _default() {
+        return KInput;
+      }
+    },
+    startLabel: {
+      type: [String, Function, Object],
+      default: function _default() {
+        return KLabel;
+      }
+    },
+    startError: {
+      type: [String, Function, Object],
+      default: function _default() {
+        return Error;
+      }
+    },
+    startEditor: {
+      type: [String, Function, Object],
+      default: function _default() {
+        return ZonedDateTime;
+      }
+    },
+    startTimezoneLabel: {
+      type: [String, Function, Object],
+      default: function _default() {
+        return KLabel;
+      }
+    },
+    startTimezoneError: {
+      type: [String, Function, Object],
+      default: function _default() {
+        return Error;
+      }
+    },
+    startTimezoneEditor: {
+      type: [String, Function, Object],
+      default: function _default() {
+        return FilterableComboBox;
+      }
+    },
+    startTimezoneCheckedLabel: {
+      type: [String, Function, Object],
+      default: function _default() {
+        return KLabel;
+      }
+    },
+    startTimezoneCheckedEditor: {
+      type: [String, Function, Object],
+      default: function _default() {
+        return Checkbox;
+      }
+    },
+    endLabel: {
+      type: [String, Function, Object],
+      default: function _default() {
+        return KLabel;
+      }
+    },
+    endError: {
+      type: [String, Function, Object],
+      default: function _default() {
+        return Error;
+      }
+    },
+    endEditor: {
+      type: [String, Function, Object],
+      default: function _default() {
+        return ZonedDateTime;
+      }
+    },
+    endTimezoneLabel: {
+      type: [String, Function, Object],
+      default: function _default() {
+        return KLabel;
+      }
+    },
+    endTimezoneError: {
+      type: [String, Function, Object],
+      default: function _default() {
+        return Error;
+      }
+    },
+    endTimezoneEditor: {
+      type: [String, Function, Object],
+      default: function _default() {
+        return FilterableComboBox;
+      }
+    },
+    endTimezoneCheckedLabel: {
+      type: [String, Function, Object],
+      default: function _default() {
+        return KLabel;
+      }
+    },
+    endTimezoneCheckedEditor: {
+      type: [String, Function, Object],
+      default: function _default() {
+        return Checkbox;
+      }
+    },
+    allDayLabel: {
+      type: [String, Function, Object],
+      default: function _default() {
+        return KLabel;
+      }
+    },
+    allDayEditor: {
+      type: [String, Function, Object],
+      default: function _default() {
+        return Checkbox;
+      }
+    },
+    recurrenceEditor: {
+      type: [String, Function, Object],
+      default: function _default() {
+        return KendoRecurrenceEditor;
+      }
+    },
+    descriptionLabel: {
+      type: [String, Function, Object],
+      default: function _default() {
+        return KLabel;
+      }
+    },
+    descriptionError: {
+      type: [String, Function, Object],
+      default: function _default() {
+        return Error;
+      }
+    },
+    descriptionEditor: {
+      type: [String, Function, Object],
+      default: function _default() {
+        return TextArea;
+      }
+    },
+    resourceLabel: {
+      type: [String, Function, Object],
+      default: function _default() {
+        return KLabel;
+      }
+    },
+    resourcesError: {
+      type: [String, Function, Object],
+      default: function _default() {
+        return KLabel;
+      }
+    },
+    resourceEditor: {
+      type: [String, Function, Object],
+      default: function _default() {
+        return KendoResourceEditor;
+      }
+    },
+    errors: Object,
+    valid: Boolean,
+    touched: Boolean,
+    visited: Boolean,
+    modified: Boolean,
+    submitted: Boolean,
+    allowSubmit: Boolean,
+    valueGetter: Function
+  },
+  created: function created() {
+    this.requiredValidationMessage = undefined;
+  },
+  inject: {
+    ks: {
+      default: null
+    },
+    kendoForm: {
+      default: {}
+    },
+    kendoLocalizationService: {
+      default: null
+    }
+  },
+  data: function data() {
+    return {
+      startZoneChecked: Boolean(this.kendoForm.valueGetter(this.ks.fields.startTimezone)),
+      endZoneChecked: Boolean(this.kendoForm.valueGetter(this.ks.fields.endTimezone))
+    };
+  },
+  // @ts-ignore
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
+    return {
+      v3: v3
+    };
+  },
+  // @ts-ignore
+  render: function render(createElement) {
+    var _this = this;
+
+    var h = gh || createElement;
+    var defaultSlots = getDefaultSlots(this);
+    var timezones = timezoneNames();
+    var localization = provideLocalizationService(this);
+
+    var _a = this.$props,
+        Component = _a.as,
+        other = __rest(_a, ["as"]);
+
+    var _b = this.$props,
+        StartTimezoneCheckedLabel = _b.startTimezoneCheckedLabel,
+        StartTimezoneCheckedEditor = _b.startTimezoneCheckedEditor,
+        EndTimezoneCheckedLabel = _b.endTimezoneCheckedLabel,
+        EndTimezoneCheckedEditor = _b.endTimezoneCheckedEditor;
+    var titleLabel = templateRendering.call(this, this.titleLabel, getListeners.call(this));
+    var titleError = templateRendering.call(this, this.titleError, getListeners.call(this));
+    var titleEditor = templateRendering.call(this, this.titleEditor, getListeners.call(this));
+    var startLabel = templateRendering.call(this, this.startLabel, getListeners.call(this));
+    var startError = templateRendering.call(this, this.startError, getListeners.call(this));
+    var startEditor = templateRendering.call(this, this.startEditor, getListeners.call(this));
+    var startTimezoneLabel = templateRendering.call(this, this.startTimezoneLabel, getListeners.call(this));
+    var startTimezoneError = templateRendering.call(this, this.startTimezoneError, getListeners.call(this));
+    var startTimezoneEditor = templateRendering.call(this, this.startTimezoneEditor, getListeners.call(this));
+    var endLabel = templateRendering.call(this, this.endLabel, getListeners.call(this));
+    var endError = templateRendering.call(this, this.endError, getListeners.call(this));
+    var endEditor = templateRendering.call(this, this.endEditor, getListeners.call(this));
+    var endTimezoneLabel = templateRendering.call(this, this.endTimezoneLabel, getListeners.call(this));
+    var endTimezoneError = templateRendering.call(this, this.endTimezoneError, getListeners.call(this));
+    var endTimezoneEditor = templateRendering.call(this, this.endTimezoneEditor, getListeners.call(this));
+    var allDayLabel = templateRendering.call(this, this.allDayLabel, getListeners.call(this));
+    var allDayEditor = templateRendering.call(this, this.allDayEditor, getListeners.call(this));
+    var recurrenceEditor = templateRendering.call(this, this.recurrenceEditor, getListeners.call(this));
+    var descriptionLabel = templateRendering.call(this, this.descriptionLabel, getListeners.call(this));
+    var descriptionEditor = templateRendering.call(this, this.descriptionEditor, getListeners.call(this));
+    var descriptionError = templateRendering.call(this, this.descriptionError, getListeners.call(this));
+    var resourceLabel = templateRendering.call(this, this.resourceLabel, getListeners.call(this));
+    var resourceEditor = templateRendering.call(this, this.resourceEditor, getListeners.call(this));
+    var start = this.kendoForm.valueGetter(this.ks.fields.start) || new Date();
+    var startTimezone = this.kendoForm.valueGetter(this.ks.fields.startTimezone) || this.ks.timezone || '';
+    var endTimezone = this.kendoForm.valueGetter(this.ks.fields.endTimezone) || this.ks.timezone || '';
+    this.requiredValidationMessage = localization.toLanguageString(editorValidationRequired, messages[editorValidationRequired]);
+    var title = this.ks.fields.title;
+    return (// @ts-ignore function children
+      h(FormElement, {
+        "class": 'k-scheduler-edit-form'
+      }, this.v3 ? function () {
+        return [h("div", {
+          "class": "k-form-field"
+        }, [// @ts-ignore function children
+        h(Field, {
+          name: title,
+          attrs: _this.v3 ? undefined : {
+            name: title,
+            component: titleLabel,
+            editorId: 'k-scheduler-editor-title'
+          },
+          component: titleLabel,
+          editorId: 'k-scheduler-editor-title'
+        }, _this.v3 ? function () {
+          return [localization.toLanguageString(editorEventTitle, messages[editorEventTitle])];
+        } : [localization.toLanguageString(editorEventTitle, messages[editorEventTitle])]), h("div", {
+          "class": "k-form-field-wrap"
+        }, [h(Field, {
+          id: "k-scheduler-editor-title",
+          attrs: _this.v3 ? undefined : {
+            id: "k-scheduler-editor-title",
+            name: title,
+            field: title,
+            component: titleEditor
+          },
+          name: title,
+          field: title,
+          component: titleEditor
+        }), _this.kendoForm.errors[title] && // @ts-ignore function children
+        h(Field, {
+          name: title,
+          attrs: _this.v3 ? undefined : {
+            name: title,
+            component: titleError
+          },
+          component: titleError
+        }, _this.v3 ? function () {
+          return [_this.kendoForm.errors[title]];
+        } : [_this.kendoForm.errors[title]])])]), h("div", {
+          "class": "k-form-field"
+        }, [// @ts-ignore function children
+        h(Field, {
+          name: _this.ks.fields.start,
+          attrs: _this.v3 ? undefined : {
+            name: _this.ks.fields.start,
+            component: startLabel,
+            editorId: "k-scheduler-editor-start"
+          },
+          component: startLabel,
+          editorId: "k-scheduler-editor-start"
+        }, _this.v3 ? function () {
+          return [localization.toLanguageString(editorEventStart, messages[editorEventStart])];
+        } : [localization.toLanguageString(editorEventStart, messages[editorEventStart])]), h("div", {
+          "class": "k-form-field-wrap",
+          style: {
+            display: 'flex'
+          }
+        }, [h("div", [h(Field, {
+          id: "k-scheduler-editor-start",
+          attrs: _this.v3 ? undefined : {
+            id: "k-scheduler-editor-start",
+            name: _this.ks.fields.start,
+            width: "auto",
+            component: startEditor,
+            isAllDay: !!_this.kendoForm.values.isAllDay,
+            timezone: _this.ks.timezone
+          },
+          name: _this.ks.fields.start,
+          width: "auto",
+          component: startEditor,
+          isAllDay: !!_this.kendoForm.values.isAllDay,
+          timezone: _this.ks.timezone
+        }), _this.kendoForm.errors[_this.ks.fields.start] && // @ts-ignore function children
+        h(Field, {
+          name: _this.ks.fields.start,
+          attrs: _this.v3 ? undefined : {
+            name: _this.ks.fields.start,
+            component: startError
+          },
+          component: startError
+        }, _this.v3 ? function () {
+          return [_this.kendoForm.errors[_this.ks.fields.start]];
+        } : [_this.kendoForm.errors[_this.ks.fields.start]])]), timezones.length > 0 && h("div", [h(StartTimezoneCheckedEditor, {
+          id: 'k-scheduler-editor-set-start-timezone',
+          attrs: _this.v3 ? undefined : {
+            id: 'k-scheduler-editor-set-start-timezone',
+            value: _this.startZoneChecked
+          },
+          onChange: _this.handleStartZoneCheckboxChange,
+          on: _this.v3 ? undefined : {
+            "change": _this.handleStartZoneCheckboxChange
+          },
+          value: _this.startZoneChecked
+        }), // @ts-ignore function children
+        h(StartTimezoneCheckedLabel, {
+          "class": 'k-checkbox-label',
+          editorId: 'k-scheduler-editor-set-start-timezone',
+          attrs: _this.v3 ? undefined : {
+            editorId: 'k-scheduler-editor-set-start-timezone'
+          },
+          style: {
+            display: 'inline-flex'
+          }
+        }, _this.v3 ? function () {
+          return [localization.toLanguageString(editorEventTimeZone, messages[editorEventTimeZone])];
+        } : [localization.toLanguageString(editorEventTimeZone, messages[editorEventTimeZone])])])])]), _this.startZoneChecked && h("div", {
+          "class": "k-form-field"
+        }, [// @ts-ignore function children
+        h(Field, {
+          name: _this.ks.fields.start,
+          attrs: _this.v3 ? undefined : {
+            name: _this.ks.fields.start,
+            component: startTimezoneLabel
+          },
+          component: startTimezoneLabel
+        }, _this.v3 ? function () {
+          return [localization.toLanguageString(editorEventStartTimeZone, messages[editorEventStartTimeZone])];
+        } : [localization.toLanguageString(editorEventStartTimeZone, messages[editorEventStartTimeZone])]), h("div", {
+          "class": "k-form-field-wrap"
+        }, [h(Field, {
+          component: startTimezoneEditor,
+          attrs: _this.v3 ? undefined : {
+            component: startTimezoneEditor,
+            value: startTimezone,
+            validator: _this.startTimezoneValidator,
+            dataItems: timezones,
+            name: _this.ks.fields.startTimezone
+          },
+          value: startTimezone,
+          validator: _this.startTimezoneValidator,
+          dataItems: timezones,
+          name: _this.ks.fields.startTimezone
+        }), _this.kendoForm.errors[_this.ks.fields.startTimezone] && // @ts-ignore function children
+        h(Field, {
+          name: _this.ks.fields.startTimezone,
+          attrs: _this.v3 ? undefined : {
+            name: _this.ks.fields.startTimezone,
+            component: startTimezoneError
+          },
+          component: startTimezoneError
+        }, _this.v3 ? function () {
+          return [_this.kendoForm.errors[_this.ks.fields.startTimezone]];
+        } : [_this.kendoForm.errors[_this.ks.fields.startTimezone]])])]), h("div", {
+          "class": "k-form-field"
+        }, [// @ts-ignore function children
+        h(Field, {
+          name: _this.ks.fields.end,
+          attrs: _this.v3 ? undefined : {
+            name: _this.ks.fields.end,
+            component: endLabel,
+            editorId: "k-scheduler-editor-end"
+          },
+          component: endLabel,
+          editorId: "k-scheduler-editor-end"
+        }, _this.v3 ? function () {
+          return [localization.toLanguageString(editorEventEnd, messages[editorEventEnd])];
+        } : [localization.toLanguageString(editorEventEnd, messages[editorEventEnd])]), h("div", {
+          "class": "k-form-field-wrap",
+          style: {
+            display: 'flex'
+          }
+        }, [h("div", [h(Field, {
+          id: "k-scheduler-editor-end",
+          attrs: _this.v3 ? undefined : {
+            id: "k-scheduler-editor-end",
+            name: _this.ks.fields.end,
+            width: "auto",
+            component: endEditor,
+            isAllDay: !!_this.kendoForm.values.isAllDay,
+            timezone: _this.ks.timezone
+          },
+          name: _this.ks.fields.end,
+          width: "auto",
+          component: endEditor,
+          isAllDay: !!_this.kendoForm.values.isAllDay,
+          timezone: _this.ks.timezone
+        }), _this.kendoForm.errors[_this.ks.fields.end] && // @ts-ignore function children
+        h(Field, {
+          name: _this.ks.fields.end,
+          attrs: _this.v3 ? undefined : {
+            name: _this.ks.fields.end,
+            component: endError
+          },
+          component: endError
+        }, _this.v3 ? function () {
+          return [_this.kendoForm.errors[_this.ks.fields.end]];
+        } : [_this.kendoForm.errors[_this.ks.fields.end]])]), h("div", [_this.startZoneChecked && [h(EndTimezoneCheckedEditor, {
+          id: 'k-scheduler-editor-set-end-timezone',
+          attrs: _this.v3 ? undefined : {
+            id: 'k-scheduler-editor-set-end-timezone',
+            value: _this.endZoneChecked
+          },
+          onChange: _this.handleEndZoneCheckboxChange,
+          on: _this.v3 ? undefined : {
+            "change": _this.handleEndZoneCheckboxChange
+          },
+          value: _this.endZoneChecked
+        }), // @ts-ignore function children
+        h(EndTimezoneCheckedLabel, {
+          "class": 'k-checkbox-label',
+          editorId: 'k-scheduler-editor-set-end-timezone',
+          attrs: _this.v3 ? undefined : {
+            editorId: 'k-scheduler-editor-set-end-timezone'
+          },
+          style: {
+            display: 'inline-flex'
+          }
+        }, _this.v3 ? function () {
+          return [localization.toLanguageString(editorEventSeparateTimeZones, messages[editorEventSeparateTimeZones])];
+        } : [localization.toLanguageString(editorEventSeparateTimeZones, messages[editorEventSeparateTimeZones])])]])])]), _this.endZoneChecked && h("div", {
+          "class": "k-form-field"
+        }, [// @ts-ignore function children
+        h(Field, {
+          name: _this.ks.fields.endTimezone,
+          attrs: _this.v3 ? undefined : {
+            name: _this.ks.fields.endTimezone,
+            component: endTimezoneLabel
+          },
+          component: endTimezoneLabel
+        }, _this.v3 ? function () {
+          return [localization.toLanguageString(editorEventEndTimeZone, messages[editorEventEndTimeZone])];
+        } : [localization.toLanguageString(editorEventEndTimeZone, messages[editorEventEndTimeZone])]), h("div", {
+          "class": "k-form-field-wrap"
+        }, [h(Field, {
+          value: endTimezone,
+          attrs: _this.v3 ? undefined : {
+            value: endTimezone,
+            dataItems: timezones,
+            validator: _this.endTimezoneValidator,
+            component: endTimezoneEditor,
+            name: _this.ks.fields.endTimezone
+          },
+          dataItems: timezones,
+          validator: _this.endTimezoneValidator,
+          component: endTimezoneEditor,
+          name: _this.ks.fields.endTimezone
+        }), _this.kendoForm.errors[_this.ks.fields.endTimezone] && // @ts-ignore function children
+        h(Field, {
+          name: _this.ks.fields.endTimezone,
+          attrs: _this.v3 ? undefined : {
+            name: _this.ks.fields.endTimezone,
+            component: endTimezoneError
+          },
+          component: endTimezoneError
+        }, _this.v3 ? function () {
+          return [_this.kendoForm.errors[_this.ks.fields.endTimezone]];
+        } : [_this.kendoForm.errors[_this.ks.fields.endTimezone]])])]), h("div", {
+          "class": "k-form-field"
+        }, [h(Field, {
+          name: _this.ks.fields.isAllDay,
+          attrs: _this.v3 ? undefined : {
+            name: _this.ks.fields.isAllDay,
+            component: KLabel
+          },
+          component: KLabel
+        }), h("div", {
+          "class": "k-form-field-wrap"
+        }, [h(Field, {
+          id: 'k-is-allday-checkbox',
+          attrs: _this.v3 ? undefined : {
+            id: 'k-is-allday-checkbox',
+            name: _this.ks.fields.isAllDay,
+            component: allDayEditor
+          },
+          name: _this.ks.fields.isAllDay,
+          component: allDayEditor
+        }), // @ts-ignore function children
+        h(Field, {
+          name: _this.ks.fields.isAllDay,
+          attrs: _this.v3 ? undefined : {
+            name: _this.ks.fields.isAllDay,
+            field: _this.ks.fields.isAllDay,
+            editorId: 'k-is-allday-checkbox',
+            component: allDayLabel
+          },
+          field: _this.ks.fields.isAllDay,
+          editorId: 'k-is-allday-checkbox',
+          "class": 'k-checkbox-label',
+          component: allDayLabel
+        }, _this.v3 ? function () {
+          return [localization.toLanguageString(editorEventAllDay, messages[editorEventAllDay])];
+        } : [localization.toLanguageString(editorEventAllDay, messages[editorEventAllDay])])])]), h(Field, {
+          component: recurrenceEditor,
+          attrs: _this.v3 ? undefined : {
+            component: recurrenceEditor,
+            changeOnInput: false,
+            field: _this.ks.fields.recurrenceRule,
+            name: _this.ks.fields.recurrenceRule,
+            start: start
+          },
+          changeOnInput: false,
+          field: _this.ks.fields.recurrenceRule,
+          name: _this.ks.fields.recurrenceRule,
+          start: start
+        }), h("div", {
+          "class": "k-form-field"
+        }, [// @ts-ignore function children
+        h(Field, {
+          name: _this.ks.fields.description,
+          attrs: _this.v3 ? undefined : {
+            name: _this.ks.fields.description,
+            component: descriptionLabel
+          },
+          component: descriptionLabel
+        }, _this.v3 ? function () {
+          return [localization.toLanguageString(editorEventDescription, messages[editorEventDescription])];
+        } : [localization.toLanguageString(editorEventDescription, messages[editorEventDescription])]), h("div", {
+          "class": "k-form-field-wrap"
+        }, [h(Field, {
+          component: descriptionEditor,
+          attrs: _this.v3 ? undefined : {
+            component: descriptionEditor,
+            name: _this.ks.fields.description,
+            rows: 1,
+            id: 'k-event-description'
+          },
+          name: _this.ks.fields.description,
+          rows: 1,
+          id: 'k-event-description',
+          style: {
+            width: '100%'
+          }
+        }), _this.kendoForm.errors[_this.ks.fields.description] && // @ts-ignore function children
+        h(Field, {
+          name: _this.ks.fields.description,
+          attrs: _this.v3 ? undefined : {
+            name: _this.ks.fields.description,
+            component: descriptionError
+          },
+          component: descriptionError
+        }, _this.v3 ? function () {
+          return [_this.kendoForm.errors[_this.ks.fields.description]];
+        } : [_this.kendoForm.errors[_this.ks.fields.description]])])]), (_this.ks.props.resources || []).map(function (resource) {
+          var _this2 = this;
+
+          return h("div", {
+            key: resource.field
+          }, [h("div", {
+            "class": "k-form-field"
+          }, [h(Field, {
+            name: resource.field,
+            attrs: this.v3 ? undefined : {
+              name: resource.field,
+              component: resourceLabel
+            },
+            component: resourceLabel
+          }), // @ts-ignore function children
+          h(KLabel, this.v3 ? function () {
+            return [resource.name];
+          } : [resource.name]), h(Field, {
+            name: resource.field,
+            attrs: this.v3 ? undefined : {
+              name: resource.field,
+              component: resourceEditor,
+              resource: resource,
+              multiple: resource.multiple,
+              dataItems: resource.data,
+              textField: resource.textField,
+              valueField: resource.valueField,
+              colorField: resource.colorField
+            },
+            component: resourceEditor,
+            resource: resource,
+            multiple: resource.multiple,
+            dataItems: resource.data,
+            textField: resource.textField,
+            valueField: resource.valueField,
+            colorField: resource.colorField
+          }), this.kendoForm.errors[resource.field] && // @ts-ignore function children
+          h(Field, {
+            name: resource.field,
+            attrs: this.v3 ? undefined : {
+              name: resource.field,
+              component: Error
+            },
+            component: Error
+          }, this.v3 ? function () {
+            return [_this2.kendoForm.errors[resource.field]];
+          } : [_this2.kendoForm.errors[resource.field]])])]);
+        }, _this), defaultSlots];
+      } : [h("div", {
+        "class": "k-form-field"
+      }, [h(Field, {
+        name: title,
+        attrs: _this.v3 ? undefined : {
+          name: title,
+          component: titleLabel,
+          editorId: 'k-scheduler-editor-title'
+        },
+        component: titleLabel,
+        editorId: 'k-scheduler-editor-title'
+      }, _this.v3 ? function () {
+        return [localization.toLanguageString(editorEventTitle, messages[editorEventTitle])];
+      } : [localization.toLanguageString(editorEventTitle, messages[editorEventTitle])]), h("div", {
+        "class": "k-form-field-wrap"
+      }, [h(Field, {
+        id: "k-scheduler-editor-title",
+        attrs: _this.v3 ? undefined : {
+          id: "k-scheduler-editor-title",
+          name: title,
+          field: title,
+          component: titleEditor
+        },
+        name: title,
+        field: title,
+        component: titleEditor
+      }), _this.kendoForm.errors[title] && h(Field, {
+        name: title,
+        attrs: _this.v3 ? undefined : {
+          name: title,
+          component: titleError
+        },
+        component: titleError
+      }, _this.v3 ? function () {
+        return [_this.kendoForm.errors[title]];
+      } : [_this.kendoForm.errors[title]])])]), h("div", {
+        "class": "k-form-field"
+      }, [h(Field, {
+        name: _this.ks.fields.start,
+        attrs: _this.v3 ? undefined : {
+          name: _this.ks.fields.start,
+          component: startLabel,
+          editorId: "k-scheduler-editor-start"
+        },
+        component: startLabel,
+        editorId: "k-scheduler-editor-start"
+      }, _this.v3 ? function () {
+        return [localization.toLanguageString(editorEventStart, messages[editorEventStart])];
+      } : [localization.toLanguageString(editorEventStart, messages[editorEventStart])]), h("div", {
+        "class": "k-form-field-wrap",
+        style: {
+          display: 'flex'
+        }
+      }, [h("div", [h(Field, {
+        id: "k-scheduler-editor-start",
+        attrs: _this.v3 ? undefined : {
+          id: "k-scheduler-editor-start",
+          name: _this.ks.fields.start,
+          width: "auto",
+          component: startEditor,
+          isAllDay: !!_this.kendoForm.values.isAllDay,
+          timezone: _this.ks.timezone
+        },
+        name: _this.ks.fields.start,
+        width: "auto",
+        component: startEditor,
+        isAllDay: !!_this.kendoForm.values.isAllDay,
+        timezone: _this.ks.timezone
+      }), _this.kendoForm.errors[_this.ks.fields.start] && h(Field, {
+        name: _this.ks.fields.start,
+        attrs: _this.v3 ? undefined : {
+          name: _this.ks.fields.start,
+          component: startError
+        },
+        component: startError
+      }, _this.v3 ? function () {
+        return [_this.kendoForm.errors[_this.ks.fields.start]];
+      } : [_this.kendoForm.errors[_this.ks.fields.start]])]), timezones.length > 0 && h("div", [h(StartTimezoneCheckedEditor, {
+        id: 'k-scheduler-editor-set-start-timezone',
+        attrs: _this.v3 ? undefined : {
+          id: 'k-scheduler-editor-set-start-timezone',
+          value: _this.startZoneChecked
+        },
+        onChange: _this.handleStartZoneCheckboxChange,
+        on: _this.v3 ? undefined : {
+          "change": _this.handleStartZoneCheckboxChange
+        },
+        value: _this.startZoneChecked
+      }), h(StartTimezoneCheckedLabel, {
+        "class": 'k-checkbox-label',
+        editorId: 'k-scheduler-editor-set-start-timezone',
+        attrs: _this.v3 ? undefined : {
+          editorId: 'k-scheduler-editor-set-start-timezone'
+        },
+        style: {
+          display: 'inline-flex'
+        }
+      }, _this.v3 ? function () {
+        return [localization.toLanguageString(editorEventTimeZone, messages[editorEventTimeZone])];
+      } : [localization.toLanguageString(editorEventTimeZone, messages[editorEventTimeZone])])])])]), _this.startZoneChecked && h("div", {
+        "class": "k-form-field"
+      }, [h(Field, {
+        name: _this.ks.fields.start,
+        attrs: _this.v3 ? undefined : {
+          name: _this.ks.fields.start,
+          component: startTimezoneLabel
+        },
+        component: startTimezoneLabel
+      }, _this.v3 ? function () {
+        return [localization.toLanguageString(editorEventStartTimeZone, messages[editorEventStartTimeZone])];
+      } : [localization.toLanguageString(editorEventStartTimeZone, messages[editorEventStartTimeZone])]), h("div", {
+        "class": "k-form-field-wrap"
+      }, [h(Field, {
+        component: startTimezoneEditor,
+        attrs: _this.v3 ? undefined : {
+          component: startTimezoneEditor,
+          value: startTimezone,
+          validator: _this.startTimezoneValidator,
+          dataItems: timezones,
+          name: _this.ks.fields.startTimezone
+        },
+        value: startTimezone,
+        validator: _this.startTimezoneValidator,
+        dataItems: timezones,
+        name: _this.ks.fields.startTimezone
+      }), _this.kendoForm.errors[_this.ks.fields.startTimezone] && h(Field, {
+        name: _this.ks.fields.startTimezone,
+        attrs: _this.v3 ? undefined : {
+          name: _this.ks.fields.startTimezone,
+          component: startTimezoneError
+        },
+        component: startTimezoneError
+      }, _this.v3 ? function () {
+        return [_this.kendoForm.errors[_this.ks.fields.startTimezone]];
+      } : [_this.kendoForm.errors[_this.ks.fields.startTimezone]])])]), h("div", {
+        "class": "k-form-field"
+      }, [h(Field, {
+        name: _this.ks.fields.end,
+        attrs: _this.v3 ? undefined : {
+          name: _this.ks.fields.end,
+          component: endLabel,
+          editorId: "k-scheduler-editor-end"
+        },
+        component: endLabel,
+        editorId: "k-scheduler-editor-end"
+      }, _this.v3 ? function () {
+        return [localization.toLanguageString(editorEventEnd, messages[editorEventEnd])];
+      } : [localization.toLanguageString(editorEventEnd, messages[editorEventEnd])]), h("div", {
+        "class": "k-form-field-wrap",
+        style: {
+          display: 'flex'
+        }
+      }, [h("div", [h(Field, {
+        id: "k-scheduler-editor-end",
+        attrs: _this.v3 ? undefined : {
+          id: "k-scheduler-editor-end",
+          name: _this.ks.fields.end,
+          width: "auto",
+          component: endEditor,
+          isAllDay: !!_this.kendoForm.values.isAllDay,
+          timezone: _this.ks.timezone
+        },
+        name: _this.ks.fields.end,
+        width: "auto",
+        component: endEditor,
+        isAllDay: !!_this.kendoForm.values.isAllDay,
+        timezone: _this.ks.timezone
+      }), _this.kendoForm.errors[_this.ks.fields.end] && h(Field, {
+        name: _this.ks.fields.end,
+        attrs: _this.v3 ? undefined : {
+          name: _this.ks.fields.end,
+          component: endError
+        },
+        component: endError
+      }, _this.v3 ? function () {
+        return [_this.kendoForm.errors[_this.ks.fields.end]];
+      } : [_this.kendoForm.errors[_this.ks.fields.end]])]), h("div", [_this.startZoneChecked && [h(EndTimezoneCheckedEditor, {
+        id: 'k-scheduler-editor-set-end-timezone',
+        attrs: _this.v3 ? undefined : {
+          id: 'k-scheduler-editor-set-end-timezone',
+          value: _this.endZoneChecked
+        },
+        onChange: _this.handleEndZoneCheckboxChange,
+        on: _this.v3 ? undefined : {
+          "change": _this.handleEndZoneCheckboxChange
+        },
+        value: _this.endZoneChecked
+      }), h(EndTimezoneCheckedLabel, {
+        "class": 'k-checkbox-label',
+        editorId: 'k-scheduler-editor-set-end-timezone',
+        attrs: _this.v3 ? undefined : {
+          editorId: 'k-scheduler-editor-set-end-timezone'
+        },
+        style: {
+          display: 'inline-flex'
+        }
+      }, _this.v3 ? function () {
+        return [localization.toLanguageString(editorEventSeparateTimeZones, messages[editorEventSeparateTimeZones])];
+      } : [localization.toLanguageString(editorEventSeparateTimeZones, messages[editorEventSeparateTimeZones])])]])])]), _this.endZoneChecked && h("div", {
+        "class": "k-form-field"
+      }, [h(Field, {
+        name: _this.ks.fields.endTimezone,
+        attrs: _this.v3 ? undefined : {
+          name: _this.ks.fields.endTimezone,
+          component: endTimezoneLabel
+        },
+        component: endTimezoneLabel
+      }, _this.v3 ? function () {
+        return [localization.toLanguageString(editorEventEndTimeZone, messages[editorEventEndTimeZone])];
+      } : [localization.toLanguageString(editorEventEndTimeZone, messages[editorEventEndTimeZone])]), h("div", {
+        "class": "k-form-field-wrap"
+      }, [h(Field, {
+        value: endTimezone,
+        attrs: _this.v3 ? undefined : {
+          value: endTimezone,
+          dataItems: timezones,
+          validator: _this.endTimezoneValidator,
+          component: endTimezoneEditor,
+          name: _this.ks.fields.endTimezone
+        },
+        dataItems: timezones,
+        validator: _this.endTimezoneValidator,
+        component: endTimezoneEditor,
+        name: _this.ks.fields.endTimezone
+      }), _this.kendoForm.errors[_this.ks.fields.endTimezone] && h(Field, {
+        name: _this.ks.fields.endTimezone,
+        attrs: _this.v3 ? undefined : {
+          name: _this.ks.fields.endTimezone,
+          component: endTimezoneError
+        },
+        component: endTimezoneError
+      }, _this.v3 ? function () {
+        return [_this.kendoForm.errors[_this.ks.fields.endTimezone]];
+      } : [_this.kendoForm.errors[_this.ks.fields.endTimezone]])])]), h("div", {
+        "class": "k-form-field"
+      }, [h(Field, {
+        name: _this.ks.fields.isAllDay,
+        attrs: _this.v3 ? undefined : {
+          name: _this.ks.fields.isAllDay,
+          component: KLabel
+        },
+        component: KLabel
+      }), h("div", {
+        "class": "k-form-field-wrap"
+      }, [h(Field, {
+        id: 'k-is-allday-checkbox',
+        attrs: _this.v3 ? undefined : {
+          id: 'k-is-allday-checkbox',
+          name: _this.ks.fields.isAllDay,
+          component: allDayEditor
+        },
+        name: _this.ks.fields.isAllDay,
+        component: allDayEditor
+      }), h(Field, {
+        name: _this.ks.fields.isAllDay,
+        attrs: _this.v3 ? undefined : {
+          name: _this.ks.fields.isAllDay,
+          field: _this.ks.fields.isAllDay,
+          editorId: 'k-is-allday-checkbox',
+          component: allDayLabel
+        },
+        field: _this.ks.fields.isAllDay,
+        editorId: 'k-is-allday-checkbox',
+        "class": 'k-checkbox-label',
+        component: allDayLabel
+      }, _this.v3 ? function () {
+        return [localization.toLanguageString(editorEventAllDay, messages[editorEventAllDay])];
+      } : [localization.toLanguageString(editorEventAllDay, messages[editorEventAllDay])])])]), h(Field, {
+        component: recurrenceEditor,
+        attrs: _this.v3 ? undefined : {
+          component: recurrenceEditor,
+          changeOnInput: false,
+          field: _this.ks.fields.recurrenceRule,
+          name: _this.ks.fields.recurrenceRule,
+          start: start
+        },
+        changeOnInput: false,
+        field: _this.ks.fields.recurrenceRule,
+        name: _this.ks.fields.recurrenceRule,
+        start: start
+      }), h("div", {
+        "class": "k-form-field"
+      }, [h(Field, {
+        name: _this.ks.fields.description,
+        attrs: _this.v3 ? undefined : {
+          name: _this.ks.fields.description,
+          component: descriptionLabel
+        },
+        component: descriptionLabel
+      }, _this.v3 ? function () {
+        return [localization.toLanguageString(editorEventDescription, messages[editorEventDescription])];
+      } : [localization.toLanguageString(editorEventDescription, messages[editorEventDescription])]), h("div", {
+        "class": "k-form-field-wrap"
+      }, [h(Field, {
+        component: descriptionEditor,
+        attrs: _this.v3 ? undefined : {
+          component: descriptionEditor,
+          name: _this.ks.fields.description,
+          rows: 1,
+          id: 'k-event-description'
+        },
+        name: _this.ks.fields.description,
+        rows: 1,
+        id: 'k-event-description',
+        style: {
+          width: '100%'
+        }
+      }), _this.kendoForm.errors[_this.ks.fields.description] && h(Field, {
+        name: _this.ks.fields.description,
+        attrs: _this.v3 ? undefined : {
+          name: _this.ks.fields.description,
+          component: descriptionError
+        },
+        component: descriptionError
+      }, _this.v3 ? function () {
+        return [_this.kendoForm.errors[_this.ks.fields.description]];
+      } : [_this.kendoForm.errors[_this.ks.fields.description]])])]), (_this.ks.props.resources || []).map(function (resource) {
+        var _this2 = this;
+
+        return h("div", {
+          key: resource.field
+        }, [h("div", {
+          "class": "k-form-field"
+        }, [h(Field, {
+          name: resource.field,
+          attrs: this.v3 ? undefined : {
+            name: resource.field,
+            component: resourceLabel
+          },
+          component: resourceLabel
+        }), h(KLabel, this.v3 ? function () {
+          return [resource.name];
+        } : [resource.name]), h(Field, {
+          name: resource.field,
+          attrs: this.v3 ? undefined : {
+            name: resource.field,
+            component: resourceEditor,
+            resource: resource,
+            multiple: resource.multiple,
+            dataItems: resource.data,
+            textField: resource.textField,
+            valueField: resource.valueField,
+            colorField: resource.colorField
+          },
+          component: resourceEditor,
+          resource: resource,
+          multiple: resource.multiple,
+          dataItems: resource.data,
+          textField: resource.textField,
+          valueField: resource.valueField,
+          colorField: resource.colorField
+        }), this.kendoForm.errors[resource.field] && h(Field, {
+          name: resource.field,
+          attrs: this.v3 ? undefined : {
+            name: resource.field,
+            component: Error
+          },
+          component: Error
+        }, this.v3 ? function () {
+          return [_this2.kendoForm.errors[resource.field]];
+        } : [_this2.kendoForm.errors[resource.field]])])]);
+      }, _this), defaultSlots])
+    );
+  },
+  methods: {
+    handleStartZoneCheckboxChange: function handleStartZoneCheckboxChange(e) {
+      if (!e.value) {
+        this.$emit('change', this.ks.fields.startTimezone, {
+          value: null
+        });
+        this.$emit('change', this.ks.fields.endTimezone, {
+          value: null
+        });
+        this.endZoneChecked = e.value;
+      }
+
+      this.startZoneChecked = e.value;
+    },
+    handleEndZoneCheckboxChange: function handleEndZoneCheckboxChange(e) {
+      if (!e.value) {
+        this.$emit('change', this.ks.fields.endTimezone, {
+          value: null
+        });
+      }
+
+      this.endZoneChecked = e.value;
+    },
+    requiredValidator: function requiredValidator(value) {
+      return value ? undefined : this.requiredValidationMessage;
+    },
+    startTimezoneValidator: function startTimezoneValidator(_dataItem, formValueGetter) {
+      return this.startZoneChecked ? this.requiredValidator(formValueGetter(this.ks.fields.startTimezone)) : undefined;
+    },
+    endTimezoneValidator: function endTimezoneValidator(_dataItem, formValueGetter) {
+      return this.startZoneChecked && this.endZoneChecked ? this.requiredValidator(formValueGetter(this.ks.fields.endTimezone)) || this.requiredValidator(formValueGetter(this.ks.fields.startTimezone)) : undefined;
+    }
+  }
+};
+/**
+ * @hidden
+ */
+
+var SchedulerFormEditor = SchedulerFormEditorVue2;
+export { SchedulerFormEditor, SchedulerFormEditorVue2 };