@progress/kendo-vue-scheduler 3.1.4 → 3.2.0-dev.202204120815

package/dist/es/editors/SchedulerFormEditor.js

@@ -17,14 +17,14 @@ var allVue = Vue;
 var gh = allVue.h;
 var inject = allVue.inject;
 import { timezoneNames } from '@progress/kendo-date-math';
-import { Error, Label } from '@progress/kendo-vue-labels';
+import { Error, Label as KLabel } 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 { Field, FormElement } from '@progress/kendo-vue-form';
+import { Input as KInput, Checkbox, TextArea } from '@progress/kendo-vue-inputs';
 import { messages, editorEventTitle, editorEventStart, editorEventEnd, editorEventDescription, editorEventAllDay, editorEventTimeZone, editorEventSeparateTimeZones, editorEventStartTimeZone, editorEventEndTimeZone, editorValidationRequired } from '../messages'; // import { useSchedulerPropsContext, useSchedulerFieldsContext } from '../context';
 
 import { FilterableComboBox } from './FilterableComboBox';
+import { getDefaultSlots } from '@progress/kendo-vue-common';
 import { RecurrenceEditor as KendoRecurrenceEditor } from '../recurrence/RecurrenceEditor';
 import { ResourceEditor as KendoResourceEditor } from './ResourceEditor';
 import { ZonedDateTime } from './ZonedDateTime'; // tslint:enable:max-line-length
