@progress/kendo-vue-scheduler 3.10.2 → 3.11.0-dev.202305230751

package/dist/npm/editors/SchedulerFormEditor.js

@@ -19,7 +19,6 @@ var Vue = require("vue");
 var allVue = Vue;
 var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
-var inject = allVue.inject;
 var kendo_date_math_1 = require("@progress/kendo-date-math");
 var kendo_vue_labels_1 = require("@progress/kendo-vue-labels");
 var kendo_vue_intl_1 = require("@progress/kendo-vue-intl");
@@ -293,11 +292,48 @@ var SchedulerFormEditorVue2 = {
       h(kendo_vue_form_1.FormElement, {
         "class": 'k-scheduler-edit-form'
       }, this.v3 ? function () {
-        return [h("div", {
-          "class": "k-form-field"
-        }, [
+        return [
         // @ts-ignore function children
-        h(kendo_vue_form_1.Field, {
+        h(kendo_vue_form_1.FieldWrapper, _this.v3 ? function () {
+          return [
+          // @ts-ignore function children
+          h(kendo_vue_form_1.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(main_1.editorEventTitle, main_1.messages[main_1.editorEventTitle])];
+          } : [localization.toLanguageString(main_1.editorEventTitle, main_1.messages[main_1.editorEventTitle])]), h("div", {
+            "class": "k-form-field-wrap"
+          }, [h(kendo_vue_form_1.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(kendo_vue_form_1.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(kendo_vue_form_1.Field, {
           name: title,
           attrs: _this.v3 ? undefined : {
             name: title,
@@ -321,9 +357,7 @@ var SchedulerFormEditorVue2 = {
           name: title,
           field: title,
           component: titleEditor
-        }), _this.kendoForm.errors[title] &&
-        // @ts-ignore function children
-        h(kendo_vue_form_1.Field, {
+        }), _this.kendoForm.errors[title] && h(kendo_vue_form_1.Field, {
           name: title,
           attrs: _this.v3 ? undefined : {
             name: title,
@@ -332,11 +366,53 @@ var SchedulerFormEditorVue2 = {
           component: titleError
         }, _this.v3 ? function () {
           return [_this.kendoForm.errors[title]];
-        } : [_this.kendoForm.errors[title]])])]), h("div", {
-          "class": "k-form-field"
-        }, [
+        } : [_this.kendoForm.errors[title]])])]),
         // @ts-ignore function children
-        h(kendo_vue_form_1.Field, {
+        h(kendo_vue_form_1.FieldWrapper, _this.v3 ? function () {
+          return [
+          // @ts-ignore function children
+          h(kendo_vue_form_1.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",
+            "class": 'k-form-label'
+          }, _this.v3 ? function () {
+            return [localization.toLanguageString(main_1.editorEventStart, main_1.messages[main_1.editorEventStart])];
+          } : [localization.toLanguageString(main_1.editorEventStart, main_1.messages[main_1.editorEventStart])]), h("div", {
+            "class": "k-form-field-wrap"
+          }, [h(kendo_vue_form_1.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(kendo_vue_form_1.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]])])];
+        } : [h(kendo_vue_form_1.Field, {
           name: _this.ks.fields.start,
           attrs: _this.v3 ? undefined : {
             name: _this.ks.fields.start,
@@ -344,15 +420,13 @@ var SchedulerFormEditorVue2 = {
             editorId: "k-scheduler-editor-start"
           },
           component: startLabel,
-          editorId: "k-scheduler-editor-start"
+          editorId: "k-scheduler-editor-start",
+          "class": 'k-form-label'
         }, _this.v3 ? function () {
           return [localization.toLanguageString(main_1.editorEventStart, main_1.messages[main_1.editorEventStart])];
         } : [localization.toLanguageString(main_1.editorEventStart, main_1.messages[main_1.editorEventStart])]), h("div", {
-          "class": "k-form-field-wrap",
-          style: {
-            display: 'flex'
-          }
-        }, [h("div", [h(kendo_vue_form_1.Field, {
+          "class": "k-form-field-wrap"
+        }, [h(kendo_vue_form_1.Field, {
           id: "k-scheduler-editor-start",
           attrs: _this.v3 ? undefined : {
             id: "k-scheduler-editor-start",
@@ -367,9 +441,7 @@ var SchedulerFormEditorVue2 = {
           component: startEditor,
           isAllDay: !!_this.kendoForm.values.isAllDay,
           timezone: _this.ks.timezone
-        }), _this.kendoForm.errors[_this.ks.fields.start] &&
-        // @ts-ignore function children
-        h(kendo_vue_form_1.Field, {
+        }), _this.kendoForm.errors[_this.ks.fields.start] && h(kendo_vue_form_1.Field, {
           name: _this.ks.fields.start,
           attrs: _this.v3 ? undefined : {
             name: _this.ks.fields.start,
@@ -378,7 +450,35 @@ var SchedulerFormEditorVue2 = {
           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, {
+        } : [_this.kendoForm.errors[_this.ks.fields.start]])])]),
+        // @ts-ignore function children
+        h(kendo_vue_form_1.FieldWrapper, _this.v3 ? function () {
+          return [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(main_1.editorEventTimeZone, main_1.messages[main_1.editorEventTimeZone])];
+          } : [localization.toLanguageString(main_1.editorEventTimeZone, main_1.messages[main_1.editorEventTimeZone])])])];
+        } : [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',
@@ -389,9 +489,7 @@ var SchedulerFormEditorVue2 = {
             "change": _this.handleStartZoneCheckboxChange
           },
           value: _this.startZoneChecked
-        }),
-        // @ts-ignore function children
-        h(StartTimezoneCheckedLabel, {
+        }), h(StartTimezoneCheckedLabel, {
           "class": 'k-checkbox-label',
           editorId: 'k-scheduler-editor-set-start-timezone',
           attrs: _this.v3 ? undefined : {
@@ -402,11 +500,48 @@ var SchedulerFormEditorVue2 = {
           }
         }, _this.v3 ? function () {
           return [localization.toLanguageString(main_1.editorEventTimeZone, main_1.messages[main_1.editorEventTimeZone])];
-        } : [localization.toLanguageString(main_1.editorEventTimeZone, main_1.messages[main_1.editorEventTimeZone])])])])]), _this.startZoneChecked && h("div", {
-          "class": "k-form-field"
-        }, [
+        } : [localization.toLanguageString(main_1.editorEventTimeZone, main_1.messages[main_1.editorEventTimeZone])])])]), _this.startZoneChecked &&
         // @ts-ignore function children
-        h(kendo_vue_form_1.Field, {
+        h(kendo_vue_form_1.FieldWrapper, _this.v3 ? function () {
+          return [
+          // @ts-ignore function children
+          h(kendo_vue_form_1.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(main_1.editorEventStartTimeZone, main_1.messages[main_1.editorEventStartTimeZone])];
+          } : [localization.toLanguageString(main_1.editorEventStartTimeZone, main_1.messages[main_1.editorEventStartTimeZone])]), h("div", {
+            "class": "k-form-field-wrap"
+          }, [h(kendo_vue_form_1.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(kendo_vue_form_1.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(kendo_vue_form_1.Field, {
           name: _this.ks.fields.start,
           attrs: _this.v3 ? undefined : {
             name: _this.ks.fields.start,
@@ -430,9 +565,7 @@ var SchedulerFormEditorVue2 = {
           validator: _this.startTimezoneValidator,
           dataItems: timezones,
           name: _this.ks.fields.startTimezone
-        }), _this.kendoForm.errors[_this.ks.fields.startTimezone] &&
-        // @ts-ignore function children
-        h(kendo_vue_form_1.Field, {
+        }), _this.kendoForm.errors[_this.ks.fields.startTimezone] && h(kendo_vue_form_1.Field, {
           name: _this.ks.fields.startTimezone,
           attrs: _this.v3 ? undefined : {
             name: _this.ks.fields.startTimezone,
@@ -441,11 +574,53 @@ var SchedulerFormEditorVue2 = {
           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"
-        }, [
+        } : [_this.kendoForm.errors[_this.ks.fields.startTimezone]])])]),
         // @ts-ignore function children
-        h(kendo_vue_form_1.Field, {
+        h(kendo_vue_form_1.FieldWrapper, _this.v3 ? function () {
+          return [
+          // @ts-ignore function children
+          h(kendo_vue_form_1.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",
+            "class": 'k-form-label'
+          }, _this.v3 ? function () {
+            return [localization.toLanguageString(main_1.editorEventEnd, main_1.messages[main_1.editorEventEnd])];
+          } : [localization.toLanguageString(main_1.editorEventEnd, main_1.messages[main_1.editorEventEnd])]), h("div", {
+            "class": "k-form-field-wrap"
+          }, [h(kendo_vue_form_1.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(kendo_vue_form_1.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(kendo_vue_form_1.Field, {
           name: _this.ks.fields.end,
           attrs: _this.v3 ? undefined : {
             name: _this.ks.fields.end,
@@ -453,15 +628,13 @@ var SchedulerFormEditorVue2 = {
             editorId: "k-scheduler-editor-end"
           },
           component: endLabel,
-          editorId: "k-scheduler-editor-end"
+          editorId: "k-scheduler-editor-end",
+          "class": 'k-form-label'
         }, _this.v3 ? function () {
           return [localization.toLanguageString(main_1.editorEventEnd, main_1.messages[main_1.editorEventEnd])];
         } : [localization.toLanguageString(main_1.editorEventEnd, main_1.messages[main_1.editorEventEnd])]), h("div", {
-          "class": "k-form-field-wrap",
-          style: {
-            display: 'flex'
-          }
-        }, [h("div", [h(kendo_vue_form_1.Field, {
+          "class": "k-form-field-wrap"
+        }, [h(kendo_vue_form_1.Field, {
           id: "k-scheduler-editor-end",
           attrs: _this.v3 ? undefined : {
             id: "k-scheduler-editor-end",
@@ -476,9 +649,7 @@ var SchedulerFormEditorVue2 = {
           component: endEditor,
           isAllDay: !!_this.kendoForm.values.isAllDay,
           timezone: _this.ks.timezone
-        }), _this.kendoForm.errors[_this.ks.fields.end] &&
-        // @ts-ignore function children
-        h(kendo_vue_form_1.Field, {
+        }), _this.kendoForm.errors[_this.ks.fields.end] && h(kendo_vue_form_1.Field, {
           name: _this.ks.fields.end,
           attrs: _this.v3 ? undefined : {
             name: _this.ks.fields.end,
@@ -487,7 +658,45 @@ var SchedulerFormEditorVue2 = {
           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, {
+        } : [_this.kendoForm.errors[_this.ks.fields.end]])])]), _this.startZoneChecked &&
+        // @ts-ignore function children
+        h(kendo_vue_form_1.FieldWrapper, _this.v3 ? function () {
+          return [h("div", {
+            className: "k-form-field-wrap",
+            attrs: _this.v3 ? undefined : {
+              className: "k-form-field-wrap"
+            }
+          }, [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(main_1.editorEventSeparateTimeZones, main_1.messages[main_1.editorEventSeparateTimeZones])];
+          } : [localization.toLanguageString(main_1.editorEventSeparateTimeZones, main_1.messages[main_1.editorEventSeparateTimeZones])])];
+        } : [h("div", {
+          className: "k-form-field-wrap",
+          attrs: _this.v3 ? undefined : {
+            className: "k-form-field-wrap"
+          }
+        }, [h(EndTimezoneCheckedEditor, {
           id: 'k-scheduler-editor-set-end-timezone',
           attrs: _this.v3 ? undefined : {
             id: 'k-scheduler-editor-set-end-timezone',
@@ -498,9 +707,7 @@ var SchedulerFormEditorVue2 = {
             "change": _this.handleEndZoneCheckboxChange
           },
           value: _this.endZoneChecked
-        }),
-        // @ts-ignore function children
-        h(EndTimezoneCheckedLabel, {
+        })]), h(EndTimezoneCheckedLabel, {
           "class": 'k-checkbox-label',
           editorId: 'k-scheduler-editor-set-end-timezone',
           attrs: _this.v3 ? undefined : {
@@ -511,17 +718,56 @@ var SchedulerFormEditorVue2 = {
           }
         }, _this.v3 ? function () {
           return [localization.toLanguageString(main_1.editorEventSeparateTimeZones, main_1.messages[main_1.editorEventSeparateTimeZones])];
-        } : [localization.toLanguageString(main_1.editorEventSeparateTimeZones, main_1.messages[main_1.editorEventSeparateTimeZones])])]])])]), _this.endZoneChecked && h("div", {
-          "class": "k-form-field"
-        }, [
+        } : [localization.toLanguageString(main_1.editorEventSeparateTimeZones, main_1.messages[main_1.editorEventSeparateTimeZones])])]), _this.endZoneChecked &&
         // @ts-ignore function children
-        h(kendo_vue_form_1.Field, {
+        h(kendo_vue_form_1.FieldWrapper, _this.v3 ? function () {
+          return [
+          // @ts-ignore function children
+          h(kendo_vue_form_1.Field, {
+            name: _this.ks.fields.endTimezone,
+            attrs: _this.v3 ? undefined : {
+              name: _this.ks.fields.endTimezone,
+              component: endTimezoneLabel
+            },
+            component: endTimezoneLabel,
+            "class": 'k-form-label'
+          }, _this.v3 ? function () {
+            return [localization.toLanguageString(main_1.editorEventEndTimeZone, main_1.messages[main_1.editorEventEndTimeZone])];
+          } : [localization.toLanguageString(main_1.editorEventEndTimeZone, main_1.messages[main_1.editorEventEndTimeZone])]), h("div", {
+            "class": "k-form-field-wrap"
+          }, [h(kendo_vue_form_1.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(kendo_vue_form_1.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(kendo_vue_form_1.Field, {
           name: _this.ks.fields.endTimezone,
           attrs: _this.v3 ? undefined : {
             name: _this.ks.fields.endTimezone,
             component: endTimezoneLabel
           },
-          component: endTimezoneLabel
+          component: endTimezoneLabel,
+          "class": 'k-form-label'
         }, _this.v3 ? function () {
           return [localization.toLanguageString(main_1.editorEventEndTimeZone, main_1.messages[main_1.editorEventEndTimeZone])];
         } : [localization.toLanguageString(main_1.editorEventEndTimeZone, main_1.messages[main_1.editorEventEndTimeZone])]), h("div", {
@@ -539,9 +785,7 @@ var SchedulerFormEditorVue2 = {
           validator: _this.endTimezoneValidator,
           component: endTimezoneEditor,
           name: _this.ks.fields.endTimezone
-        }), _this.kendoForm.errors[_this.ks.fields.endTimezone] &&
-        // @ts-ignore function children
-        h(kendo_vue_form_1.Field, {
+        }), _this.kendoForm.errors[_this.ks.fields.endTimezone] && h(kendo_vue_form_1.Field, {
           name: _this.ks.fields.endTimezone,
           attrs: _this.v3 ? undefined : {
             name: _this.ks.fields.endTimezone,
@@ -550,15 +794,53 @@ var SchedulerFormEditorVue2 = {
           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(kendo_vue_form_1.Field, {
+        } : [_this.kendoForm.errors[_this.ks.fields.endTimezone]])])]),
+        // @ts-ignore function children
+        h(kendo_vue_form_1.FieldWrapper, _this.v3 ? function () {
+          return [h(kendo_vue_form_1.Field, {
+            name: _this.ks.fields.isAllDay,
+            attrs: _this.v3 ? undefined : {
+              name: _this.ks.fields.isAllDay,
+              component: kendo_vue_labels_1.Label
+            },
+            component: kendo_vue_labels_1.Label,
+            "class": 'k-form-label'
+          }), h("div", {
+            "class": "k-form-field-wrap"
+          }, [h(kendo_vue_form_1.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(kendo_vue_form_1.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(main_1.editorEventAllDay, main_1.messages[main_1.editorEventAllDay])];
+          } : [localization.toLanguageString(main_1.editorEventAllDay, main_1.messages[main_1.editorEventAllDay])])])];
+        } : [h(kendo_vue_form_1.Field, {
           name: _this.ks.fields.isAllDay,
           attrs: _this.v3 ? undefined : {
             name: _this.ks.fields.isAllDay,
             component: kendo_vue_labels_1.Label
           },
-          component: kendo_vue_labels_1.Label
+          component: kendo_vue_labels_1.Label,
+          "class": 'k-form-label'
         }), h("div", {
           "class": "k-form-field-wrap"
         }, [h(kendo_vue_form_1.Field, {
@@ -570,9 +852,7 @@ var SchedulerFormEditorVue2 = {
           },
           name: _this.ks.fields.isAllDay,
           component: allDayEditor
-        }),
-        // @ts-ignore function children
-        h(kendo_vue_form_1.Field, {
+        }), h(kendo_vue_form_1.Field, {
           name: _this.ks.fields.isAllDay,
           attrs: _this.v3 ? undefined : {
             name: _this.ks.fields.isAllDay,
@@ -586,7 +866,9 @@ var SchedulerFormEditorVue2 = {
           component: allDayLabel
         }, _this.v3 ? function () {
           return [localization.toLanguageString(main_1.editorEventAllDay, main_1.messages[main_1.editorEventAllDay])];
-        } : [localization.toLanguageString(main_1.editorEventAllDay, main_1.messages[main_1.editorEventAllDay])])])]), h(kendo_vue_form_1.Field, {
+        } : [localization.toLanguageString(main_1.editorEventAllDay, main_1.messages[main_1.editorEventAllDay])])])]), h("div", {
+          "class": "k-recurrence-editor"
+        }, [h(kendo_vue_form_1.Field, {
           component: recurrenceEditor,
           attrs: _this.v3 ? undefined : {
             component: recurrenceEditor,
@@ -599,17 +881,54 @@ var SchedulerFormEditorVue2 = {
           field: _this.ks.fields.recurrenceRule,
           name: _this.ks.fields.recurrenceRule,
           start: start
-        }), h("div", {
-          "class": "k-form-field"
-        }, [
+        })]),
         // @ts-ignore function children
-        h(kendo_vue_form_1.Field, {
+        h(kendo_vue_form_1.FieldWrapper, _this.v3 ? function () {
+          return [
+          // @ts-ignore function children
+          h(kendo_vue_form_1.Field, {
+            name: _this.ks.fields.description,
+            attrs: _this.v3 ? undefined : {
+              name: _this.ks.fields.description,
+              component: descriptionLabel
+            },
+            component: descriptionLabel,
+            "class": 'k-form-label'
+          }, _this.v3 ? function () {
+            return [localization.toLanguageString(main_1.editorEventDescription, main_1.messages[main_1.editorEventDescription])];
+          } : [localization.toLanguageString(main_1.editorEventDescription, main_1.messages[main_1.editorEventDescription])]), h("div", {
+            "class": "k-form-field-wrap"
+          }, [h(kendo_vue_form_1.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'
+          }), _this.kendoForm.errors[_this.ks.fields.description] &&
+          // @ts-ignore function children
+          h(kendo_vue_form_1.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]])])];
+        } : [h(kendo_vue_form_1.Field, {
           name: _this.ks.fields.description,
           attrs: _this.v3 ? undefined : {
             name: _this.ks.fields.description,
             component: descriptionLabel
           },
-          component: descriptionLabel
+          component: descriptionLabel,
+          "class": 'k-form-label'
         }, _this.v3 ? function () {
           return [localization.toLanguageString(main_1.editorEventDescription, main_1.messages[main_1.editorEventDescription])];
         } : [localization.toLanguageString(main_1.editorEventDescription, main_1.messages[main_1.editorEventDescription])]), h("div", {
@@ -624,13 +943,8 @@ var SchedulerFormEditorVue2 = {
           },
           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(kendo_vue_form_1.Field, {
+          id: 'k-event-description'
+        }), _this.kendoForm.errors[_this.ks.fields.description] && h(kendo_vue_form_1.Field, {
           name: _this.ks.fields.description,
           attrs: _this.v3 ? undefined : {
             name: _this.ks.fields.description,
@@ -641,25 +955,80 @@ var SchedulerFormEditorVue2 = {
           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(kendo_vue_form_1.Field, {
-            name: resource.field,
-            attrs: this.v3 ? undefined : {
+          return (
+            // @ts-ignore function children
+            h(kendo_vue_form_1.FieldWrapper, {
+              key: resource.field
+            }, this.v3 ? function () {
+              return [h(kendo_vue_form_1.Field, {
+                name: resource.field,
+                attrs: _this2.v3 ? undefined : {
+                  name: resource.field,
+                  component: resourceLabel
+                },
+                component: resourceLabel,
+                "class": 'k-form-label'
+              }),
+              // @ts-ignore function children
+              h(kendo_vue_labels_1.Label, {
+                "class": 'k-form-label'
+              }, _this2.v3 ? function () {
+                return [resource.name];
+              } : [resource.name]), h(kendo_vue_form_1.Field, {
+                name: resource.field,
+                attrs: _this2.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
+              }), _this2.kendoForm.errors[resource.field] &&
+              // @ts-ignore function children
+              h(kendo_vue_form_1.Field, {
+                name: resource.field,
+                attrs: _this2.v3 ? undefined : {
+                  name: resource.field,
+                  component: kendo_vue_labels_1.Error
+                },
+                component: kendo_vue_labels_1.Error
+              }, _this2.v3 ? function () {
+                return [_this2.kendoForm.errors[resource.field]];
+              } : [_this2.kendoForm.errors[resource.field]])];
+            } : [h(kendo_vue_form_1.Field, {
               name: resource.field,
-              component: resourceLabel
-            },
-            component: resourceLabel
-          }),
-          // @ts-ignore function children
-          h(kendo_vue_labels_1.Label, this.v3 ? function () {
-            return [resource.name];
-          } : [resource.name]), h(kendo_vue_form_1.Field, {
-            name: resource.field,
-            attrs: this.v3 ? undefined : {
+              attrs: _this2.v3 ? undefined : {
+                name: resource.field,
+                component: resourceLabel
+              },
+              component: resourceLabel,
+              "class": 'k-form-label'
+            }), h(kendo_vue_labels_1.Label, {
+              "class": 'k-form-label'
+            }, _this2.v3 ? function () {
+              return [resource.name];
+            } : [resource.name]), h(kendo_vue_form_1.Field, {
               name: resource.field,
+              attrs: _this2.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,
@@ -667,30 +1036,54 @@ var SchedulerFormEditorVue2 = {
               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(kendo_vue_form_1.Field, {
-            name: resource.field,
-            attrs: this.v3 ? undefined : {
+            }), _this2.kendoForm.errors[resource.field] && h(kendo_vue_form_1.Field, {
               name: resource.field,
+              attrs: _this2.v3 ? undefined : {
+                name: resource.field,
+                component: kendo_vue_labels_1.Error
+              },
               component: kendo_vue_labels_1.Error
-            },
-            component: kendo_vue_labels_1.Error
-          }, this.v3 ? function () {
-            return [_this2.kendoForm.errors[resource.field]];
-          } : [_this2.kendoForm.errors[resource.field]])])]);
+            }, _this2.v3 ? function () {
+              return [_this2.kendoForm.errors[resource.field]];
+            } : [_this2.kendoForm.errors[resource.field]])])
+          );
         }, _this), defaultSlots];
-      } : [h("div", {
-        "class": "k-form-field"
-      }, [h(kendo_vue_form_1.Field, {
+      } : [h(kendo_vue_form_1.FieldWrapper, _this.v3 ? function () {
+        return [h(kendo_vue_form_1.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(main_1.editorEventTitle, main_1.messages[main_1.editorEventTitle])];
+        } : [localization.toLanguageString(main_1.editorEventTitle, main_1.messages[main_1.editorEventTitle])]), h("div", {
+          "class": "k-form-field-wrap"
+        }, [h(kendo_vue_form_1.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(kendo_vue_form_1.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(kendo_vue_form_1.Field, {
         name: title,
         attrs: _this.v3 ? undefined : {
           name: title,
@@ -723,9 +1116,47 @@ var SchedulerFormEditorVue2 = {
         component: titleError
       }, _this.v3 ? function () {
         return [_this.kendoForm.errors[title]];
-      } : [_this.kendoForm.errors[title]])])]), h("div", {
-        "class": "k-form-field"
-      }, [h(kendo_vue_form_1.Field, {
+      } : [_this.kendoForm.errors[title]])])]), h(kendo_vue_form_1.FieldWrapper, _this.v3 ? function () {
+        return [h(kendo_vue_form_1.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",
+          "class": 'k-form-label'
+        }, _this.v3 ? function () {
+          return [localization.toLanguageString(main_1.editorEventStart, main_1.messages[main_1.editorEventStart])];
+        } : [localization.toLanguageString(main_1.editorEventStart, main_1.messages[main_1.editorEventStart])]), h("div", {
+          "class": "k-form-field-wrap"
+        }, [h(kendo_vue_form_1.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(kendo_vue_form_1.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]])])];
+      } : [h(kendo_vue_form_1.Field, {
         name: _this.ks.fields.start,
         attrs: _this.v3 ? undefined : {
           name: _this.ks.fields.start,
@@ -733,15 +1164,13 @@ var SchedulerFormEditorVue2 = {
           editorId: "k-scheduler-editor-start"
         },
         component: startLabel,
-        editorId: "k-scheduler-editor-start"
+        editorId: "k-scheduler-editor-start",
+        "class": 'k-form-label'
       }, _this.v3 ? function () {
         return [localization.toLanguageString(main_1.editorEventStart, main_1.messages[main_1.editorEventStart])];
       } : [localization.toLanguageString(main_1.editorEventStart, main_1.messages[main_1.editorEventStart])]), h("div", {
-        "class": "k-form-field-wrap",
-        style: {
-          display: 'flex'
-        }
-      }, [h("div", [h(kendo_vue_form_1.Field, {
+        "class": "k-form-field-wrap"
+      }, [h(kendo_vue_form_1.Field, {
         id: "k-scheduler-editor-start",
         attrs: _this.v3 ? undefined : {
           id: "k-scheduler-editor-start",
@@ -765,7 +1194,31 @@ var SchedulerFormEditorVue2 = {
         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, {
+      } : [_this.kendoForm.errors[_this.ks.fields.start]])])]), h(kendo_vue_form_1.FieldWrapper, _this.v3 ? function () {
+        return [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(main_1.editorEventTimeZone, main_1.messages[main_1.editorEventTimeZone])];
+        } : [localization.toLanguageString(main_1.editorEventTimeZone, main_1.messages[main_1.editorEventTimeZone])])])];
+      } : [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',
@@ -787,9 +1240,42 @@ var SchedulerFormEditorVue2 = {
         }
       }, _this.v3 ? function () {
         return [localization.toLanguageString(main_1.editorEventTimeZone, main_1.messages[main_1.editorEventTimeZone])];
-      } : [localization.toLanguageString(main_1.editorEventTimeZone, main_1.messages[main_1.editorEventTimeZone])])])])]), _this.startZoneChecked && h("div", {
-        "class": "k-form-field"
-      }, [h(kendo_vue_form_1.Field, {
+      } : [localization.toLanguageString(main_1.editorEventTimeZone, main_1.messages[main_1.editorEventTimeZone])])])]), _this.startZoneChecked && h(kendo_vue_form_1.FieldWrapper, _this.v3 ? function () {
+        return [h(kendo_vue_form_1.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(main_1.editorEventStartTimeZone, main_1.messages[main_1.editorEventStartTimeZone])];
+        } : [localization.toLanguageString(main_1.editorEventStartTimeZone, main_1.messages[main_1.editorEventStartTimeZone])]), h("div", {
+          "class": "k-form-field-wrap"
+        }, [h(kendo_vue_form_1.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(kendo_vue_form_1.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(kendo_vue_form_1.Field, {
         name: _this.ks.fields.start,
         attrs: _this.v3 ? undefined : {
           name: _this.ks.fields.start,
@@ -822,9 +1308,47 @@ var SchedulerFormEditorVue2 = {
         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(kendo_vue_form_1.Field, {
+      } : [_this.kendoForm.errors[_this.ks.fields.startTimezone]])])]), h(kendo_vue_form_1.FieldWrapper, _this.v3 ? function () {
+        return [h(kendo_vue_form_1.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",
+          "class": 'k-form-label'
+        }, _this.v3 ? function () {
+          return [localization.toLanguageString(main_1.editorEventEnd, main_1.messages[main_1.editorEventEnd])];
+        } : [localization.toLanguageString(main_1.editorEventEnd, main_1.messages[main_1.editorEventEnd])]), h("div", {
+          "class": "k-form-field-wrap"
+        }, [h(kendo_vue_form_1.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(kendo_vue_form_1.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(kendo_vue_form_1.Field, {
         name: _this.ks.fields.end,
         attrs: _this.v3 ? undefined : {
           name: _this.ks.fields.end,
@@ -832,15 +1356,13 @@ var SchedulerFormEditorVue2 = {
           editorId: "k-scheduler-editor-end"
         },
         component: endLabel,
-        editorId: "k-scheduler-editor-end"
+        editorId: "k-scheduler-editor-end",
+        "class": 'k-form-label'
       }, _this.v3 ? function () {
         return [localization.toLanguageString(main_1.editorEventEnd, main_1.messages[main_1.editorEventEnd])];
       } : [localization.toLanguageString(main_1.editorEventEnd, main_1.messages[main_1.editorEventEnd])]), h("div", {
-        "class": "k-form-field-wrap",
-        style: {
-          display: 'flex'
-        }
-      }, [h("div", [h(kendo_vue_form_1.Field, {
+        "class": "k-form-field-wrap"
+      }, [h(kendo_vue_form_1.Field, {
         id: "k-scheduler-editor-end",
         attrs: _this.v3 ? undefined : {
           id: "k-scheduler-editor-end",
@@ -864,7 +1386,41 @@ var SchedulerFormEditorVue2 = {
         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, {
+      } : [_this.kendoForm.errors[_this.ks.fields.end]])])]), _this.startZoneChecked && h(kendo_vue_form_1.FieldWrapper, _this.v3 ? function () {
+        return [h("div", {
+          className: "k-form-field-wrap",
+          attrs: _this.v3 ? undefined : {
+            className: "k-form-field-wrap"
+          }
+        }, [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(main_1.editorEventSeparateTimeZones, main_1.messages[main_1.editorEventSeparateTimeZones])];
+        } : [localization.toLanguageString(main_1.editorEventSeparateTimeZones, main_1.messages[main_1.editorEventSeparateTimeZones])])];
+      } : [h("div", {
+        className: "k-form-field-wrap",
+        attrs: _this.v3 ? undefined : {
+          className: "k-form-field-wrap"
+        }
+      }, [h(EndTimezoneCheckedEditor, {
         id: 'k-scheduler-editor-set-end-timezone',
         attrs: _this.v3 ? undefined : {
           id: 'k-scheduler-editor-set-end-timezone',
@@ -875,7 +1431,7 @@ var SchedulerFormEditorVue2 = {
           "change": _this.handleEndZoneCheckboxChange
         },
         value: _this.endZoneChecked
-      }), h(EndTimezoneCheckedLabel, {
+      })]), h(EndTimezoneCheckedLabel, {
         "class": 'k-checkbox-label',
         editorId: 'k-scheduler-editor-set-end-timezone',
         attrs: _this.v3 ? undefined : {
@@ -886,15 +1442,50 @@ var SchedulerFormEditorVue2 = {
         }
       }, _this.v3 ? function () {
         return [localization.toLanguageString(main_1.editorEventSeparateTimeZones, main_1.messages[main_1.editorEventSeparateTimeZones])];
-      } : [localization.toLanguageString(main_1.editorEventSeparateTimeZones, main_1.messages[main_1.editorEventSeparateTimeZones])])]])])]), _this.endZoneChecked && h("div", {
-        "class": "k-form-field"
-      }, [h(kendo_vue_form_1.Field, {
+      } : [localization.toLanguageString(main_1.editorEventSeparateTimeZones, main_1.messages[main_1.editorEventSeparateTimeZones])])]), _this.endZoneChecked && h(kendo_vue_form_1.FieldWrapper, _this.v3 ? function () {
+        return [h(kendo_vue_form_1.Field, {
+          name: _this.ks.fields.endTimezone,
+          attrs: _this.v3 ? undefined : {
+            name: _this.ks.fields.endTimezone,
+            component: endTimezoneLabel
+          },
+          component: endTimezoneLabel,
+          "class": 'k-form-label'
+        }, _this.v3 ? function () {
+          return [localization.toLanguageString(main_1.editorEventEndTimeZone, main_1.messages[main_1.editorEventEndTimeZone])];
+        } : [localization.toLanguageString(main_1.editorEventEndTimeZone, main_1.messages[main_1.editorEventEndTimeZone])]), h("div", {
+          "class": "k-form-field-wrap"
+        }, [h(kendo_vue_form_1.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(kendo_vue_form_1.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(kendo_vue_form_1.Field, {
         name: _this.ks.fields.endTimezone,
         attrs: _this.v3 ? undefined : {
           name: _this.ks.fields.endTimezone,
           component: endTimezoneLabel
         },
-        component: endTimezoneLabel
+        component: endTimezoneLabel,
+        "class": 'k-form-label'
       }, _this.v3 ? function () {
         return [localization.toLanguageString(main_1.editorEventEndTimeZone, main_1.messages[main_1.editorEventEndTimeZone])];
       } : [localization.toLanguageString(main_1.editorEventEndTimeZone, main_1.messages[main_1.editorEventEndTimeZone])]), h("div", {
@@ -921,15 +1512,49 @@ var SchedulerFormEditorVue2 = {
         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(kendo_vue_form_1.Field, {
+      } : [_this.kendoForm.errors[_this.ks.fields.endTimezone]])])]), h(kendo_vue_form_1.FieldWrapper, _this.v3 ? function () {
+        return [h(kendo_vue_form_1.Field, {
+          name: _this.ks.fields.isAllDay,
+          attrs: _this.v3 ? undefined : {
+            name: _this.ks.fields.isAllDay,
+            component: kendo_vue_labels_1.Label
+          },
+          component: kendo_vue_labels_1.Label,
+          "class": 'k-form-label'
+        }), h("div", {
+          "class": "k-form-field-wrap"
+        }, [h(kendo_vue_form_1.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(kendo_vue_form_1.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(main_1.editorEventAllDay, main_1.messages[main_1.editorEventAllDay])];
+        } : [localization.toLanguageString(main_1.editorEventAllDay, main_1.messages[main_1.editorEventAllDay])])])];
+      } : [h(kendo_vue_form_1.Field, {
         name: _this.ks.fields.isAllDay,
         attrs: _this.v3 ? undefined : {
           name: _this.ks.fields.isAllDay,
           component: kendo_vue_labels_1.Label
         },
-        component: kendo_vue_labels_1.Label
+        component: kendo_vue_labels_1.Label,
+        "class": 'k-form-label'
       }), h("div", {
         "class": "k-form-field-wrap"
       }, [h(kendo_vue_form_1.Field, {
@@ -955,7 +1580,9 @@ var SchedulerFormEditorVue2 = {
         component: allDayLabel
       }, _this.v3 ? function () {
         return [localization.toLanguageString(main_1.editorEventAllDay, main_1.messages[main_1.editorEventAllDay])];
-      } : [localization.toLanguageString(main_1.editorEventAllDay, main_1.messages[main_1.editorEventAllDay])])])]), h(kendo_vue_form_1.Field, {
+      } : [localization.toLanguageString(main_1.editorEventAllDay, main_1.messages[main_1.editorEventAllDay])])])]), h("div", {
+        "class": "k-recurrence-editor"
+      }, [h(kendo_vue_form_1.Field, {
         component: recurrenceEditor,
         attrs: _this.v3 ? undefined : {
           component: recurrenceEditor,
@@ -968,15 +1595,48 @@ var SchedulerFormEditorVue2 = {
         field: _this.ks.fields.recurrenceRule,
         name: _this.ks.fields.recurrenceRule,
         start: start
-      }), h("div", {
-        "class": "k-form-field"
-      }, [h(kendo_vue_form_1.Field, {
+      })]), h(kendo_vue_form_1.FieldWrapper, _this.v3 ? function () {
+        return [h(kendo_vue_form_1.Field, {
+          name: _this.ks.fields.description,
+          attrs: _this.v3 ? undefined : {
+            name: _this.ks.fields.description,
+            component: descriptionLabel
+          },
+          component: descriptionLabel,
+          "class": 'k-form-label'
+        }, _this.v3 ? function () {
+          return [localization.toLanguageString(main_1.editorEventDescription, main_1.messages[main_1.editorEventDescription])];
+        } : [localization.toLanguageString(main_1.editorEventDescription, main_1.messages[main_1.editorEventDescription])]), h("div", {
+          "class": "k-form-field-wrap"
+        }, [h(kendo_vue_form_1.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'
+        }), _this.kendoForm.errors[_this.ks.fields.description] && h(kendo_vue_form_1.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]])])];
+      } : [h(kendo_vue_form_1.Field, {
         name: _this.ks.fields.description,
         attrs: _this.v3 ? undefined : {
           name: _this.ks.fields.description,
           component: descriptionLabel
         },
-        component: descriptionLabel
+        component: descriptionLabel,
+        "class": 'k-form-label'
       }, _this.v3 ? function () {
         return [localization.toLanguageString(main_1.editorEventDescription, main_1.messages[main_1.editorEventDescription])];
       } : [localization.toLanguageString(main_1.editorEventDescription, main_1.messages[main_1.editorEventDescription])]), h("div", {
@@ -991,10 +1651,7 @@ var SchedulerFormEditorVue2 = {
         },
         name: _this.ks.fields.description,
         rows: 1,
-        id: 'k-event-description',
-        style: {
-          width: '100%'
-        }
+        id: 'k-event-description'
       }), _this.kendoForm.errors[_this.ks.fields.description] && h(kendo_vue_form_1.Field, {
         name: _this.ks.fields.description,
         attrs: _this.v3 ? undefined : {
@@ -1006,22 +1663,65 @@ var SchedulerFormEditorVue2 = {
         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", {
+        return h(kendo_vue_form_1.FieldWrapper, {
           key: resource.field
-        }, [h("div", {
-          "class": "k-form-field"
-        }, [h(kendo_vue_form_1.Field, {
+        }, this.v3 ? function () {
+          return [h(kendo_vue_form_1.Field, {
+            name: resource.field,
+            attrs: _this2.v3 ? undefined : {
+              name: resource.field,
+              component: resourceLabel
+            },
+            component: resourceLabel,
+            "class": 'k-form-label'
+          }), h(kendo_vue_labels_1.Label, {
+            "class": 'k-form-label'
+          }, _this2.v3 ? function () {
+            return [resource.name];
+          } : [resource.name]), h(kendo_vue_form_1.Field, {
+            name: resource.field,
+            attrs: _this2.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
+          }), _this2.kendoForm.errors[resource.field] && h(kendo_vue_form_1.Field, {
+            name: resource.field,
+            attrs: _this2.v3 ? undefined : {
+              name: resource.field,
+              component: kendo_vue_labels_1.Error
+            },
+            component: kendo_vue_labels_1.Error
+          }, _this2.v3 ? function () {
+            return [_this2.kendoForm.errors[resource.field]];
+          } : [_this2.kendoForm.errors[resource.field]])];
+        } : [h(kendo_vue_form_1.Field, {
           name: resource.field,
-          attrs: this.v3 ? undefined : {
+          attrs: _this2.v3 ? undefined : {
             name: resource.field,
             component: resourceLabel
           },
-          component: resourceLabel
-        }), h(kendo_vue_labels_1.Label, this.v3 ? function () {
+          component: resourceLabel,
+          "class": 'k-form-label'
+        }), h(kendo_vue_labels_1.Label, {
+          "class": 'k-form-label'
+        }, _this2.v3 ? function () {
           return [resource.name];
         } : [resource.name]), h(kendo_vue_form_1.Field, {
           name: resource.field,
-          attrs: this.v3 ? undefined : {
+          attrs: _this2.v3 ? undefined : {
             name: resource.field,
             component: resourceEditor,
             resource: resource,
@@ -1038,16 +1738,16 @@ var SchedulerFormEditorVue2 = {
           textField: resource.textField,
           valueField: resource.valueField,
           colorField: resource.colorField
-        }), this.kendoForm.errors[resource.field] && h(kendo_vue_form_1.Field, {
+        }), _this2.kendoForm.errors[resource.field] && h(kendo_vue_form_1.Field, {
           name: resource.field,
-          attrs: this.v3 ? undefined : {
+          attrs: _this2.v3 ? undefined : {
             name: resource.field,
             component: kendo_vue_labels_1.Error
           },
           component: kendo_vue_labels_1.Error
-        }, this.v3 ? function () {
+        }, _this2.v3 ? function () {
           return [_this2.kendoForm.errors[resource.field]];
-        } : [_this2.kendoForm.errors[resource.field]])])]);
+        } : [_this2.kendoForm.errors[resource.field]])]);
       }, _this), defaultSlots])
     );
   },