@progress/kendo-vue-scheduler 3.1.2 → 3.1.3-dev.202203311441

package/dist/es/editors/SchedulerFormEditor.js

@@ -17,10 +17,17 @@ var allVue = Vue;
 var gh = allVue.h;
 var inject = allVue.inject;
 import { timezoneNames } from '@progress/kendo-date-math';
-import { Label } from '@progress/kendo-vue-labels';
+import { Error, Label } from '@progress/kendo-vue-labels';
+import { provideLocalizationService } from '@progress/kendo-vue-intl';
 import { Field } from '@progress/kendo-vue-form';
+import { Input, Checkbox, TextArea } from '@progress/kendo-vue-inputs';
 import { DatePicker, DateTimePicker } from '@progress/kendo-vue-dateinputs';
-import { messages, editorEventTitle, editorEventStart, editorEventEnd, editorEventDescription, editorEventAllDay, editorEventTimeZone, editorEventSeparateTimeZones, editorEventStartTimeZone, editorEventEndTimeZone, editorValidationRequired } from '../messages'; // tslint:enable:max-line-length
+import { messages, editorEventTitle, editorEventStart, editorEventEnd, editorEventDescription, editorEventAllDay, editorEventTimeZone, editorEventSeparateTimeZones, editorEventStartTimeZone, editorEventEndTimeZone, editorValidationRequired } from '../messages'; // import { useSchedulerPropsContext, useSchedulerFieldsContext } from '../context';
+
+import { FilterableComboBox } from './FilterableComboBox';
+import { RecurrenceEditor as KendoRecurrenceEditor } from '../recurrence/RecurrenceEditor';
+import { ResourceEditor as KendoResourceEditor } from './ResourceEditor';
+import { ZonedDateTime } from './ZonedDateTime'; // tslint:enable:max-line-length
 
 var SchedulerFormEditorVue2 = {
   name: 'KendoSchedulerFormEditor',
@@ -28,34 +35,174 @@ var SchedulerFormEditorVue2 = {
     as: [String, Function, Object],
     id: String,
     tabIndex: Number,
-    titleLabel: [String, Function, Object],
-    titleError: [String, Function, Object],
-    titleEditor: [String, Function, Object],
-    startLabel: [String, Function, Object],
-    startError: [String, Function, Object],
-    startEditor: [String, Function, Object],
-    startTimezoneLabel: [String, Function, Object],
-    startTimezoneError: [String, Function, Object],
-    startTimezoneEditor: [String, Function, Object],
-    startTimezoneCheckedLabel: [String, Function, Object],
-    startTimezoneCheckedEditor: [String, Function, Object],
-    endLabel: [String, Function, Object],
-    endError: [String, Function, Object],
-    endEditor: [String, Function, Object],
-    endTimezoneLabel: [String, Function, Object],
-    endTimezoneError: [String, Function, Object],
-    endTimezoneEditor: [String, Function, Object],
-    endTimezoneCheckedLabel: [String, Function, Object],
-    endTimezoneCheckedEditor: [String, Function, Object],
-    allDayLabel: [String, Function, Object],
-    allDayEditor: [String, Function, Object],
-    recurrenceEditor: [String, Function, Object],
-    descriptionLabel: [String, Function, Object],
-    descriptionError: [String, Function, Object],
-    descriptionEditor: [String, Function, Object],
-    resourceLabel: [String, Function, Object],
-    resourcesError: [String, Function, Object],
-    resourceEditor: [String, Function, Object],
+    titleLabel: {
+      type: [String, Function, Object],
+      default: function _default() {
+        return Label;
+      }
+    },
+    titleError: {
+      type: [String, Function, Object],
+      default: function _default() {
+        return Error;
+      }
+    },
+    titleEditor: {
+      type: [String, Function, Object],
+      default: function _default() {
+        return Input;
+      }
+    },
+    startLabel: {
+      type: [String, Function, Object],
+      default: function _default() {
+        return Label;
+      }
+    },
+    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 Label;
+      }
+    },
+    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 Label;
+      }
+    },
+    startTimezoneCheckedEditor: {
+      type: [String, Function, Object],
+      default: function _default() {
+        return Checkbox;
+      }
+    },
+    endLabel: {
+      type: [String, Function, Object],
+      default: function _default() {
+        return Label;
+      }
+    },
+    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 Label;
+      }
+    },
+    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 Label;
+      }
+    },
+    endTimezoneCheckedEditor: {
+      type: [String, Function, Object],
+      default: function _default() {
+        return Checkbox;
+      }
+    },
+    allDayLabel: {
+      type: [String, Function, Object],
+      default: function _default() {
+        return Label;
+      }
+    },
+    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 Label;
+      }
+    },
+    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 Label;
+      }
+    },
+    resourcesError: {
+      type: [String, Function, Object],
+      default: function _default() {
+        return Label;
+      }
+    },
+    resourceEditor: {
+      type: [String, Function, Object],
+      default: function _default() {
+        return KendoResourceEditor;
+      }
+    },
     errors: Object,
     valid: Boolean,
     touched: Boolean,
