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

package/dist/es/recurrence/RecurrenceEditor.js

@@ -83,8 +83,7 @@ var RecurrenceEditorVue2 = {
   data: function data() {
     return {
       defaultCount: 1,
-      defaultUntil: ZonedDate.fromUTCDate(this.$props.start),
-      localizeMessage: ''
+      defaultUntil: ZonedDate.fromUTCDate(this.$props.start)
     };
   },
   // @ts-ignore
@@ -96,26 +95,266 @@ var RecurrenceEditorVue2 = {
   },
   // @ts-ignore
   render: function render(createElement) {
+    var _this2 = this;
+
     var h = gh || createElement;
-    var intl = provideIntlService(this);
-    var localization = provideLocalizationService(this);
+    var that = this;
+    this.intl = provideIntlService(this);
+    this.localization = provideLocalizationService(this);
     var timezone = this.ks.timezone;
+    var itemStyle = {
+      display: 'flex',
+      alignItems: 'center',
+      minHeight: 30
+    };
 
-    var RadioGroupListItem = function RadioGroupListItem(props) {
-      return h("li", {
-        //  {...props}
+    var monthlyWeekDay = function monthlyWeekDay() {
+      return [h(DropDownList, {
+        key: "weekday-offset",
+        textField: "text",
+        attrs: this.v3 ? undefined : {
+          textField: "text",
+          dataItemKey: "value",
+          disabled: this.repeatOnRule !== 'weekday',
+          dataItems: this.offsets,
+          value: this.offset
+        },
+        dataItemKey: "value",
+        disabled: this.repeatOnRule !== 'weekday',
+        dataItems: this.offsets,
+        value: this.offset,
+        onChange: this.handleOffsetChange,
+        on: this.v3 ? undefined : {
+          "change": this.handleOffsetChange
+        },
         style: {
-          display: 'flex',
-          alignItems: 'center',
-          minHeight: 30
+          width: 'auto'
+        }
+      }), h(DropDownList, {
+        key: "weekday-value",
+        disabled: this.repeatOnRule !== 'weekday',
+        attrs: this.v3 ? undefined : {
+          disabled: this.repeatOnRule !== 'weekday',
+          value: this.weekDay,
+          dataItem: this.extendedWeekDays,
+          textField: "text",
+          dataItemKey: "value"
+        },
+        value: this.weekDay,
+        dataItem: this.extendedWeekDays,
+        onChange: this.handleWeekDayChange,
+        on: this.v3 ? undefined : {
+          "change": this.handleWeekDayChange
+        },
+        textField: "text",
+        dataItemKey: "value",
+        style: {
+          width: 'auto'
+        }
+      })];
+    };
+
+    var monthlyMonthDay = function monthlyMonthDay() {
+      return h(NumericTextBox, {
+        key: 'weekday-day',
+        min: 1,
+        attrs: this.v3 ? undefined : {
+          min: 1,
+          max: 31,
+          disabled: this.repeatOnRule !== 'monthday',
+          value: this.rrule && this.rrule.byMonthDay && this.rrule.byMonthDay[0],
+          width: 'auto'
+        },
+        max: 31,
+        disabled: this.repeatOnRule !== 'monthday',
+        value: this.rrule && this.rrule.byMonthDay && this.rrule.byMonthDay[0],
+        onChange: this.handleMonthDayChange,
+        on: this.v3 ? undefined : {
+          "change": this.handleMonthDayChange
+        },
+        width: 'auto'
+      });
+    };
+
+    var yearlyMonthDay = function yearlyMonthDay() {
+      return [h(DropDownList, {
+        key: "monthday-month",
+        disabled: this.repeatOnRule !== 'monthday',
+        attrs: this.v3 ? undefined : {
+          disabled: this.repeatOnRule !== 'monthday',
+          value: this.month,
+          dataItems: this.months,
+          textField: "text",
+          dataItemKey: "value"
+        },
+        value: this.month,
+        dataItems: this.months,
+        textField: "text",
+        dataItemKey: "value",
+        onChange: this.handleMonthChange,
+        on: this.v3 ? undefined : {
+          "change": this.handleMonthChange
+        },
+        style: {
+          width: 'auto'
+        }
+      }), h(NumericTextBox, {
+        key: "monthday-day",
+        min: 1,
+        attrs: this.v3 ? undefined : {
+          min: 1,
+          max: 31,
+          disabled: this.repeatOnRule !== 'monthday',
+          value: this.monthDay
+        },
+        max: 31,
+        disabled: this.repeatOnRule !== 'monthday',
+        value: this.monthDay,
+        onChange: this.handleMonthDayChange,
+        on: this.v3 ? undefined : {
+          "change": this.handleMonthDayChange
+        },
+        style: {
+          width: 'auto'
         }
-      }, [props.children]);
+      })];
+    };
+
+    var yearlyWeekDay = function yearlyWeekDay() {
+      return [h(DropDownList, {
+        key: "yearly-weekday-offset",
+        textField: "text",
+        attrs: this.v3 ? undefined : {
+          textField: "text",
+          dataItemKey: "value",
+          disabled: this.repeatOnRule !== 'weekday',
+          dataItems: this.offsets,
+          value: this.offset
+        },
+        dataItemKey: "value",
+        disabled: this.repeatOnRule !== 'weekday',
+        dataItems: this.offsets,
+        value: this.offset,
+        onChange: this.handleOffsetChange,
+        on: this.v3 ? undefined : {
+          "change": this.handleOffsetChange
+        },
+        style: {
+          width: 'auto'
+        }
+      }), h(DropDownList, {
+        key: "yearly-weekday-day",
+        textField: "text",
+        attrs: this.v3 ? undefined : {
+          textField: "text",
+          dataItemKey: "value",
+          disabled: this.repeatOnRule !== 'weekday',
+          value: this.weekDay,
+          dataItems: this.extendedWeekDays
+        },
+        dataItemKey: "value",
+        disabled: this.repeatOnRule !== 'weekday',
+        value: this.weekDay,
+        dataItems: this.extendedWeekDays,
+        onChange: this.handleWeekDayChange,
+        on: this.v3 ? undefined : {
+          "change": this.handleWeekDayChange
+        },
+        style: {
+          width: 'auto'
+        }
+      }), h("span", {
+        key: "yearly-weekday-of-label"
+      }, [this.localizeMessage(recurrenceEditorYearlyOf, true), "\xA0"]), h(DropDownList, {
+        key: "yearly-weekday-month",
+        textField: "text",
+        attrs: this.v3 ? undefined : {
+          textField: "text",
+          dataItemKey: "value",
+          disabled: this.repeatOnRule !== 'weekday',
+          value: this.month,
+          dataItems: this.months
+        },
+        dataItemKey: "value",
+        disabled: this.repeatOnRule !== 'weekday',
+        value: this.month,
+        dataItems: this.months,
+        onChange: this.handleMonthChange,
+        on: this.v3 ? undefined : {
+          "change": this.handleMonthChange
+        },
+        style: {
+          width: 'auto'
+        }
+      })];
+    };
+
+    var count = function count() {
+      var _this = this;
+
+      return [h(NumericTextBox, {
+        key: "endrule-after-editor",
+        id: "k-endrule-after",
+        attrs: this.v3 ? undefined : {
+          id: "k-endrule-after",
+          min: 1,
+          width: '70px',
+          value: this.endRule === 'count' ? this.rrule.count : this.defaultCount,
+          disabled: this.endRule !== 'count'
+        },
+        min: 1,
+        width: '70px',
+        value: this.endRule === 'count' ? this.rrule.count : this.defaultCount,
+        onChange: this.handleCountChange,
+        on: this.v3 ? undefined : {
+          "change": this.handleCountChange
+        },
+        disabled: this.endRule !== 'count'
+      }), // @ts-ignore function children
+      h(Label, {
+        key: "endrule-after-label",
+        "class": 'k-radio-label',
+        editorId: 'k-endrule-after',
+        attrs: this.v3 ? undefined : {
+          editorId: 'k-endrule-after'
+        }
+      }, this.v3 ? function () {
+        return [_this.localizeMessage(recurrenceEditorEndOccurrence, true)];
+      } : [_this.localizeMessage(recurrenceEditorEndOccurrence, true)])];
+    };
+
+    var dpUntil = function dpUntil() {
+      return (// @ts-ignore 
+        h(DatePicker, {
+          key: "k-endrule-until-editor",
+          id: "k-endrule-until",
+          attrs: this.v3 ? undefined : {
+            id: "k-endrule-until",
+            disabled: that.endRule !== 'until',
+            min: that.$props.start,
+            value: that.endRule === 'until' ? that.until : toLocalDate(that.defaultUntil)
+          },
+          disabled: that.endRule !== 'until',
+          min: that.$props.start,
+          value: that.endRule === 'until' ? that.until : toLocalDate(that.defaultUntil),
+          onChange: that.handleUntilChange,
+          on: this.v3 ? undefined : {
+            "change": that.handleUntilChange
+          },
+          style: {
+            width: 'auto'
+          }
+        })
+      );
     };
 
     return (// fragment
       h("div", [h("div", {
         "class": "k-form-field"
-      }, [h(Label, [localization.toLanguageString(recurrenceEditorRepeat, messages[recurrenceEditorRepeat])]), h("div", {
+      }, [// @ts-ignore function children
+      h(Label, this.v3 ? function () {
+        return [_this2.localization.toLanguageString(recurrenceEditorRepeat, messages[recurrenceEditorRepeat])];
+      } : [_this2.localization.toLanguageString(recurrenceEditorRepeat, messages[recurrenceEditorRepeat])]), h("div", {
         "class": "k-form-field-wrap"
       }, [h(RecurrenceFrequencyEditor, {
         value: this.frequency,
@@ -130,12 +369,15 @@ var RecurrenceEditorVue2 = {
         }
       })])]), this.frequency !== 'never' && h("div", {
         "class": 'k-form-field'
-      }, [h(Label, {
+      }, [// @ts-ignore function children
+      h(Label, {
         editorId: "interval-editor",
         attrs: this.v3 ? undefined : {
           editorId: "interval-editor"
         }
-      }, [this.localizeMessage(capitalize(this.frequency) + 'RepeatEvery')]), h("div", {
+      }, this.v3 ? function () {
+        return [_this2.localizeMessage(capitalize(_this2.frequency) + 'RepeatEvery')];
+      } : [_this2.localizeMessage(capitalize(_this2.frequency) + 'RepeatEvery')]), h("div", {
         "class": "k-form-field-wrap"
       }, [h("div", {
         style: {
@@ -159,14 +401,20 @@ var RecurrenceEditorVue2 = {
           "change": this.handleIntervalChange
         },
         id: "interval-editor"
-      }), "\xA0", h(Label, {
+      }), "\xA0", // @ts-ignore function children
+      h(Label, {
         editorId: "interval-editor",
         attrs: this.v3 ? undefined : {
           editorId: "interval-editor"
         }
-      }, [this.localizeMessage(capitalize(this.frequency) + 'Interval')])])])]), this.frequency === 'weekly' && h("div", {
+      }, this.v3 ? function () {
+        return [_this2.localizeMessage(capitalize(_this2.frequency) + 'Interval')];
+      } : [_this2.localizeMessage(capitalize(_this2.frequency) + 'Interval')])])])]), this.frequency === 'weekly' && h("div", {
         "class": "k-form-field"
-      }, [h(Label, [this.localizeMessage(recurrenceEditorWeeklyRepeatOn, true)]), h("div", {
+      }, [// @ts-ignore function children
+      h(Label, this.v3 ? function () {
+        return [_this2.localizeMessage(recurrenceEditorWeeklyRepeatOn, true)];
+      } : [_this2.localizeMessage(recurrenceEditorWeeklyRepeatOn, true)]), h("div", {
         "class": "k-form-field-wrap"
       }, [h(RecurrenceRepeatOnWeekEditor, {
         dataItems: this.weekDays,
@@ -187,284 +435,68 @@ var RecurrenceEditorVue2 = {
         }
       })])]), this.frequency === 'monthly' && h("div", {
         "class": "k-form-field"
-      }, [h(Label, {
+      }, [// @ts-ignore function children
+      h(Label, {
         key: "recurrence-repeat-on-monthly-label"
-      }, [this.localizeMessage(recurrenceEditorMonthlyRepeatOn, true)]), h("div", {
+      }, this.v3 ? function () {
+        return [_this2.localizeMessage(recurrenceEditorMonthlyRepeatOn, true)];
+      } : [_this2.localizeMessage(recurrenceEditorMonthlyRepeatOn, true)]), h("div", {
         "class": "k-form-field-wrap"
       }, [h(RadioGroup, {
         value: this.repeatOnRule,
         attrs: this.v3 ? undefined : {
           value: this.repeatOnRule,
-          item: RadioGroupListItem,
           dataItems: [{
             value: 'monthday',
+            style: itemStyle,
             label: this.localizeMessage(recurrenceEditorMonthlyDay, true),
-            children: [' ', h(NumericTextBox, {
-              key: 'weekday-day',
-              min: 1,
-              attrs: this.v3 ? undefined : {
-                min: 1,
-                max: 31,
-                disabled: this.repeatOnRule !== 'monthday',
-                value: this.rrule && this.rrule.byMonthDay && this.rrule.byMonthDay[0],
-                width: 'auto'
-              },
-              max: 31,
-              disabled: this.repeatOnRule !== 'monthday',
-              value: this.rrule && this.rrule.byMonthDay && this.rrule.byMonthDay[0],
-              onChange: this.handleMonthDayChange,
-              on: this.v3 ? undefined : {
-                "change": this.handleMonthDayChange
-              },
-              width: 'auto'
-            })]
+            content: monthlyMonthDay.call(this)
           }, {
             value: 'weekday',
+            style: itemStyle,
             label: ' ',
-            children: [h(DropDownList, {
-              key: "weekday-offset",
-              textField: "text",
-              attrs: this.v3 ? undefined : {
-                textField: "text",
-                dataItemKey: "value",
-                disabled: this.repeatOnRule !== 'weekday',
-                dataItems: this.offsets,
-                value: this.offset
-              },
-              dataItemKey: "value",
-              disabled: this.repeatOnRule !== 'weekday',
-              dataItems: this.offsets,
-              value: this.offset,
-              onChange: this.handleOffsetChange,
-              on: this.v3 ? undefined : {
-                "change": this.handleOffsetChange
-              },
-              style: {
-                width: 'auto'
-              }
-            }), ' ', h(DropDownList, {
-              key: "weekday-value",
-              disabled: this.repeatOnRule !== 'weekday',
-              attrs: this.v3 ? undefined : {
-                disabled: this.repeatOnRule !== 'weekday',
-                value: this.weekDay,
-                dataItem: this.extendedWeekDays,
-                textField: "text",
-                dataItemKey: "value"
-              },
-              value: this.weekDay,
-              dataItem: this.extendedWeekDays,
-              onChange: this.handleWeekDayChange,
-              on: this.v3 ? undefined : {
-                "change": this.handleWeekDayChange
-              },
-              textField: "text",
-              dataItemKey: "value",
-              style: {
-                width: 'auto'
-              }
-            })]
+            content: monthlyWeekDay.call(this)
           }]
         },
         onChange: this.handleRepeatOnRuleChange,
         on: this.v3 ? undefined : {
           "change": this.handleRepeatOnRuleChange
         },
-        item: RadioGroupListItem,
         "class": "k-reset",
         dataItems: [{
           value: 'monthday',
+          style: itemStyle,
           label: this.localizeMessage(recurrenceEditorMonthlyDay, true),
-          children: [' ', h(NumericTextBox, {
-            key: 'weekday-day',
-            min: 1,
-            attrs: this.v3 ? undefined : {
-              min: 1,
-              max: 31,
-              disabled: this.repeatOnRule !== 'monthday',
-              value: this.rrule && this.rrule.byMonthDay && this.rrule.byMonthDay[0],
-              width: 'auto'
-            },
-            max: 31,
-            disabled: this.repeatOnRule !== 'monthday',
-            value: this.rrule && this.rrule.byMonthDay && this.rrule.byMonthDay[0],
-            onChange: this.handleMonthDayChange,
-            on: this.v3 ? undefined : {
-              "change": this.handleMonthDayChange
-            },
-            width: 'auto'
-          })]
+          content: monthlyMonthDay.call(this)
         }, {
           value: 'weekday',
+          style: itemStyle,
           label: ' ',
-          children: [h(DropDownList, {
-            key: "weekday-offset",
-            textField: "text",
-            attrs: this.v3 ? undefined : {
-              textField: "text",
-              dataItemKey: "value",
-              disabled: this.repeatOnRule !== 'weekday',
-              dataItems: this.offsets,
-              value: this.offset
-            },
-            dataItemKey: "value",
-            disabled: this.repeatOnRule !== 'weekday',
-            dataItems: this.offsets,
-            value: this.offset,
-            onChange: this.handleOffsetChange,
-            on: this.v3 ? undefined : {
-              "change": this.handleOffsetChange
-            },
-            style: {
-              width: 'auto'
-            }
-          }), ' ', h(DropDownList, {
-            key: "weekday-value",
-            disabled: this.repeatOnRule !== 'weekday',
-            attrs: this.v3 ? undefined : {
-              disabled: this.repeatOnRule !== 'weekday',
-              value: this.weekDay,
-              dataItem: this.extendedWeekDays,
-              textField: "text",
-              dataItemKey: "value"
-            },
-            value: this.weekDay,
-            dataItem: this.extendedWeekDays,
-            onChange: this.handleWeekDayChange,
-            on: this.v3 ? undefined : {
-              "change": this.handleWeekDayChange
-            },
-            textField: "text",
-            dataItemKey: "value",
-            style: {
-              width: 'auto'
-            }
-          })]
+          content: monthlyWeekDay.call(this)
         }]
       })])]), this.frequency === 'yearly' && h("div", {
         "class": "k-form-field"
-      }, [h(Label, [this.localizeMessage(recurrenceEditorYearlyRepeatOn, true)]), h("div", {
+      }, [// @ts-ignore function children
+      h(Label, this.v3 ? function () {
+        return [_this2.localizeMessage(recurrenceEditorYearlyRepeatOn, true)];
+      } : [_this2.localizeMessage(recurrenceEditorYearlyRepeatOn, true)]), h("div", {
         "class": "k-form-field-wrap"
       }, [h(RadioGroup, {
         value: this.repeatOnRule,
         attrs: this.v3 ? undefined : {
           value: this.repeatOnRule,
-          item: RadioGroupListItem,
           dataItems: [{
             value: 'monthday',
             label: ' ',
-            children: [h(DropDownList, {
-              key: "monthday-month",
-              disabled: this.repeatOnRule !== 'monthday',
-              attrs: this.v3 ? undefined : {
-                disabled: this.repeatOnRule !== 'monthday',
-                value: this.month,
-                dataItems: this.months,
-                textField: "text",
-                dataItemKey: "value"
-              },
-              value: this.month,
-              dataItems: this.months,
-              textField: "text",
-              dataItemKey: "value",
-              onChange: this.handleMonthChange,
-              on: this.v3 ? undefined : {
-                "change": this.handleMonthChange
-              },
-              style: {
-                width: 'auto'
-              }
-            }), ' ', h(NumericTextBox, {
-              key: "monthday-day",
-              min: 1,
-              attrs: this.v3 ? undefined : {
-                min: 1,
-                max: 31,
-                disabled: this.repeatOnRule !== 'monthday',
-                value: this.monthDay,
-                width: 'auto'
-              },
-              max: 31,
-              disabled: this.repeatOnRule !== 'monthday',
-              value: this.monthDay,
-              onChange: this.handleMonthDayChange,
-              on: this.v3 ? undefined : {
-                "change": this.handleMonthDayChange
-              },
-              width: 'auto'
-            })]
+            style: itemStyle,
+            content: yearlyMonthDay.call(this)
           }, {
             value: 'weekday',
             label: ' ',
-            children: [h(DropDownList, {
-              key: "yearly-weekday-offset",
-              textField: "text",
-              attrs: this.v3 ? undefined : {
-                textField: "text",
-                dataItemKey: "value",
-                disabled: this.repeatOnRule !== 'weekday',
-                dataItems: this.offsets,
-                value: this.offset
-              },
-              dataItemKey: "value",
-              disabled: this.repeatOnRule !== 'weekday',
-              dataItems: this.offsets,
-              value: this.offset,
-              onChange: this.handleOffsetChange,
-              on: this.v3 ? undefined : {
-                "change": this.handleOffsetChange
-              },
-              style: {
-                width: 'auto'
-              }
-            }), ' ', h(DropDownList, {
-              key: "yearly-weekday-day",
-              textField: "text",
-              attrs: this.v3 ? undefined : {
-                textField: "text",
-                dataItemKey: "value",
-                disabled: this.repeatOnRule !== 'weekday',
-                value: this.weekDay,
-                dataItems: this.extendedWeekDays
-              },
-              dataItemKey: "value",
-              disabled: this.repeatOnRule !== 'weekday',
-              value: this.weekDay,
-              dataItems: this.extendedWeekDays,
-              onChange: this.handleWeekDayChange,
-              on: this.v3 ? undefined : {
-                "change": this.handleWeekDayChange
-              },
-              style: {
-                width: 'auto'
-              }
-            }), ' ', h("span", {
-              key: "yearly-weekday-of-label"
-            }, [this.localizeMessage(recurrenceEditorYearlyOf, true), "\xA0"]), ' ', h(DropDownList, {
-              key: "yearly-weekday-month",
-              textField: "text",
-              attrs: this.v3 ? undefined : {
-                textField: "text",
-                dataItemKey: "value",
-                disabled: this.repeatOnRule !== 'weekday',
-                value: this.month,
-                dataItems: this.months
-              },
-              dataItemKey: "value",
-              disabled: this.repeatOnRule !== 'weekday',
-              value: this.month,
-              dataItems: this.months,
-              onChange: this.handleMonthChange,
-              on: this.v3 ? undefined : {
-                "change": this.handleMonthChange
-              },
-              style: {
-                width: 'auto'
-              }
-            })]
+            style: itemStyle,
+            content: yearlyWeekDay.call(this)
           }]
         },
-        item: RadioGroupListItem,
         onChange: this.handleRepeatOnRuleChange,
         on: this.v3 ? undefined : {
           "change": this.handleRepeatOnRuleChange
@@ -473,241 +505,59 @@ var RecurrenceEditorVue2 = {
         dataItems: [{
           value: 'monthday',
           label: ' ',
-          children: [h(DropDownList, {
-            key: "monthday-month",
-            disabled: this.repeatOnRule !== 'monthday',
-            attrs: this.v3 ? undefined : {
-              disabled: this.repeatOnRule !== 'monthday',
-              value: this.month,
-              dataItems: this.months,
-              textField: "text",
-              dataItemKey: "value"
-            },
-            value: this.month,
-            dataItems: this.months,
-            textField: "text",
-            dataItemKey: "value",
-            onChange: this.handleMonthChange,
-            on: this.v3 ? undefined : {
-              "change": this.handleMonthChange
-            },
-            style: {
-              width: 'auto'
-            }
-          }), ' ', h(NumericTextBox, {
-            key: "monthday-day",
-            min: 1,
-            attrs: this.v3 ? undefined : {
-              min: 1,
-              max: 31,
-              disabled: this.repeatOnRule !== 'monthday',
-              value: this.monthDay,
-              width: 'auto'
-            },
-            max: 31,
-            disabled: this.repeatOnRule !== 'monthday',
-            value: this.monthDay,
-            onChange: this.handleMonthDayChange,
-            on: this.v3 ? undefined : {
-              "change": this.handleMonthDayChange
-            },
-            width: 'auto'
-          })]
+          style: itemStyle,
+          content: yearlyMonthDay.call(this)
         }, {
           value: 'weekday',
           label: ' ',
-          children: [h(DropDownList, {
-            key: "yearly-weekday-offset",
-            textField: "text",
-            attrs: this.v3 ? undefined : {
-              textField: "text",
-              dataItemKey: "value",
-              disabled: this.repeatOnRule !== 'weekday',
-              dataItems: this.offsets,
-              value: this.offset
-            },
-            dataItemKey: "value",
-            disabled: this.repeatOnRule !== 'weekday',
-            dataItems: this.offsets,
-            value: this.offset,
-            onChange: this.handleOffsetChange,
-            on: this.v3 ? undefined : {
-              "change": this.handleOffsetChange
-            },
-            style: {
-              width: 'auto'
-            }
-          }), ' ', h(DropDownList, {
-            key: "yearly-weekday-day",
-            textField: "text",
-            attrs: this.v3 ? undefined : {
-              textField: "text",
-              dataItemKey: "value",
-              disabled: this.repeatOnRule !== 'weekday',
-              value: this.weekDay,
-              dataItems: this.extendedWeekDays
-            },
-            dataItemKey: "value",
-            disabled: this.repeatOnRule !== 'weekday',
-            value: this.weekDay,
-            dataItems: this.extendedWeekDays,
-            onChange: this.handleWeekDayChange,
-            on: this.v3 ? undefined : {
-              "change": this.handleWeekDayChange
-            },
-            style: {
-              width: 'auto'
-            }
-          }), ' ', h("span", {
-            key: "yearly-weekday-of-label"
-          }, [this.localizeMessage(recurrenceEditorYearlyOf, true), "\xA0"]), ' ', h(DropDownList, {
-            key: "yearly-weekday-month",
-            textField: "text",
-            attrs: this.v3 ? undefined : {
-              textField: "text",
-              dataItemKey: "value",
-              disabled: this.repeatOnRule !== 'weekday',
-              value: this.month,
-              dataItems: this.months
-            },
-            dataItemKey: "value",
-            disabled: this.repeatOnRule !== 'weekday',
-            value: this.month,
-            dataItems: this.months,
-            onChange: this.handleMonthChange,
-            on: this.v3 ? undefined : {
-              "change": this.handleMonthChange
-            },
-            style: {
-              width: 'auto'
-            }
-          })]
+          style: itemStyle,
+          content: yearlyWeekDay.call(this)
         }]
       })])]), this.frequency !== 'never' && h("div", {
         "class": "k-form-field"
-      }, [h(Label, [this.localizeMessage(recurrenceEditorEndLabel, true)]), h("div", {
+      }, [// @ts-ignore function children
+      h(Label, this.v3 ? function () {
+        return [_this2.localizeMessage(recurrenceEditorEndLabel, true)];
+      } : [_this2.localizeMessage(recurrenceEditorEndLabel, true)]), h("div", {
         "class": "k-form-field-wrap"
       }, [h(RadioGroup, {
-        item: RadioGroupListItem,
+        value: this.endRule,
         attrs: this.v3 ? undefined : {
-          item: RadioGroupListItem,
           value: this.endRule,
           dataItems: [{
             value: 'never',
+            style: itemStyle,
             label: this.localizeMessage(recurrenceEditorEndNever, true)
           }, {
             value: 'count',
+            style: itemStyle,
             label: this.localizeMessage(recurrenceEditorEndAfter, true),
-            children: [' ', h(NumericTextBox, {
-              key: "endrule-after-editor",
-              id: "k-endrule-after",
-              attrs: this.v3 ? undefined : {
-                id: "k-endrule-after",
-                min: 1,
-                width: '70px',
-                value: this.endRule === 'count' ? this.rrule.count : this.defaultCount,
-                disabled: this.endRule !== 'count'
-              },
-              min: 1,
-              width: '70px',
-              value: this.endRule === 'count' ? this.rrule.count : this.defaultCount,
-              onChange: this.handleCountChange,
-              on: this.v3 ? undefined : {
-                "change": this.handleCountChange
-              },
-              disabled: this.endRule !== 'count'
-            }), ' ', h(Label, {
-              key: "endrule-after-label",
-              "class": 'k-radio-label',
-              editorId: 'k-endrule-after',
-              attrs: this.v3 ? undefined : {
-                editorId: 'k-endrule-after'
-              }
-            }, [this.localizeMessage(recurrenceEditorEndOccurrence, true)])]
+            content: count.call(this)
           }, {
             value: 'until',
+            style: itemStyle,
             label: this.localizeMessage(recurrenceEditorEndOn, true),
-            children: [' ', // @ts-ignore  function children
-            h(DatePicker, {
-              key: "k-endrule-until-editor",
-              id: "k-endrule-until",
-              attrs: this.v3 ? undefined : {
-                id: "k-endrule-until",
-                disabled: this.endRule !== 'until',
-                min: this.$props.start,
-                value: this.endRule === 'until' ? this.until : toLocalDate(this.defaultUntil),
-                width: 'auto'
-              },
-              disabled: this.endRule !== 'until',
-              min: this.$props.start,
-              value: this.endRule === 'until' ? this.until : toLocalDate(this.defaultUntil),
-              onChange: this.handleUntilChange,
-              on: this.v3 ? undefined : {
-                "change": this.handleUntilChange
-              },
-              width: 'auto'
-            })]
+            content: dpUntil.call(this)
           }]
         },
-        value: this.endRule,
         onChange: this.handleEndRuleChange,
         on: this.v3 ? undefined : {
           "change": this.handleEndRuleChange
         },
         dataItems: [{
           value: 'never',
+          style: itemStyle,
           label: this.localizeMessage(recurrenceEditorEndNever, true)
         }, {
           value: 'count',
+          style: itemStyle,
           label: this.localizeMessage(recurrenceEditorEndAfter, true),
-          children: [' ', h(NumericTextBox, {
-            key: "endrule-after-editor",
-            id: "k-endrule-after",
-            attrs: this.v3 ? undefined : {
-              id: "k-endrule-after",
-              min: 1,
-              width: '70px',
-              value: this.endRule === 'count' ? this.rrule.count : this.defaultCount,
-              disabled: this.endRule !== 'count'
-            },
-            min: 1,
-            width: '70px',
-            value: this.endRule === 'count' ? this.rrule.count : this.defaultCount,
-            onChange: this.handleCountChange,
-            on: this.v3 ? undefined : {
-              "change": this.handleCountChange
-            },
-            disabled: this.endRule !== 'count'
-          }), ' ', h(Label, {
-            key: "endrule-after-label",
-            "class": 'k-radio-label',
-            editorId: 'k-endrule-after',
-            attrs: this.v3 ? undefined : {
-              editorId: 'k-endrule-after'
-            }
-          }, [this.localizeMessage(recurrenceEditorEndOccurrence, true)])]
+          content: count.call(this)
         }, {
           value: 'until',
+          style: itemStyle,
           label: this.localizeMessage(recurrenceEditorEndOn, true),
-          children: [' ', h(DatePicker, {
-            key: "k-endrule-until-editor",
-            id: "k-endrule-until",
-            attrs: this.v3 ? undefined : {
-              id: "k-endrule-until",
-              disabled: this.endRule !== 'until',
-              min: this.$props.start,
-              value: this.endRule === 'until' ? this.until : toLocalDate(this.defaultUntil),
-              width: 'auto'
-            },
-            disabled: this.endRule !== 'until',
-            min: this.$props.start,
-            value: this.endRule === 'until' ? this.until : toLocalDate(this.defaultUntil),
-            onChange: this.handleUntilChange,
-            on: this.v3 ? undefined : {
-              "change": this.handleUntilChange
-            },
-            width: 'auto'
-          })]
+          content: dpUntil.call(this)
         }]
       })])])])
     );
@@ -719,7 +569,7 @@ var RecurrenceEditorVue2 = {
     },
     onChangeHandler: function onChangeHandler(newRrule) {
       if (newRrule.freq === 'never') {
-        this.$emits('change', {
+        this.$emit('change', {
           value: null
         });
       } else {
@@ -727,7 +577,7 @@ var RecurrenceEditorVue2 = {
           newRrule.weekStart = this.intl.firstDay();
         }
 
-        this.$emits('change', {
+        this.$emit('change', {
           value: serializeRule(newRrule, this.$props.timezone)
         });
       }