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

package/dist/es/editors/SchedulerFormEditor.js

@@ -13,11 +13,10 @@ import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
-var inject = allVue.inject;
 import { timezoneNames } from '@progress/kendo-date-math';
 import { Error, Label as KLabel } from '@progress/kendo-vue-labels';
 import { provideLocalizationService } from '@progress/kendo-vue-intl';
-import { Field, FormElement } from '@progress/kendo-vue-form';
+import { Field, FormElement, FieldWrapper } from '@progress/kendo-vue-form';
 import { Input as KInput, Checkbox, TextArea } from '@progress/kendo-vue-inputs';
 import { getListeners, templateRendering } from '@progress/kendo-vue-common';
 import { messages, editorEventTitle, editorEventStart, editorEventEnd, editorEventDescription, editorEventAllDay, editorEventTimeZone, editorEventSeparateTimeZones, editorEventStartTimeZone, editorEventEndTimeZone, editorValidationRequired } from '../messages/main';
@@ -287,11 +286,48 @@ var SchedulerFormEditorVue2 = {
       h(FormElement, {
         "class": 'k-scheduler-edit-form'
       }, this.v3 ? function () {
-        return [h("div", {
-          "class": "k-form-field"
-        }, [
+        return [
         // @ts-ignore function children
-        h(Field, {
+        h(FieldWrapper, _this.v3 ? function () {
+          return [
+          // @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(Field, {
           name: title,
           attrs: _this.v3 ? undefined : {
             name: title,
@@ -315,9 +351,7 @@ var SchedulerFormEditorVue2 = {
           name: title,
           field: title,
           component: titleEditor
-        }), _this.kendoForm.errors[title] &&
-        // @ts-ignore function children
-        h(Field, {
+        }), _this.kendoForm.errors[title] && h(Field, {
           name: title,
           attrs: _this.v3 ? undefined : {
             name: title,
@@ -326,11 +360,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(Field, {
+        h(FieldWrapper, _this.v3 ? function () {
+          return [
+          // @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",
+            "class": 'k-form-label'
+          }, _this.v3 ? function () {
+            return [localization.toLanguageString(editorEventStart, messages[editorEventStart])];
+          } : [localization.toLanguageString(editorEventStart, messages[editorEventStart])]), h("div", {
+            "class": "k-form-field-wrap"
+          }, [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]])])];
+        } : [h(Field, {
           name: _this.ks.fields.start,
           attrs: _this.v3 ? undefined : {
             name: _this.ks.fields.start,
@@ -338,15 +414,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(editorEventStart, messages[editorEventStart])];
         } : [localization.toLanguageString(editorEventStart, messages[editorEventStart])]), h("div", {
-          "class": "k-form-field-wrap",
-          style: {
-            display: 'flex'
-          }
-        }, [h("div", [h(Field, {
+          "class": "k-form-field-wrap"
+        }, [h(Field, {
           id: "k-scheduler-editor-start",
           attrs: _this.v3 ? undefined : {
             id: "k-scheduler-editor-start",
@@ -361,9 +435,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(Field, {
+        }), _this.kendoForm.errors[_this.ks.fields.start] && h(Field, {
           name: _this.ks.fields.start,
           attrs: _this.v3 ? undefined : {
             name: _this.ks.fields.start,
@@ -372,7 +444,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(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(editorEventTimeZone, messages[editorEventTimeZone])];
+          } : [localization.toLanguageString(editorEventTimeZone, messages[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',
@@ -383,9 +483,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 : {
@@ -396,11 +494,48 @@ var SchedulerFormEditorVue2 = {
           }
         }, _this.v3 ? function () {
           return [localization.toLanguageString(editorEventTimeZone, messages[editorEventTimeZone])];
-        } : [localization.toLanguageString(editorEventTimeZone, messages[editorEventTimeZone])])])])]), _this.startZoneChecked && h("div", {
-          "class": "k-form-field"
-        }, [
+        } : [localization.toLanguageString(editorEventTimeZone, messages[editorEventTimeZone])])])]), _this.startZoneChecked &&
         // @ts-ignore function children
-        h(Field, {
+        h(FieldWrapper, _this.v3 ? function () {
+          return [
+          // @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(Field, {
           name: _this.ks.fields.start,
           attrs: _this.v3 ? undefined : {
             name: _this.ks.fields.start,
@@ -424,9 +559,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(Field, {
+        }), _this.kendoForm.errors[_this.ks.fields.startTimezone] && h(Field, {
           name: _this.ks.fields.startTimezone,
           attrs: _this.v3 ? undefined : {
             name: _this.ks.fields.startTimezone,
@@ -435,11 +568,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(Field, {
+        h(FieldWrapper, _this.v3 ? function () {
+          return [
+          // @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",
+            "class": 'k-form-label'
+          }, _this.v3 ? function () {
+            return [localization.toLanguageString(editorEventEnd, messages[editorEventEnd])];
+          } : [localization.toLanguageString(editorEventEnd, messages[editorEventEnd])]), h("div", {
+            "class": "k-form-field-wrap"
+          }, [h(Field, {
+            id: "k-scheduler-editor-end",
+            attrs: _this.v3 ? undefined : {
+              id: "k-scheduler-editor-end",
+              name: _this.ks.fields.end,
+              width: "auto",
+              component: endEditor,
+              isAllDay: !!_this.kendoForm.values.isAllDay,
+              timezone: _this.ks.timezone
+            },
+            name: _this.ks.fields.end,
+            width: "auto",
+            component: endEditor,
+            isAllDay: !!_this.kendoForm.values.isAllDay,
+            timezone: _this.ks.timezone
+          }), _this.kendoForm.errors[_this.ks.fields.end] &&
+          // @ts-ignore function children
+          h(Field, {
+            name: _this.ks.fields.end,
+            attrs: _this.v3 ? undefined : {
+              name: _this.ks.fields.end,
+              component: endError
+            },
+            component: endError
+          }, _this.v3 ? function () {
+            return [_this.kendoForm.errors[_this.ks.fields.end]];
+          } : [_this.kendoForm.errors[_this.ks.fields.end]])])];
+        } : [h(Field, {
           name: _this.ks.fields.end,
           attrs: _this.v3 ? undefined : {
             name: _this.ks.fields.end,
@@ -447,15 +622,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(editorEventEnd, messages[editorEventEnd])];
         } : [localization.toLanguageString(editorEventEnd, messages[editorEventEnd])]), h("div", {
-          "class": "k-form-field-wrap",
-          style: {
-            display: 'flex'
-          }
-        }, [h("div", [h(Field, {
+          "class": "k-form-field-wrap"
+        }, [h(Field, {
           id: "k-scheduler-editor-end",
           attrs: _this.v3 ? undefined : {
             id: "k-scheduler-editor-end",
@@ -470,9 +643,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(Field, {
+        }), _this.kendoForm.errors[_this.ks.fields.end] && h(Field, {
           name: _this.ks.fields.end,
           attrs: _this.v3 ? undefined : {
             name: _this.ks.fields.end,
@@ -481,7 +652,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(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(editorEventSeparateTimeZones, messages[editorEventSeparateTimeZones])];
+          } : [localization.toLanguageString(editorEventSeparateTimeZones, messages[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',
@@ -492,9 +701,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 : {
@@ -505,17 +712,56 @@ var SchedulerFormEditorVue2 = {
           }
         }, _this.v3 ? function () {
           return [localization.toLanguageString(editorEventSeparateTimeZones, messages[editorEventSeparateTimeZones])];
-        } : [localization.toLanguageString(editorEventSeparateTimeZones, messages[editorEventSeparateTimeZones])])]])])]), _this.endZoneChecked && h("div", {
-          "class": "k-form-field"
-        }, [
+        } : [localization.toLanguageString(editorEventSeparateTimeZones, messages[editorEventSeparateTimeZones])])]), _this.endZoneChecked &&
         // @ts-ignore function children
-        h(Field, {
+        h(FieldWrapper, _this.v3 ? function () {
+          return [
+          // @ts-ignore function children
+          h(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(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(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(editorEventEndTimeZone, messages[editorEventEndTimeZone])];
         } : [localization.toLanguageString(editorEventEndTimeZone, messages[editorEventEndTimeZone])]), h("div", {
@@ -533,9 +779,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(Field, {
+        }), _this.kendoForm.errors[_this.ks.fields.endTimezone] && h(Field, {
           name: _this.ks.fields.endTimezone,
           attrs: _this.v3 ? undefined : {
             name: _this.ks.fields.endTimezone,
@@ -544,15 +788,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(Field, {
+        } : [_this.kendoForm.errors[_this.ks.fields.endTimezone]])])]),
+        // @ts-ignore function children
+        h(FieldWrapper, _this.v3 ? function () {
+          return [h(Field, {
+            name: _this.ks.fields.isAllDay,
+            attrs: _this.v3 ? undefined : {
+              name: _this.ks.fields.isAllDay,
+              component: KLabel
+            },
+            component: KLabel,
+            "class": 'k-form-label'
+          }), h("div", {
+            "class": "k-form-field-wrap"
+          }, [h(Field, {
+            id: 'k-is-allday-checkbox',
+            attrs: _this.v3 ? undefined : {
+              id: 'k-is-allday-checkbox',
+              name: _this.ks.fields.isAllDay,
+              component: allDayEditor
+            },
+            name: _this.ks.fields.isAllDay,
+            component: allDayEditor
+          }),
+          // @ts-ignore function children
+          h(Field, {
+            name: _this.ks.fields.isAllDay,
+            attrs: _this.v3 ? undefined : {
+              name: _this.ks.fields.isAllDay,
+              field: _this.ks.fields.isAllDay,
+              editorId: 'k-is-allday-checkbox',
+              component: allDayLabel
+            },
+            field: _this.ks.fields.isAllDay,
+            editorId: 'k-is-allday-checkbox',
+            "class": 'k-checkbox-label',
+            component: allDayLabel
+          }, _this.v3 ? function () {
+            return [localization.toLanguageString(editorEventAllDay, messages[editorEventAllDay])];
+          } : [localization.toLanguageString(editorEventAllDay, messages[editorEventAllDay])])])];
+        } : [h(Field, {
           name: _this.ks.fields.isAllDay,
           attrs: _this.v3 ? undefined : {
             name: _this.ks.fields.isAllDay,
             component: KLabel
           },
-          component: KLabel
+          component: KLabel,
+          "class": 'k-form-label'
         }), h("div", {
           "class": "k-form-field-wrap"
         }, [h(Field, {
@@ -564,9 +846,7 @@ var SchedulerFormEditorVue2 = {
           },
           name: _this.ks.fields.isAllDay,
           component: allDayEditor
-        }),
-        // @ts-ignore function children
-        h(Field, {
+        }), h(Field, {
           name: _this.ks.fields.isAllDay,
           attrs: _this.v3 ? undefined : {
             name: _this.ks.fields.isAllDay,
@@ -580,7 +860,9 @@ var SchedulerFormEditorVue2 = {
           component: allDayLabel
         }, _this.v3 ? function () {
           return [localization.toLanguageString(editorEventAllDay, messages[editorEventAllDay])];
-        } : [localization.toLanguageString(editorEventAllDay, messages[editorEventAllDay])])])]), h(Field, {
+        } : [localization.toLanguageString(editorEventAllDay, messages[editorEventAllDay])])])]), h("div", {
+          "class": "k-recurrence-editor"
+        }, [h(Field, {
           component: recurrenceEditor,
           attrs: _this.v3 ? undefined : {
             component: recurrenceEditor,
@@ -593,17 +875,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(Field, {
+        h(FieldWrapper, _this.v3 ? function () {
+          return [
+          // @ts-ignore function children
+          h(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(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'
+          }), _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]])])];
+        } : [h(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(editorEventDescription, messages[editorEventDescription])];
         } : [localization.toLanguageString(editorEventDescription, messages[editorEventDescription])]), h("div", {
@@ -618,13 +937,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(Field, {
+          id: 'k-event-description'
+        }), _this.kendoForm.errors[_this.ks.fields.description] && h(Field, {
           name: _this.ks.fields.description,
           attrs: _this.v3 ? undefined : {
             name: _this.ks.fields.description,
@@ -635,25 +949,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(Field, {
-            name: resource.field,
-            attrs: this.v3 ? undefined : {
+          return (
+            // @ts-ignore function children
+            h(FieldWrapper, {
+              key: resource.field
+            }, this.v3 ? function () {
+              return [h(Field, {
+                name: resource.field,
+                attrs: _this2.v3 ? undefined : {
+                  name: resource.field,
+                  component: resourceLabel
+                },
+                component: resourceLabel,
+                "class": 'k-form-label'
+              }),
+              // @ts-ignore function children
+              h(KLabel, {
+                "class": 'k-form-label'
+              }, _this2.v3 ? function () {
+                return [resource.name];
+              } : [resource.name]), h(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(Field, {
+                name: resource.field,
+                attrs: _this2.v3 ? undefined : {
+                  name: resource.field,
+                  component: Error
+                },
+                component: Error
+              }, _this2.v3 ? function () {
+                return [_this2.kendoForm.errors[resource.field]];
+              } : [_this2.kendoForm.errors[resource.field]])];
+            } : [h(Field, {
               name: resource.field,
-              component: resourceLabel
-            },
-            component: resourceLabel
-          }),
-          // @ts-ignore function children
-          h(KLabel, this.v3 ? function () {
-            return [resource.name];
-          } : [resource.name]), h(Field, {
-            name: resource.field,
-            attrs: this.v3 ? undefined : {
+              attrs: _this2.v3 ? undefined : {
+                name: resource.field,
+                component: resourceLabel
+              },
+              component: resourceLabel,
+              "class": 'k-form-label'
+            }), h(KLabel, {
+              "class": 'k-form-label'
+            }, _this2.v3 ? function () {
+              return [resource.name];
+            } : [resource.name]), h(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,
@@ -661,30 +1030,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(Field, {
-            name: resource.field,
-            attrs: this.v3 ? undefined : {
+            }), _this2.kendoForm.errors[resource.field] && h(Field, {
               name: resource.field,
+              attrs: _this2.v3 ? undefined : {
+                name: resource.field,
+                component: Error
+              },
               component: Error
-            },
-            component: 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(Field, {
+      } : [h(FieldWrapper, _this.v3 ? function () {
+        return [h(Field, {
+          name: title,
+          attrs: _this.v3 ? undefined : {
+            name: title,
+            component: titleLabel,
+            editorId: 'k-scheduler-editor-title'
+          },
+          component: titleLabel,
+          editorId: 'k-scheduler-editor-title'
+        }, _this.v3 ? function () {
+          return [localization.toLanguageString(editorEventTitle, messages[editorEventTitle])];
+        } : [localization.toLanguageString(editorEventTitle, messages[editorEventTitle])]), h("div", {
+          "class": "k-form-field-wrap"
+        }, [h(Field, {
+          id: "k-scheduler-editor-title",
+          attrs: _this.v3 ? undefined : {
+            id: "k-scheduler-editor-title",
+            name: title,
+            field: title,
+            component: titleEditor
+          },
+          name: title,
+          field: title,
+          component: titleEditor
+        }), _this.kendoForm.errors[title] && h(Field, {
+          name: title,
+          attrs: _this.v3 ? undefined : {
+            name: title,
+            component: titleError
+          },
+          component: titleError
+        }, _this.v3 ? function () {
+          return [_this.kendoForm.errors[title]];
+        } : [_this.kendoForm.errors[title]])])];
+      } : [h(Field, {
         name: title,
         attrs: _this.v3 ? undefined : {
           name: title,
@@ -717,9 +1110,47 @@ var SchedulerFormEditorVue2 = {
         component: titleError
       }, _this.v3 ? function () {
         return [_this.kendoForm.errors[title]];
-      } : [_this.kendoForm.errors[title]])])]), h("div", {
-        "class": "k-form-field"
-      }, [h(Field, {
+      } : [_this.kendoForm.errors[title]])])]), h(FieldWrapper, _this.v3 ? function () {
+        return [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",
+          "class": 'k-form-label'
+        }, _this.v3 ? function () {
+          return [localization.toLanguageString(editorEventStart, messages[editorEventStart])];
+        } : [localization.toLanguageString(editorEventStart, messages[editorEventStart])]), h("div", {
+          "class": "k-form-field-wrap"
+        }, [h(Field, {
+          id: "k-scheduler-editor-start",
+          attrs: _this.v3 ? undefined : {
+            id: "k-scheduler-editor-start",
+            name: _this.ks.fields.start,
+            width: "auto",
+            component: startEditor,
+            isAllDay: !!_this.kendoForm.values.isAllDay,
+            timezone: _this.ks.timezone
+          },
+          name: _this.ks.fields.start,
+          width: "auto",
+          component: startEditor,
+          isAllDay: !!_this.kendoForm.values.isAllDay,
+          timezone: _this.ks.timezone
+        }), _this.kendoForm.errors[_this.ks.fields.start] && h(Field, {
+          name: _this.ks.fields.start,
+          attrs: _this.v3 ? undefined : {
+            name: _this.ks.fields.start,
+            component: startError
+          },
+          component: startError
+        }, _this.v3 ? function () {
+          return [_this.kendoForm.errors[_this.ks.fields.start]];
+        } : [_this.kendoForm.errors[_this.ks.fields.start]])])];
+      } : [h(Field, {
         name: _this.ks.fields.start,
         attrs: _this.v3 ? undefined : {
           name: _this.ks.fields.start,
@@ -727,15 +1158,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(editorEventStart, messages[editorEventStart])];
       } : [localization.toLanguageString(editorEventStart, messages[editorEventStart])]), h("div", {
-        "class": "k-form-field-wrap",
-        style: {
-          display: 'flex'
-        }
-      }, [h("div", [h(Field, {
+        "class": "k-form-field-wrap"
+      }, [h(Field, {
         id: "k-scheduler-editor-start",
         attrs: _this.v3 ? undefined : {
           id: "k-scheduler-editor-start",
@@ -759,7 +1188,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(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(editorEventTimeZone, messages[editorEventTimeZone])];
+        } : [localization.toLanguageString(editorEventTimeZone, messages[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',
@@ -781,9 +1234,42 @@ var SchedulerFormEditorVue2 = {
         }
       }, _this.v3 ? function () {
         return [localization.toLanguageString(editorEventTimeZone, messages[editorEventTimeZone])];
-      } : [localization.toLanguageString(editorEventTimeZone, messages[editorEventTimeZone])])])])]), _this.startZoneChecked && h("div", {
-        "class": "k-form-field"
-      }, [h(Field, {
+      } : [localization.toLanguageString(editorEventTimeZone, messages[editorEventTimeZone])])])]), _this.startZoneChecked && h(FieldWrapper, _this.v3 ? function () {
+        return [h(Field, {
+          name: _this.ks.fields.start,
+          attrs: _this.v3 ? undefined : {
+            name: _this.ks.fields.start,
+            component: startTimezoneLabel
+          },
+          component: startTimezoneLabel
+        }, _this.v3 ? function () {
+          return [localization.toLanguageString(editorEventStartTimeZone, messages[editorEventStartTimeZone])];
+        } : [localization.toLanguageString(editorEventStartTimeZone, messages[editorEventStartTimeZone])]), h("div", {
+          "class": "k-form-field-wrap"
+        }, [h(Field, {
+          component: startTimezoneEditor,
+          attrs: _this.v3 ? undefined : {
+            component: startTimezoneEditor,
+            value: startTimezone,
+            validator: _this.startTimezoneValidator,
+            dataItems: timezones,
+            name: _this.ks.fields.startTimezone
+          },
+          value: startTimezone,
+          validator: _this.startTimezoneValidator,
+          dataItems: timezones,
+          name: _this.ks.fields.startTimezone
+        }), _this.kendoForm.errors[_this.ks.fields.startTimezone] && h(Field, {
+          name: _this.ks.fields.startTimezone,
+          attrs: _this.v3 ? undefined : {
+            name: _this.ks.fields.startTimezone,
+            component: startTimezoneError
+          },
+          component: startTimezoneError
+        }, _this.v3 ? function () {
+          return [_this.kendoForm.errors[_this.ks.fields.startTimezone]];
+        } : [_this.kendoForm.errors[_this.ks.fields.startTimezone]])])];
+      } : [h(Field, {
         name: _this.ks.fields.start,
         attrs: _this.v3 ? undefined : {
           name: _this.ks.fields.start,
@@ -816,9 +1302,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(Field, {
+      } : [_this.kendoForm.errors[_this.ks.fields.startTimezone]])])]), h(FieldWrapper, _this.v3 ? function () {
+        return [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",
+          "class": 'k-form-label'
+        }, _this.v3 ? function () {
+          return [localization.toLanguageString(editorEventEnd, messages[editorEventEnd])];
+        } : [localization.toLanguageString(editorEventEnd, messages[editorEventEnd])]), h("div", {
+          "class": "k-form-field-wrap"
+        }, [h(Field, {
+          id: "k-scheduler-editor-end",
+          attrs: _this.v3 ? undefined : {
+            id: "k-scheduler-editor-end",
+            name: _this.ks.fields.end,
+            width: "auto",
+            component: endEditor,
+            isAllDay: !!_this.kendoForm.values.isAllDay,
+            timezone: _this.ks.timezone
+          },
+          name: _this.ks.fields.end,
+          width: "auto",
+          component: endEditor,
+          isAllDay: !!_this.kendoForm.values.isAllDay,
+          timezone: _this.ks.timezone
+        }), _this.kendoForm.errors[_this.ks.fields.end] && h(Field, {
+          name: _this.ks.fields.end,
+          attrs: _this.v3 ? undefined : {
+            name: _this.ks.fields.end,
+            component: endError
+          },
+          component: endError
+        }, _this.v3 ? function () {
+          return [_this.kendoForm.errors[_this.ks.fields.end]];
+        } : [_this.kendoForm.errors[_this.ks.fields.end]])])];
+      } : [h(Field, {
         name: _this.ks.fields.end,
         attrs: _this.v3 ? undefined : {
           name: _this.ks.fields.end,
@@ -826,15 +1350,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(editorEventEnd, messages[editorEventEnd])];
       } : [localization.toLanguageString(editorEventEnd, messages[editorEventEnd])]), h("div", {
-        "class": "k-form-field-wrap",
-        style: {
-          display: 'flex'
-        }
-      }, [h("div", [h(Field, {
+        "class": "k-form-field-wrap"
+      }, [h(Field, {
         id: "k-scheduler-editor-end",
         attrs: _this.v3 ? undefined : {
           id: "k-scheduler-editor-end",
@@ -858,7 +1380,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(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(editorEventSeparateTimeZones, messages[editorEventSeparateTimeZones])];
+        } : [localization.toLanguageString(editorEventSeparateTimeZones, messages[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',
@@ -869,7 +1425,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 : {
@@ -880,15 +1436,50 @@ var SchedulerFormEditorVue2 = {
         }
       }, _this.v3 ? function () {
         return [localization.toLanguageString(editorEventSeparateTimeZones, messages[editorEventSeparateTimeZones])];
-      } : [localization.toLanguageString(editorEventSeparateTimeZones, messages[editorEventSeparateTimeZones])])]])])]), _this.endZoneChecked && h("div", {
-        "class": "k-form-field"
-      }, [h(Field, {
+      } : [localization.toLanguageString(editorEventSeparateTimeZones, messages[editorEventSeparateTimeZones])])]), _this.endZoneChecked && h(FieldWrapper, _this.v3 ? function () {
+        return [h(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(editorEventEndTimeZone, messages[editorEventEndTimeZone])];
+        } : [localization.toLanguageString(editorEventEndTimeZone, messages[editorEventEndTimeZone])]), h("div", {
+          "class": "k-form-field-wrap"
+        }, [h(Field, {
+          value: endTimezone,
+          attrs: _this.v3 ? undefined : {
+            value: endTimezone,
+            dataItems: timezones,
+            validator: _this.endTimezoneValidator,
+            component: endTimezoneEditor,
+            name: _this.ks.fields.endTimezone
+          },
+          dataItems: timezones,
+          validator: _this.endTimezoneValidator,
+          component: endTimezoneEditor,
+          name: _this.ks.fields.endTimezone
+        }), _this.kendoForm.errors[_this.ks.fields.endTimezone] && h(Field, {
+          name: _this.ks.fields.endTimezone,
+          attrs: _this.v3 ? undefined : {
+            name: _this.ks.fields.endTimezone,
+            component: endTimezoneError
+          },
+          component: endTimezoneError
+        }, _this.v3 ? function () {
+          return [_this.kendoForm.errors[_this.ks.fields.endTimezone]];
+        } : [_this.kendoForm.errors[_this.ks.fields.endTimezone]])])];
+      } : [h(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(editorEventEndTimeZone, messages[editorEventEndTimeZone])];
       } : [localization.toLanguageString(editorEventEndTimeZone, messages[editorEventEndTimeZone])]), h("div", {
@@ -915,15 +1506,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(Field, {
+      } : [_this.kendoForm.errors[_this.ks.fields.endTimezone]])])]), h(FieldWrapper, _this.v3 ? function () {
+        return [h(Field, {
+          name: _this.ks.fields.isAllDay,
+          attrs: _this.v3 ? undefined : {
+            name: _this.ks.fields.isAllDay,
+            component: KLabel
+          },
+          component: KLabel,
+          "class": 'k-form-label'
+        }), h("div", {
+          "class": "k-form-field-wrap"
+        }, [h(Field, {
+          id: 'k-is-allday-checkbox',
+          attrs: _this.v3 ? undefined : {
+            id: 'k-is-allday-checkbox',
+            name: _this.ks.fields.isAllDay,
+            component: allDayEditor
+          },
+          name: _this.ks.fields.isAllDay,
+          component: allDayEditor
+        }), h(Field, {
+          name: _this.ks.fields.isAllDay,
+          attrs: _this.v3 ? undefined : {
+            name: _this.ks.fields.isAllDay,
+            field: _this.ks.fields.isAllDay,
+            editorId: 'k-is-allday-checkbox',
+            component: allDayLabel
+          },
+          field: _this.ks.fields.isAllDay,
+          editorId: 'k-is-allday-checkbox',
+          "class": 'k-checkbox-label',
+          component: allDayLabel
+        }, _this.v3 ? function () {
+          return [localization.toLanguageString(editorEventAllDay, messages[editorEventAllDay])];
+        } : [localization.toLanguageString(editorEventAllDay, messages[editorEventAllDay])])])];
+      } : [h(Field, {
         name: _this.ks.fields.isAllDay,
         attrs: _this.v3 ? undefined : {
           name: _this.ks.fields.isAllDay,
           component: KLabel
         },
-        component: KLabel
+        component: KLabel,
+        "class": 'k-form-label'
       }), h("div", {
         "class": "k-form-field-wrap"
       }, [h(Field, {
@@ -949,7 +1574,9 @@ var SchedulerFormEditorVue2 = {
         component: allDayLabel
       }, _this.v3 ? function () {
         return [localization.toLanguageString(editorEventAllDay, messages[editorEventAllDay])];
-      } : [localization.toLanguageString(editorEventAllDay, messages[editorEventAllDay])])])]), h(Field, {
+      } : [localization.toLanguageString(editorEventAllDay, messages[editorEventAllDay])])])]), h("div", {
+        "class": "k-recurrence-editor"
+      }, [h(Field, {
         component: recurrenceEditor,
         attrs: _this.v3 ? undefined : {
           component: recurrenceEditor,
@@ -962,15 +1589,48 @@ var SchedulerFormEditorVue2 = {
         field: _this.ks.fields.recurrenceRule,
         name: _this.ks.fields.recurrenceRule,
         start: start
-      }), h("div", {
-        "class": "k-form-field"
-      }, [h(Field, {
+      })]), h(FieldWrapper, _this.v3 ? function () {
+        return [h(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(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'
+        }), _this.kendoForm.errors[_this.ks.fields.description] && h(Field, {
+          name: _this.ks.fields.description,
+          attrs: _this.v3 ? undefined : {
+            name: _this.ks.fields.description,
+            component: descriptionError
+          },
+          component: descriptionError
+        }, _this.v3 ? function () {
+          return [_this.kendoForm.errors[_this.ks.fields.description]];
+        } : [_this.kendoForm.errors[_this.ks.fields.description]])])];
+      } : [h(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(editorEventDescription, messages[editorEventDescription])];
       } : [localization.toLanguageString(editorEventDescription, messages[editorEventDescription])]), h("div", {
@@ -985,10 +1645,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(Field, {
         name: _this.ks.fields.description,
         attrs: _this.v3 ? undefined : {
@@ -1000,22 +1657,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(FieldWrapper, {
           key: resource.field
-        }, [h("div", {
-          "class": "k-form-field"
-        }, [h(Field, {
+        }, this.v3 ? function () {
+          return [h(Field, {
+            name: resource.field,
+            attrs: _this2.v3 ? undefined : {
+              name: resource.field,
+              component: resourceLabel
+            },
+            component: resourceLabel,
+            "class": 'k-form-label'
+          }), h(KLabel, {
+            "class": 'k-form-label'
+          }, _this2.v3 ? function () {
+            return [resource.name];
+          } : [resource.name]), h(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(Field, {
+            name: resource.field,
+            attrs: _this2.v3 ? undefined : {
+              name: resource.field,
+              component: Error
+            },
+            component: Error
+          }, _this2.v3 ? function () {
+            return [_this2.kendoForm.errors[resource.field]];
+          } : [_this2.kendoForm.errors[resource.field]])];
+        } : [h(Field, {
           name: resource.field,
-          attrs: this.v3 ? undefined : {
+          attrs: _this2.v3 ? undefined : {
             name: resource.field,
             component: resourceLabel
           },
-          component: resourceLabel
-        }), h(KLabel, this.v3 ? function () {
+          component: resourceLabel,
+          "class": 'k-form-label'
+        }), h(KLabel, {
+          "class": 'k-form-label'
+        }, _this2.v3 ? function () {
           return [resource.name];
         } : [resource.name]), h(Field, {
           name: resource.field,
-          attrs: this.v3 ? undefined : {
+          attrs: _this2.v3 ? undefined : {
             name: resource.field,
             component: resourceEditor,
             resource: resource,
@@ -1032,16 +1732,16 @@ var SchedulerFormEditorVue2 = {
           textField: resource.textField,
           valueField: resource.valueField,
           colorField: resource.colorField
-        }), this.kendoForm.errors[resource.field] && h(Field, {
+        }), _this2.kendoForm.errors[resource.field] && h(Field, {
           name: resource.field,
-          attrs: this.v3 ? undefined : {
+          attrs: _this2.v3 ? undefined : {
             name: resource.field,
             component: Error
           },
           component: 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])
     );
   },