@@ -72,14 +219,17 @@ var SchedulerFormEditorVue2 = {
     ks: {
       default: null
     },
+    kendoForm: {
+      default: {}
+    },
     kendoLocalizationService: {
       default: null
     }
   },
   data: function data() {
     return {
-      startZoneChecked: Boolean(this.$props.valueGetter(this.fields.startTimezone)),
-      endZoneChecked: Boolean(this.$props.valueGetter(this.fields.endTimezone))
+      startZoneChecked: Boolean(this.kendoForm.valueGetter(this.ks.fields.startTimezone)),
+      endZoneChecked: Boolean(this.kendoForm.valueGetter(this.ks.fields.endTimezone))
     };
   },
   // @ts-ignore
@@ -91,9 +241,11 @@ var SchedulerFormEditorVue2 = {
   },
   // @ts-ignore
   render: function render(createElement) {
+    var _this = this;
+
     var h = gh || createElement;
     var timezones = timezoneNames();
-    var localization = this.provideLocalizationService(this); // const fields = useSchedulerFieldsContext();
+    var localization = provideLocalizationService(this); // const fields = useSchedulerFieldsContext();
     // const { resources, timezone } = useSchedulerPropsContext();
 
     var _a = this.$props,
@@ -128,56 +280,66 @@ var SchedulerFormEditorVue2 = {
         DescriptionError = _b.descriptionError,
         ResourceLabel = _b.resourceLabel,
         ResourceEditor = _b.resourceEditor;
-    var start = this.$props.valueGetter(this.fields.start) || new Date();
-    var startTimezone = this.$props.valueGetter(this.fields.startTimezone) || this.ks.timezone || '';
-    var endTimezone = this.$props.valueGetter(this.fields.endTimezone) || this.ks.timezone || '';
+    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 h("div", {
       //   {...other}
       "class": 'k-scheduler-edit-form'
     }, [h("div", {
       "class": "k-form-field"
-    }, [h(Field, {
-      name: this.fields.title,
+    }, [// @ts-ignore function children
+    h(Field, {
+      name: title,
       attrs: this.v3 ? undefined : {
-        name: this.fields.title,
+        name: title,
         component: TitleLabel,
         editorId: 'k-scheduler-editor-title'
       },
       component: TitleLabel,
       editorId: 'k-scheduler-editor-title'
-    }, [localization.toLanguageString(editorEventTitle, messages[editorEventTitle])]), h("div", {
+    }, 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: this.fields.title,
-        field: this.fields.title,
+        name: title,
+        field: title,
         component: TitleEditor
       },
-      name: this.fields.title,
-      field: this.fields.title,
+      name: title,
+      field: title,
       component: TitleEditor
-    }), this.$props.errors[this.fields.title] && h(Field, {
-      name: this.fields.title,
+    }), this.kendoForm.errors[title] && // @ts-ignore function children
+    h(Field, {
+      name: title,
       attrs: this.v3 ? undefined : {
-        name: this.fields.title,
+        name: title,
         component: TitleError
       },
       component: TitleError
-    }, [this.$props.errors[this.fields.title]])])]), h("div", {
+    }, this.v3 ? function () {
+      return [_this.kendoForm.errors[title]];
+    } : [_this.kendoForm.errors[title]])])]), h("div", {
       "class": "k-form-field"
-    }, [h(Field, {
-      name: this.fields.start,
+    }, [// @ts-ignore function children
+    h(Field, {
+      name: this.ks.fields.start,
       attrs: this.v3 ? undefined : {
-        name: this.fields.start,
+        name: this.ks.fields.start,
         component: StartLabel,
         editorId: "k-scheduler-editor-start"
       },
       component: StartLabel,
       editorId: "k-scheduler-editor-start"
-    }, [localization.toLanguageString(editorEventStart, messages[editorEventStart])]), h("div", {
+    }, this.v3 ? function () {
+      return [localization.toLanguageString(editorEventStart, messages[editorEventStart])];
+    } : [localization.toLanguageString(editorEventStart, messages[editorEventStart])]), h("div", {
       "class": "k-form-field-wrap",
       style: {
         display: 'flex'
@@ -186,25 +348,28 @@ var SchedulerFormEditorVue2 = {
       id: "k-scheduler-editor-start",
       attrs: this.v3 ? undefined : {
         id: "k-scheduler-editor-start",
-        name: this.fields.start,
+        name: this.ks.fields.start,
         width: "auto",
         component: StartEditor,
-        as: this.$props.valueGetter(this.fields.isAllDay) ? DatePicker : DateTimePicker,
+        as: this.kendoForm.valueGetter(this.ks.fields.isAllDay) ? DatePicker : DateTimePicker,
         timezone: this.ks.timezone
       },
-      name: this.fields.start,
+      name: this.ks.fields.start,
       width: "auto",
       component: StartEditor,
-      as: this.$props.valueGetter(this.fields.isAllDay) ? DatePicker : DateTimePicker,
+      as: this.kendoForm.valueGetter(this.ks.fields.isAllDay) ? DatePicker : DateTimePicker,
       timezone: this.ks.timezone
-    }), this.$props.errors[this.fields.start] && h(Field, {
-      name: this.fields.start,
+    }), this.kendoForm.errors[this.ks.fields.start] && // @ts-ignore function children
+    h(Field, {
+      name: this.ks.fields.start,
       attrs: this.v3 ? undefined : {
-        name: this.fields.start,
+        name: this.ks.fields.start,
         component: StartError
       },
       component: StartError
-    }, [this.$props.errors[this.fields.start]])]), "\xA0", h("div", [h(StartTimezoneCheckedEditor, {
+    }, this.v3 ? function () {
+      return [_this.kendoForm.errors[_this.ks.fields.start]];
+    } : [_this.kendoForm.errors[_this.ks.fields.start]])]), "\xA0", h("div", [h(StartTimezoneCheckedEditor, {
       id: 'k-scheduler-editor-set-start-timezone',
       attrs: this.v3 ? undefined : {
         id: 'k-scheduler-editor-set-start-timezone',
@@ -215,7 +380,8 @@ var SchedulerFormEditorVue2 = {
         "change": this.handleStartZoneCheckboxChange
       },
       value: this.startZoneChecked
-    }), "\xA0", h(StartTimezoneCheckedLabel, {
+    }), "\xA0", // @ts-ignore function children
+    h(StartTimezoneCheckedLabel, {
       "class": 'k-checkbox-label',
       editorId: 'k-scheduler-editor-set-start-timezone',
       attrs: this.v3 ? undefined : {
@@ -224,16 +390,21 @@ var SchedulerFormEditorVue2 = {
       style: {
         display: 'inline-flex'
       }
-    }, [localization.toLanguageString(editorEventTimeZone, messages[editorEventTimeZone])])])])]), this.startZoneChecked && h("div", {
+    }, 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.fields.start,
+    }, [// @ts-ignore function children
+    h(Field, {
+      name: this.ks.fields.start,
       attrs: this.v3 ? undefined : {
-        name: this.fields.start,
+        name: this.ks.fields.start,
         component: StartTimezoneLabel
       },
       component: StartTimezoneLabel
-    }, [localization.toLanguageString(editorEventStartTimeZone, messages[editorEventStartTimeZone])]), h("div", {
+    }, 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,
@@ -241,32 +412,38 @@ var SchedulerFormEditorVue2 = {
         component: StartTimezoneEditor,
         value: startTimezone,
         validator: this.startTimezoneValidator,
-        data: timezones,
-        name: this.fields.startTimezone
+        dataItems: timezones,
+        name: this.ks.fields.startTimezone
       },
       value: startTimezone,
       validator: this.startTimezoneValidator,
-      data: timezones,
-      name: this.fields.startTimezone
-    }), this.$props.errors[this.fields.startTimezone] && h(Field, {
-      name: this.fields.startTimezone,
+      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.fields.startTimezone,
+        name: this.ks.fields.startTimezone,
         component: StartTimezoneError
       },
       component: StartTimezoneError
-    }, [this.$props.errors[this.fields.startTimezone]])])]), h("div", {
+    }, 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.fields.end,
+    }, [// @ts-ignore function children
+    h(Field, {
+      name: this.ks.fields.end,
       attrs: this.v3 ? undefined : {
-        name: this.fields.end,
+        name: this.ks.fields.end,
         component: EndLabel,
         editorId: "k-scheduler-editor-end"
       },
       component: EndLabel,
       editorId: "k-scheduler-editor-end"
-    }, [localization.toLanguageString(editorEventEnd, messages[editorEventEnd])]), h("div", {
+    }, this.v3 ? function () {
+      return [localization.toLanguageString(editorEventEnd, messages[editorEventEnd])];
+    } : [localization.toLanguageString(editorEventEnd, messages[editorEventEnd])]), h("div", {
       "class": "k-form-field-wrap",
       style: {
         display: 'flex'
@@ -275,25 +452,28 @@ var SchedulerFormEditorVue2 = {
       id: "k-scheduler-editor-end",
       attrs: this.v3 ? undefined : {
         id: "k-scheduler-editor-end",
-        name: this.fields.end,
+        name: this.ks.fields.end,
         width: "auto",
         component: EndEditor,
-        as: this.$props.valueGetter(this.fields.isAllDay) ? DatePicker : DateTimePicker,
+        as: this.kendoForm.valueGetter(this.ks.fields.isAllDay) ? DatePicker : DateTimePicker,
         timezone: this.ks.timezone
       },
-      name: this.fields.end,
+      name: this.ks.fields.end,
       width: "auto",
       component: EndEditor,
-      as: this.$props.valueGetter(this.fields.isAllDay) ? DatePicker : DateTimePicker,
+      as: this.kendoForm.valueGetter(this.ks.fields.isAllDay) ? DatePicker : DateTimePicker,
       timezone: this.ks.timezone
-    }), this.$props.errors[this.fields.end] && h(Field, {
-      name: this.fields.end,
+    }), this.kendoForm.errors[this.ks.fields.end] && // @ts-ignore function children
+    h(Field, {
+      name: this.ks.fields.end,
       attrs: this.v3 ? undefined : {
-        name: this.fields.end,
+        name: this.ks.fields.end,
         component: EndError
       },
       component: EndError
-    }, [this.$props.errors[this.fields.end]])]), "\xA0", h("div", [this.startZoneChecked && [h(EndTimezoneCheckedEditor, {
+    }, this.v3 ? function () {
+      return [_this.kendoForm.errors[_this.ks.fields.end]];
+    } : [_this.kendoForm.errors[_this.ks.fields.end]])]), "\xA0", h("div", [this.startZoneChecked && [h(EndTimezoneCheckedEditor, {
       id: 'k-scheduler-editor-set-end-timezone',
       attrs: this.v3 ? undefined : {
         id: 'k-scheduler-editor-set-end-timezone',
@@ -304,7 +484,8 @@ var SchedulerFormEditorVue2 = {
         "change": this.handleEndZoneCheckboxChange
       },
       value: this.endZoneChecked
-    }), h(EndTimezoneCheckedLabel, {
+    }), // @ts-ignore function children
+    h(EndTimezoneCheckedLabel, {
       "class": 'k-checkbox-label',
       editorId: 'k-scheduler-editor-set-end-timezone',
       attrs: this.v3 ? undefined : {
@@ -313,43 +494,51 @@ var SchedulerFormEditorVue2 = {
       style: {
         display: 'inline-flex'
       }
-    }, [localization.toLanguageString(editorEventSeparateTimeZones, messages[editorEventSeparateTimeZones])])]])])]), this.endZoneChecked && h("div", {
+    }, 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.fields.endTimezone,
+    }, [// @ts-ignore function children
+    h(Field, {
+      name: this.ks.fields.endTimezone,
       attrs: this.v3 ? undefined : {
-        name: this.fields.endTimezone,
+        name: this.ks.fields.endTimezone,
         component: EndTimezoneLabel
       },
       component: EndTimezoneLabel
-    }, [localization.toLanguageString(editorEventEndTimeZone, messages[editorEventEndTimeZone])]), h("div", {
+    }, 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,
-        data: timezones,
+        dataItems: timezones,
         validator: this.endTimezoneValidator,
         component: EndTimezoneEditor,
-        name: this.fields.endTimezone
+        name: this.ks.fields.endTimezone
       },
-      data: timezones,
+      dataItems: timezones,
       validator: this.endTimezoneValidator,
       component: EndTimezoneEditor,
-      name: this.fields.endTimezone
-    }), this.$props.errors[this.fields.endTimezone] && h(Field, {
-      name: this.fields.endTimezone,
+      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.fields.endTimezone,
+        name: this.ks.fields.endTimezone,
         component: EndTimezoneError
       },
       component: EndTimezoneError
-    }, [this.$props.errors[this.fields.endTimezone]])])]), h("div", {
+    }, 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.fields.isAllDay,
+      name: this.ks.fields.isAllDay,
       attrs: this.v3 ? undefined : {
-        name: this.fields.isAllDay,
+        name: this.ks.fields.isAllDay,
         component: Label
       },
       component: Label
@@ -359,67 +548,76 @@ var SchedulerFormEditorVue2 = {
       id: 'k-is-allday-checkbox',
       attrs: this.v3 ? undefined : {
         id: 'k-is-allday-checkbox',
-        name: this.fields.isAllDay,
+        name: this.ks.fields.isAllDay,
         component: AllDayEditor
       },
-      name: this.fields.isAllDay,
+      name: this.ks.fields.isAllDay,
       component: AllDayEditor
-    }), "\xA0", h(Field, {
-      name: this.fields.isAllDay,
+    }), "\xA0", // @ts-ignore function children
+    h(Field, {
+      name: this.ks.fields.isAllDay,
       attrs: this.v3 ? undefined : {
-        name: this.fields.isAllDay,
-        field: this.fields.isAllDay,
+        name: this.ks.fields.isAllDay,
+        field: this.ks.fields.isAllDay,
         editorId: 'k-is-allday-checkbox',
         component: AllDayLabel
       },
-      field: this.fields.isAllDay,
+      field: this.ks.fields.isAllDay,
       editorId: 'k-is-allday-checkbox',
       "class": 'k-checkbox-label',
       component: AllDayLabel
-    }, [localization.toLanguageString(editorEventAllDay, messages[editorEventAllDay])])])]), h(Field, {
+    }, this.v3 ? function () {
+      return [localization.toLanguageString(editorEventAllDay, messages[editorEventAllDay])];
+    } : [localization.toLanguageString(editorEventAllDay, messages[editorEventAllDay])])])]), h(Field, {
       component: RecurrenceEditor,
       attrs: this.v3 ? undefined : {
         component: RecurrenceEditor,
-        field: this.fields.recurrenceRule,
-        name: this.fields.recurrenceRule,
+        field: this.ks.fields.recurrenceRule,
+        name: this.ks.fields.recurrenceRule,
         start: start
       },
-      field: this.fields.recurrenceRule,
-      name: this.fields.recurrenceRule,
+      field: this.ks.fields.recurrenceRule,
+      name: this.ks.fields.recurrenceRule,
       start: start
     }), h("div", {
       "class": "k-form-field"
-    }, [h(Field, {
-      name: this.fields.description,
+    }, [// @ts-ignore function children
+    h(Field, {
+      name: this.ks.fields.description,
       attrs: this.v3 ? undefined : {
-        name: this.fields.description,
+        name: this.ks.fields.description,
         component: DescriptionLabel
       },
       component: DescriptionLabel
-    }, [localization.toLanguageString(editorEventDescription, messages[editorEventDescription])]), h("div", {
+    }, 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.fields.description,
+        name: this.ks.fields.description,
         rows: 1,
         id: 'k-event-description'
       },
-      name: this.fields.description,
+      name: this.ks.fields.description,
       rows: 1,
       id: 'k-event-description',
       style: {
         width: '100%'
       }
-    }), this.$props.errors[this.fields.description] && h(Field, {
-      name: this.fields.description,
+    }), this.kendoForm.errors[this.ks.fields.description] && // @ts-ignore function children
+    h(Field, {
+      name: this.ks.fields.description,
       attrs: this.v3 ? undefined : {
-        name: this.fields.description,
+        name: this.ks.fields.description,
         component: DescriptionError
       },
       component: DescriptionError
-    }, [this.$props.errors[this.fields.description]])])]), (this.resources || []).map(function (resource) {
+    }, this.v3 ? function () {
+      return [_this.kendoForm.errors[_this.ks.fields.description]];
+    } : [_this.kendoForm.errors[_this.ks.fields.description]])])]), (this.ks.resources || []).map(function (resource) {
       return h("div", {
         key: resource.field
       }, [h("div", {
@@ -431,7 +629,10 @@ var SchedulerFormEditorVue2 = {
           component: ResourceLabel
         },
         component: ResourceLabel
-      }), h(Label, [resource.name]), h(Field, {
+      }), // @ts-ignore function children
+      h(Label, this.v3 ? function () {
+        return [resource.name];
+      } : [resource.name]), h(Field, {
         name: resource.field,
         attrs: this.v3 ? undefined : {
           name: resource.field,
@@ -456,10 +657,10 @@ var SchedulerFormEditorVue2 = {
   methods: {
     handleStartZoneCheckboxChange: function handleStartZoneCheckboxChange(e) {
       if (!e.value) {
-        this.$emit('change', this.fields.startTimezone, {
+        this.$emit('change', this.ks.fields.startTimezone, {
           value: null
         });
-        this.$emit('change', this.fields.endTimezone, {
+        this.$emit('change', this.ks.fields.endTimezone, {
           value: null
         });
         this.endZoneChecked = e.value;
@@ -469,7 +670,7 @@ var SchedulerFormEditorVue2 = {
     },
     handleEndZoneCheckboxChange: function handleEndZoneCheckboxChange(e) {
       if (!e.value) {
-        this.$emit('change', this.fields.endTimezone, {
+        this.$emit('change', this.ks.fields.endTimezone, {
           value: null
         });
       }
@@ -480,10 +681,10 @@ var SchedulerFormEditorVue2 = {
       return value ? undefined : this.requiredValidationMessage;
     },
     startTimezoneValidator: function startTimezoneValidator(_dataItem, formValueGetter) {
-      return this.startZoneChecked ? this.requiredValidator(formValueGetter(this.fields.startTimezone)) : undefined;
+      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.fields.endTimezone)) || this.requiredValidator(formValueGetter(this.fields.startTimezone)) : undefined;
+      return this.startZoneChecked && this.endZoneChecked ? this.requiredValidator(formValueGetter(this.ks.fields.endTimezone)) || this.requiredValidator(formValueGetter(this.ks.fields.startTimezone)) : undefined;
     }
   }
 };