@@ -38,7 +38,7 @@ var SchedulerFormEditorVue2 = {
     titleLabel: {
       type: [String, Function, Object],
       default: function _default() {
-        return Label;
+        return KLabel;
       }
     },
     titleError: {
@@ -50,13 +50,13 @@ var SchedulerFormEditorVue2 = {
     titleEditor: {
       type: [String, Function, Object],
       default: function _default() {
-        return Input;
+        return KInput;
       }
     },
     startLabel: {
       type: [String, Function, Object],
       default: function _default() {
-        return Label;
+        return KLabel;
       }
     },
     startError: {
@@ -74,7 +74,7 @@ var SchedulerFormEditorVue2 = {
     startTimezoneLabel: {
       type: [String, Function, Object],
       default: function _default() {
-        return Label;
+        return KLabel;
       }
     },
     startTimezoneError: {
@@ -92,7 +92,7 @@ var SchedulerFormEditorVue2 = {
     startTimezoneCheckedLabel: {
       type: [String, Function, Object],
       default: function _default() {
-        return Label;
+        return KLabel;
       }
     },
     startTimezoneCheckedEditor: {
@@ -104,7 +104,7 @@ var SchedulerFormEditorVue2 = {
     endLabel: {
       type: [String, Function, Object],
       default: function _default() {
-        return Label;
+        return KLabel;
       }
     },
     endError: {
@@ -122,7 +122,7 @@ var SchedulerFormEditorVue2 = {
     endTimezoneLabel: {
       type: [String, Function, Object],
       default: function _default() {
-        return Label;
+        return KLabel;
       }
     },
     endTimezoneError: {
@@ -140,7 +140,7 @@ var SchedulerFormEditorVue2 = {
     endTimezoneCheckedLabel: {
       type: [String, Function, Object],
       default: function _default() {
-        return Label;
+        return KLabel;
       }
     },
     endTimezoneCheckedEditor: {
@@ -152,7 +152,7 @@ var SchedulerFormEditorVue2 = {
     allDayLabel: {
       type: [String, Function, Object],
       default: function _default() {
-        return Label;
+        return KLabel;
       }
     },
     allDayEditor: {
@@ -170,7 +170,7 @@ var SchedulerFormEditorVue2 = {
     descriptionLabel: {
       type: [String, Function, Object],
       default: function _default() {
-        return Label;
+        return KLabel;
       }
     },
     descriptionError: {
@@ -188,13 +188,13 @@ var SchedulerFormEditorVue2 = {
     resourceLabel: {
       type: [String, Function, Object],
       default: function _default() {
-        return Label;
+        return KLabel;
       }
     },
     resourcesError: {
       type: [String, Function, Object],
       default: function _default() {
-        return Label;
+        return KLabel;
       }
     },
     resourceEditor: {
@@ -244,9 +244,9 @@ var SchedulerFormEditorVue2 = {
     var _this = this;
 
     var h = gh || createElement;
+    var defaultSlots = getDefaultSlots(this);
     var timezones = timezoneNames();
-    var localization = provideLocalizationService(this); // const fields = useSchedulerFieldsContext();
-    // const { resources, timezone } = useSchedulerPropsContext();
+    var localization = provideLocalizationService(this);
 
     var _a = this.$props,
         Component = _a.as,
@@ -285,374 +285,729 @@ var SchedulerFormEditorVue2 = {
     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"
-    }, [// @ts-ignore function children
-    h(Field, {
-      name: title,
-      attrs: this.v3 ? undefined : {
+    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]])]), "\xA0", 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
+        }), "\xA0", // @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]])]), "\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',
+            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
+        }), "\xA0", // @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) {
+          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(Label, 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), 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'
-      },
-      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 : {
+      }, _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
-      },
-      name: title,
-      field: title,
-      component: TitleEditor
-    }), this.kendoForm.errors[title] && // @ts-ignore function children
-    h(Field, {
-      name: title,
-      attrs: this.v3 ? undefined : {
+      }), _this.kendoForm.errors[title] && h(Field, {
         name: title,
+        attrs: _this.v3 ? undefined : {
+          name: title,
+          component: TitleError
+        },
         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,
+      }, _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"
-      },
-      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 : {
+      }, _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",
-        name: this.ks.fields.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,
-        as: this.kendoForm.valueGetter(this.ks.fields.isAllDay) ? DatePicker : DateTimePicker,
-        timezone: this.ks.timezone
-      },
-      name: this.ks.fields.start,
-      width: "auto",
-      component: StartEditor,
-      as: this.kendoForm.valueGetter(this.ks.fields.isAllDay) ? DatePicker : DateTimePicker,
-      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,
+        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
-      },
-      component: StartError
-    }, 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 : {
+      }, _this.v3 ? function () {
+        return [_this.kendoForm.errors[_this.ks.fields.start]];
+      } : [_this.kendoForm.errors[_this.ks.fields.start]])]), "\xA0", timezones.length > 0 && h("div", [h(StartTimezoneCheckedEditor, {
         id: 'k-scheduler-editor-set-start-timezone',
-        value: this.startZoneChecked
-      },
-      onChange: this.handleStartZoneCheckboxChange,
-      on: this.v3 ? undefined : {
-        "change": this.handleStartZoneCheckboxChange
-      },
-      value: this.startZoneChecked
-    }), "\xA0", // @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,
+        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
+      }), "\xA0", 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
-      },
-      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 : {
+      }, _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,
+        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,
+        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
-      },
-      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,
+      }, _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"
-      },
-      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 : {
+      }, _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",
-        name: this.ks.fields.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,
-        as: this.kendoForm.valueGetter(this.ks.fields.isAllDay) ? DatePicker : DateTimePicker,
-        timezone: this.ks.timezone
-      },
-      name: this.ks.fields.end,
-      width: "auto",
-      component: EndEditor,
-      as: this.kendoForm.valueGetter(this.ks.fields.isAllDay) ? DatePicker : DateTimePicker,
-      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,
+        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
-      },
-      component: EndError
-    }, 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 : {
+      }, _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',
-        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,
+        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
-      },
-      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 : {
+      }, _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,
+        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,
+        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
-      },
-      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: Label
-      },
-      component: Label
-    }), h("div", {
-      "class": "k-form-field-wrap"
-    }, [h(Field, {
-      id: 'k-is-allday-checkbox',
-      attrs: this.v3 ? undefined : {
+      }, _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',
-        name: this.ks.fields.isAllDay,
+        attrs: _this.v3 ? undefined : {
+          id: 'k-is-allday-checkbox',
+          name: _this.ks.fields.isAllDay,
+          component: AllDayEditor
+        },
+        name: _this.ks.fields.isAllDay,
         component: AllDayEditor
-      },
-      name: this.ks.fields.isAllDay,
-      component: AllDayEditor
-    }), "\xA0", // @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,
+      }), "\xA0", 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
-      },
-      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 : {
+      }, _this.v3 ? function () {
+        return [localization.toLanguageString(editorEventAllDay, messages[editorEventAllDay])];
+      } : [localization.toLanguageString(editorEventAllDay, messages[editorEventAllDay])])])]), h(Field, {
         component: RecurrenceEditor,
-        field: this.ks.fields.recurrenceRule,
-        name: this.ks.fields.recurrenceRule,
+        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
-      },
-      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,
+      }), 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
-      },
-      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 : {
+      }, _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,
-        name: this.ks.fields.description,
+        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'
-      },
-      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,
+        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
-      },
-      component: DescriptionError
-    }, 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", {
-        "class": "k-form-field"
-      }, [h(Field, {
-        name: resource.field,
-        attrs: this.v3 ? undefined : {
+      }, _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) {
+        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
-        },
-        component: ResourceLabel
-      }), // @ts-ignore function children
-      h(Label, this.v3 ? function () {
-        return [resource.name];
-      } : [resource.name]), h(Field, {
-        name: resource.field,
-        attrs: this.v3 ? undefined : {
+        }), h(Label, 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,
-          data: resource.data,
+          dataItems: resource.data,
           textField: resource.textField,
           valueField: resource.valueField,
           colorField: resource.colorField
-        },
-        component: ResourceEditor,
-        resource: resource,
-        multiple: resource.multiple,
-        data: resource.data,
-        textField: resource.textField,
-        valueField: resource.valueField,
-        colorField: resource.colorField
-      })])]);
-    })]);
+        })])]);
+      }, _this), defaultSlots])
+    );
   },
   methods: {
     handleStartZoneCheckboxChange: function handleStartZoneCheckboxChange(e) {