@progress/kendo-vue-scheduler 3.1.0 → 3.1.2-dev.202203221454

package/dist/es/Scheduler.js

@@ -33,18 +33,16 @@ import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
 import { getModelFields, getField, findMaster, setField, toSchedulerGroups, getToday } from './utils';
-import { clone, getListeners, templateRendering } from '@progress/kendo-vue-common';
+import { clone, getListeners, getTemplate, templateRendering } from '@progress/kendo-vue-common';
 import { provideIntlService, provideLocalizationService } from '@progress/kendo-vue-intl';
 import { SchedulerHeader } from './components/header/SchedulerHeader';
 import { SchedulerNavigation } from './components/header/navigation/SchedulerNavigation';
 import { SchedulerViewSelector } from './components/header/view-selector/SchedulerViewSelector';
 import { addDays, addMonths } from '@progress/kendo-date-math';
 import { SchedulerFooter } from './components/footer/SchedulerFooter';
-import { Button, ToolbarSpacer, ButtonGroup } from '@progress/kendo-vue-buttons';
-import { showFullDay, showWorkDay, messages, today, previousTitle, nextTitle } from './messages';
+import { ToolbarSpacer } from '@progress/kendo-vue-buttons';
 import { NavigationDatePicker } from './components/header/navigation/NavigationDatePicker';
-import { ViewSelectorList } from './components/header/view-selector/ViewSelectorList';
-import { BusinessHours } from './components/footer/bussiness-hours/BussinessHours';
+import { BusinessHours } from './components/footer/bussiness-hours/BusinessHours';
 import { DayView } from './views/day/DayView'; // import { SchedulerFormProps } from './editors/SchedulerFormEditor';
 
 import { validatePackage } from '@progress/kendo-vue-common';
@@ -106,7 +104,10 @@ var SchedulerVue2 = {
       default: new Date()
     },
     header: [String, Function, Object],
-    footer: [String, Function, Object]
+    footer: [String, Function, Object],
+    slotRender: [String, Function, Object],
+    item: [String, Function, Object],
+    task: [String, Function, Object]
   },
   computed: {
     wrapperClassName: function wrapperClassName() {
@@ -206,11 +207,11 @@ var SchedulerVue2 = {
       return currentView.name === _this.ks.activeViewName;
     }) || this.views[0] || h(DayView);
     var slotDuration = this.getViewPropValue(this.ks.view, 'slotDuration', this.ks.activeViewName);
-    var todayText = this.localization.toLanguageString(today, messages[today]);
-    var previousText = this.localization.toLanguageString(previousTitle, messages[previousTitle]);
-    var nextText = this.localization.toLanguageString(nextTitle, messages[nextTitle]);
-    var heaeder = templateRendering.call(this, view.header || this.$props.header, getListeners.call(this));
+    var header = templateRendering.call(this, view.header || this.$props.header, getListeners.call(this));
     var footer = templateRendering.call(this, view.footer || this.$props.footer, getListeners.call(this));
+    var slotRender = templateRendering.call(this, view.slot || this.$props.slotRender, {});
+    var item = templateRendering.call(this, view.item || this.$props.item, {});
+    var task = templateRendering.call(this, view.task || this.$props.task, {});
     var ViewSelector = SchedulerViewSelector;
     var viewComponent = this.getViewComponentByName(this.ks.activeViewName || view.name);
 
@@ -219,329 +220,25 @@ var SchedulerVue2 = {
       dataItems: undefined,
       views: undefined,
       defaultDate: undefined,
-      dateRange: this.ks.dateRange
+      dateRange: this.ks.dateRange,
+      slotRender: slotRender,
+      item: item,
+      task: task
     });
 
-    return h("div", {
-      id: this.$props.id,
-      attrs: this.v3 ? undefined : {
-        id: this.$props.id,
-        tabIndex: this.$props.tabIndex // Aria
-        //  dir={dir}
-        ,
-        role: this.$props.role,
-        "aria-label": this.$props.ariaLabel,
-        "aria-labelledby": this.$props.ariaLabelledby // Handlers
-
-      },
-      style: {
-        height: this.$props.height + 'px'
-      },
-      "class": this.wrapperClassName,
-      tabIndex: this.$props.tabIndex,
-      role: this.$props.role,
-      "aria-label": this.$props.ariaLabel,
-      "aria-labelledby": this.$props.ariaLabelledby,
-      onFocusin: this.handleFocus,
-      on: this.v3 ? undefined : {
-        "focusin": this.handleFocus,
-        "focusout": this.handleBlur
-      },
-      onFocusout: this.handleBlur
-    }, [// @ts-ignore  function children
+    var headerRender;
+    var headerRenderDefaultRendering = // @ts-ignore  function children
     h(SchedulerHeader, this.v3 ? function () {
-      return [// @ts-ignore  function children
-      h(SchedulerNavigation, _this2.v3 ? function () {
-        return [// @ts-ignore  function children
-        h(ButtonGroup, {
-          "class": "k-scheduler-navigation"
-        }, _this2.v3 ? function () {
-          return [// @ts-ignore  function children
-          h(Button, {
-            role: "button",
-            attrs: _this2.v3 ? undefined : {
-              role: "button",
-              tabIndex: -1,
-              title: todayText,
-              "aria-label": todayText
-            },
-            tabIndex: -1,
-            title: todayText,
-            "aria-label": todayText,
-            onClick: _this2.handleTodayClick,
-            on: _this2.v3 ? undefined : {
-              "click": _this2.handleTodayClick
-            }
-          }, _this2.v3 ? function () {
-            return [todayText];
-          } : [todayText]), // @ts-ignore  function children
-          h(Button, {
-            role: "button",
-            attrs: _this2.v3 ? undefined : {
-              role: "button",
-              tabIndex: -1,
-              title: previousText,
-              "aria-label": previousText
-            },
-            tabIndex: -1,
-            "class": "k-button-icon",
-            title: previousText,
-            "aria-label": previousText,
-            onClick: _this2.handlePrevClick,
-            on: _this2.v3 ? undefined : {
-              "click": _this2.handlePrevClick
-            }
-          }, _this2.v3 ? function () {
-            return [h("span", {
-              "class": "k-button-text"
-            }, [h("span", {
-              "class": "k-icon k-i-arrow-60-left"
-            })])];
-          } : [h("span", {
-            "class": "k-button-text"
-          }, [h("span", {
-            "class": "k-icon k-i-arrow-60-left"
-          })])]), // @ts-ignore  function children
-          h(Button, {
-            role: "button",
-            attrs: _this2.v3 ? undefined : {
-              role: "button",
-              tabIndex: -1,
-              title: nextText,
-              "aria-label": nextText
-            },
-            tabIndex: -1,
-            "class": "k-button-icon",
-            title: nextText,
-            "aria-label": nextText,
-            onClick: _this2.handleNextClick,
-            on: _this2.v3 ? undefined : {
-              "click": _this2.handleNextClick
-            }
-          }, _this2.v3 ? function () {
-            return [h("span", {
-              "class": "k-button-text"
-            }, [h("span", {
-              "class": "k-icon k-i-arrow-60-right"
-            })])];
-          } : [h("span", {
-            "class": "k-button-text"
-          }, [h("span", {
-            "class": "k-icon k-i-arrow-60-right"
-          })])])];
-        } : [h(Button, {
-          role: "button",
-          attrs: _this2.v3 ? undefined : {
-            role: "button",
-            tabIndex: -1,
-            title: todayText,
-            "aria-label": todayText
-          },
-          tabIndex: -1,
-          title: todayText,
-          "aria-label": todayText,
-          onClick: _this2.handleTodayClick,
-          on: _this2.v3 ? undefined : {
-            "click": _this2.handleTodayClick
-          }
-        }, _this2.v3 ? function () {
-          return [todayText];
-        } : [todayText]), h(Button, {
-          role: "button",
-          attrs: _this2.v3 ? undefined : {
-            role: "button",
-            tabIndex: -1,
-            title: previousText,
-            "aria-label": previousText
-          },
-          tabIndex: -1,
-          "class": "k-button-icon",
-          title: previousText,
-          "aria-label": previousText,
-          onClick: _this2.handlePrevClick,
-          on: _this2.v3 ? undefined : {
-            "click": _this2.handlePrevClick
-          }
-        }, _this2.v3 ? function () {
-          return [h("span", {
-            "class": "k-button-text"
-          }, [h("span", {
-            "class": "k-icon k-i-arrow-60-left"
-          })])];
-        } : [h("span", {
-          "class": "k-button-text"
-        }, [h("span", {
-          "class": "k-icon k-i-arrow-60-left"
-        })])]), h(Button, {
-          role: "button",
-          attrs: _this2.v3 ? undefined : {
-            role: "button",
-            tabIndex: -1,
-            title: nextText,
-            "aria-label": nextText
-          },
-          tabIndex: -1,
-          "class": "k-button-icon",
-          title: nextText,
-          "aria-label": nextText,
-          onClick: _this2.handleNextClick,
-          on: _this2.v3 ? undefined : {
-            "click": _this2.handleNextClick
-          }
-        }, _this2.v3 ? function () {
-          return [h("span", {
-            "class": "k-button-text"
-          }, [h("span", {
-            "class": "k-icon k-i-arrow-60-right"
-          })])];
-        } : [h("span", {
-          "class": "k-button-text"
-        }, [h("span", {
-          "class": "k-icon k-i-arrow-60-right"
-        })])])])];
-      } : [h(ButtonGroup, {
-        "class": "k-scheduler-navigation"
-      }, _this2.v3 ? function () {
-        return [h(Button, {
-          role: "button",
-          attrs: _this2.v3 ? undefined : {
-            role: "button",
-            tabIndex: -1,
-            title: todayText,
-            "aria-label": todayText
-          },
-          tabIndex: -1,
-          title: todayText,
-          "aria-label": todayText,
-          onClick: _this2.handleTodayClick,
-          on: _this2.v3 ? undefined : {
-            "click": _this2.handleTodayClick
-          }
-        }, _this2.v3 ? function () {
-          return [todayText];
-        } : [todayText]), h(Button, {
-          role: "button",
-          attrs: _this2.v3 ? undefined : {
-            role: "button",
-            tabIndex: -1,
-            title: previousText,
-            "aria-label": previousText
-          },
-          tabIndex: -1,
-          "class": "k-button-icon",
-          title: previousText,
-          "aria-label": previousText,
-          onClick: _this2.handlePrevClick,
-          on: _this2.v3 ? undefined : {
-            "click": _this2.handlePrevClick
-          }
-        }, _this2.v3 ? function () {
-          return [h("span", {
-            "class": "k-button-text"
-          }, [h("span", {
-            "class": "k-icon k-i-arrow-60-left"
-          })])];
-        } : [h("span", {
-          "class": "k-button-text"
-        }, [h("span", {
-          "class": "k-icon k-i-arrow-60-left"
-        })])]), h(Button, {
-          role: "button",
-          attrs: _this2.v3 ? undefined : {
-            role: "button",
-            tabIndex: -1,
-            title: nextText,
-            "aria-label": nextText
-          },
-          tabIndex: -1,
-          "class": "k-button-icon",
-          title: nextText,
-          "aria-label": nextText,
-          onClick: _this2.handleNextClick,
-          on: _this2.v3 ? undefined : {
-            "click": _this2.handleNextClick
-          }
-        }, _this2.v3 ? function () {
-          return [h("span", {
-            "class": "k-button-text"
-          }, [h("span", {
-            "class": "k-icon k-i-arrow-60-right"
-          })])];
-        } : [h("span", {
-          "class": "k-button-text"
-        }, [h("span", {
-          "class": "k-icon k-i-arrow-60-right"
-        })])])];
-      } : [h(Button, {
-        role: "button",
-        attrs: _this2.v3 ? undefined : {
-          role: "button",
-          tabIndex: -1,
-          title: todayText,
-          "aria-label": todayText
-        },
-        tabIndex: -1,
-        title: todayText,
-        "aria-label": todayText,
-        onClick: _this2.handleTodayClick,
+      return [h(SchedulerNavigation, {
+        onPrevclick: _this2.handlePrevClick,
         on: _this2.v3 ? undefined : {
-          "click": _this2.handleTodayClick
-        }
-      }, _this2.v3 ? function () {
-        return [todayText];
-      } : [todayText]), h(Button, {
-        role: "button",
-        attrs: _this2.v3 ? undefined : {
-          role: "button",
-          tabIndex: -1,
-          title: previousText,
-          "aria-label": previousText
+          "prevclick": _this2.handlePrevClick,
+          "nextclick": _this2.handleNextClick,
+          "todayclick": _this2.handleTodayClick
         },
-        tabIndex: -1,
-        "class": "k-button-icon",
-        title: previousText,
-        "aria-label": previousText,
-        onClick: _this2.handlePrevClick,
-        on: _this2.v3 ? undefined : {
-          "click": _this2.handlePrevClick
-        }
-      }, _this2.v3 ? function () {
-        return [h("span", {
-          "class": "k-button-text"
-        }, [h("span", {
-          "class": "k-icon k-i-arrow-60-left"
-        })])];
-      } : [h("span", {
-        "class": "k-button-text"
-      }, [h("span", {
-        "class": "k-icon k-i-arrow-60-left"
-      })])]), h(Button, {
-        role: "button",
-        attrs: _this2.v3 ? undefined : {
-          role: "button",
-          tabIndex: -1,
-          title: nextText,
-          "aria-label": nextText
-        },
-        tabIndex: -1,
-        "class": "k-button-icon",
-        title: nextText,
-        "aria-label": nextText,
-        onClick: _this2.handleNextClick,
-        on: _this2.v3 ? undefined : {
-          "click": _this2.handleNextClick
-        }
-      }, _this2.v3 ? function () {
-        return [h("span", {
-          "class": "k-button-text"
-        }, [h("span", {
-          "class": "k-icon k-i-arrow-60-right"
-        })])];
-      } : [h("span", {
-        "class": "k-button-text"
-      }, [h("span", {
-        "class": "k-icon k-i-arrow-60-right"
-      })])])])]), h(NavigationDatePicker, {
+        onNextclick: _this2.handleNextClick,
+        onTodayclick: _this2.handleTodayClick
+      }), h(NavigationDatePicker, {
         value: _this2.ks.currentDate,
         attrs: _this2.v3 ? undefined : {
           value: _this2.ks.currentDate
@@ -550,297 +247,17 @@ var SchedulerVue2 = {
         on: _this2.v3 ? undefined : {
           "change": _this2.handleDatePickerChange
         }
-      }), h(ToolbarSpacer), // @ts-ignore  function children
-      h(ViewSelector, _this2.v3 ? function () {
-        return [h(ViewSelectorList)];
-      } : [h(ViewSelectorList)])];
-    } : [h(SchedulerNavigation, _this2.v3 ? function () {
-      return [h(ButtonGroup, {
-        "class": "k-scheduler-navigation"
-      }, _this2.v3 ? function () {
-        return [h(Button, {
-          role: "button",
-          attrs: _this2.v3 ? undefined : {
-            role: "button",
-            tabIndex: -1,
-            title: todayText,
-            "aria-label": todayText
-          },
-          tabIndex: -1,
-          title: todayText,
-          "aria-label": todayText,
-          onClick: _this2.handleTodayClick,
-          on: _this2.v3 ? undefined : {
-            "click": _this2.handleTodayClick
-          }
-        }, _this2.v3 ? function () {
-          return [todayText];
-        } : [todayText]), h(Button, {
-          role: "button",
-          attrs: _this2.v3 ? undefined : {
-            role: "button",
-            tabIndex: -1,
-            title: previousText,
-            "aria-label": previousText
-          },
-          tabIndex: -1,
-          "class": "k-button-icon",
-          title: previousText,
-          "aria-label": previousText,
-          onClick: _this2.handlePrevClick,
-          on: _this2.v3 ? undefined : {
-            "click": _this2.handlePrevClick
-          }
-        }, _this2.v3 ? function () {
-          return [h("span", {
-            "class": "k-button-text"
-          }, [h("span", {
-            "class": "k-icon k-i-arrow-60-left"
-          })])];
-        } : [h("span", {
-          "class": "k-button-text"
-        }, [h("span", {
-          "class": "k-icon k-i-arrow-60-left"
-        })])]), h(Button, {
-          role: "button",
-          attrs: _this2.v3 ? undefined : {
-            role: "button",
-            tabIndex: -1,
-            title: nextText,
-            "aria-label": nextText
-          },
-          tabIndex: -1,
-          "class": "k-button-icon",
-          title: nextText,
-          "aria-label": nextText,
-          onClick: _this2.handleNextClick,
-          on: _this2.v3 ? undefined : {
-            "click": _this2.handleNextClick
-          }
-        }, _this2.v3 ? function () {
-          return [h("span", {
-            "class": "k-button-text"
-          }, [h("span", {
-            "class": "k-icon k-i-arrow-60-right"
-          })])];
-        } : [h("span", {
-          "class": "k-button-text"
-        }, [h("span", {
-          "class": "k-icon k-i-arrow-60-right"
-        })])])];
-      } : [h(Button, {
-        role: "button",
-        attrs: _this2.v3 ? undefined : {
-          role: "button",
-          tabIndex: -1,
-          title: todayText,
-          "aria-label": todayText
-        },
-        tabIndex: -1,
-        title: todayText,
-        "aria-label": todayText,
-        onClick: _this2.handleTodayClick,
-        on: _this2.v3 ? undefined : {
-          "click": _this2.handleTodayClick
-        }
-      }, _this2.v3 ? function () {
-        return [todayText];
-      } : [todayText]), h(Button, {
-        role: "button",
-        attrs: _this2.v3 ? undefined : {
-          role: "button",
-          tabIndex: -1,
-          title: previousText,
-          "aria-label": previousText
-        },
-        tabIndex: -1,
-        "class": "k-button-icon",
-        title: previousText,
-        "aria-label": previousText,
-        onClick: _this2.handlePrevClick,
-        on: _this2.v3 ? undefined : {
-          "click": _this2.handlePrevClick
-        }
-      }, _this2.v3 ? function () {
-        return [h("span", {
-          "class": "k-button-text"
-        }, [h("span", {
-          "class": "k-icon k-i-arrow-60-left"
-        })])];
-      } : [h("span", {
-        "class": "k-button-text"
-      }, [h("span", {
-        "class": "k-icon k-i-arrow-60-left"
-      })])]), h(Button, {
-        role: "button",
-        attrs: _this2.v3 ? undefined : {
-          role: "button",
-          tabIndex: -1,
-          title: nextText,
-          "aria-label": nextText
-        },
-        tabIndex: -1,
-        "class": "k-button-icon",
-        title: nextText,
-        "aria-label": nextText,
-        onClick: _this2.handleNextClick,
-        on: _this2.v3 ? undefined : {
-          "click": _this2.handleNextClick
-        }
-      }, _this2.v3 ? function () {
-        return [h("span", {
-          "class": "k-button-text"
-        }, [h("span", {
-          "class": "k-icon k-i-arrow-60-right"
-        })])];
-      } : [h("span", {
-        "class": "k-button-text"
-      }, [h("span", {
-        "class": "k-icon k-i-arrow-60-right"
-      })])])])];
-    } : [h(ButtonGroup, {
-      "class": "k-scheduler-navigation"
-    }, _this2.v3 ? function () {
-      return [h(Button, {
-        role: "button",
-        attrs: _this2.v3 ? undefined : {
-          role: "button",
-          tabIndex: -1,
-          title: todayText,
-          "aria-label": todayText
-        },
-        tabIndex: -1,
-        title: todayText,
-        "aria-label": todayText,
-        onClick: _this2.handleTodayClick,
-        on: _this2.v3 ? undefined : {
-          "click": _this2.handleTodayClick
-        }
-      }, _this2.v3 ? function () {
-        return [todayText];
-      } : [todayText]), h(Button, {
-        role: "button",
-        attrs: _this2.v3 ? undefined : {
-          role: "button",
-          tabIndex: -1,
-          title: previousText,
-          "aria-label": previousText
-        },
-        tabIndex: -1,
-        "class": "k-button-icon",
-        title: previousText,
-        "aria-label": previousText,
-        onClick: _this2.handlePrevClick,
-        on: _this2.v3 ? undefined : {
-          "click": _this2.handlePrevClick
-        }
-      }, _this2.v3 ? function () {
-        return [h("span", {
-          "class": "k-button-text"
-        }, [h("span", {
-          "class": "k-icon k-i-arrow-60-left"
-        })])];
-      } : [h("span", {
-        "class": "k-button-text"
-      }, [h("span", {
-        "class": "k-icon k-i-arrow-60-left"
-      })])]), h(Button, {
-        role: "button",
-        attrs: _this2.v3 ? undefined : {
-          role: "button",
-          tabIndex: -1,
-          title: nextText,
-          "aria-label": nextText
-        },
-        tabIndex: -1,
-        "class": "k-button-icon",
-        title: nextText,
-        "aria-label": nextText,
-        onClick: _this2.handleNextClick,
-        on: _this2.v3 ? undefined : {
-          "click": _this2.handleNextClick
-        }
-      }, _this2.v3 ? function () {
-        return [h("span", {
-          "class": "k-button-text"
-        }, [h("span", {
-          "class": "k-icon k-i-arrow-60-right"
-        })])];
-      } : [h("span", {
-        "class": "k-button-text"
-      }, [h("span", {
-        "class": "k-icon k-i-arrow-60-right"
-      })])])];
-    } : [h(Button, {
-      role: "button",
-      attrs: _this2.v3 ? undefined : {
-        role: "button",
-        tabIndex: -1,
-        title: todayText,
-        "aria-label": todayText
-      },
-      tabIndex: -1,
-      title: todayText,
-      "aria-label": todayText,
-      onClick: _this2.handleTodayClick,
+      }), h(ToolbarSpacer), h(ViewSelector)];
+    } : [h(SchedulerNavigation, {
+      onPrevclick: _this2.handlePrevClick,
       on: _this2.v3 ? undefined : {
-        "click": _this2.handleTodayClick
-      }
-    }, _this2.v3 ? function () {
-      return [todayText];
-    } : [todayText]), h(Button, {
-      role: "button",
-      attrs: _this2.v3 ? undefined : {
-        role: "button",
-        tabIndex: -1,
-        title: previousText,
-        "aria-label": previousText
-      },
-      tabIndex: -1,
-      "class": "k-button-icon",
-      title: previousText,
-      "aria-label": previousText,
-      onClick: _this2.handlePrevClick,
-      on: _this2.v3 ? undefined : {
-        "click": _this2.handlePrevClick
-      }
-    }, _this2.v3 ? function () {
-      return [h("span", {
-        "class": "k-button-text"
-      }, [h("span", {
-        "class": "k-icon k-i-arrow-60-left"
-      })])];
-    } : [h("span", {
-      "class": "k-button-text"
-    }, [h("span", {
-      "class": "k-icon k-i-arrow-60-left"
-    })])]), h(Button, {
-      role: "button",
-      attrs: _this2.v3 ? undefined : {
-        role: "button",
-        tabIndex: -1,
-        title: nextText,
-        "aria-label": nextText
+        "prevclick": _this2.handlePrevClick,
+        "nextclick": _this2.handleNextClick,
+        "todayclick": _this2.handleTodayClick
       },
-      tabIndex: -1,
-      "class": "k-button-icon",
-      title: nextText,
-      "aria-label": nextText,
-      onClick: _this2.handleNextClick,
-      on: _this2.v3 ? undefined : {
-        "click": _this2.handleNextClick
-      }
-    }, _this2.v3 ? function () {
-      return [h("span", {
-        "class": "k-button-text"
-      }, [h("span", {
-        "class": "k-icon k-i-arrow-60-right"
-      })])];
-    } : [h("span", {
-      "class": "k-button-text"
-    }, [h("span", {
-      "class": "k-icon k-i-arrow-60-right"
-    })])])])]), h(NavigationDatePicker, {
+      onNextclick: _this2.handleNextClick,
+      onTodayclick: _this2.handleTodayClick
+    }), h(NavigationDatePicker, {
       value: _this2.ks.currentDate,
       attrs: _this2.v3 ? undefined : {
         value: _this2.ks.currentDate
@@ -849,85 +266,90 @@ var SchedulerVue2 = {
       on: _this2.v3 ? undefined : {
         "change": _this2.handleDatePickerChange
       }
-    }), h(ToolbarSpacer), h(ViewSelector, _this2.v3 ? function () {
-      return [h(ViewSelectorList)];
-    } : [h(ViewSelectorList)])]), view && h(viewComponent, __assign({
-      key: this.ks.view.name,
-      onDataaction: this.handleDataAction,
-      on: this.v3 ? undefined : {
-        'dataaction': this.handleDataAction
+    }), h(ToolbarSpacer), h(ViewSelector)]);
+    headerRender = getTemplate.call(this, {
+      h: h,
+      template: header,
+      defaultRendering: headerRenderDefaultRendering,
+      additionalProps: {
+        currentDate: this.ks.currentDate
       },
-      props: this.v3 ? undefined : viewProps
-    }, viewProps)), // @ts-ignore  function children
+      additionalListeners: {
+        prevclick: this.handlePrevClick,
+        nextclick: this.handleNextClick,
+        todayclick: this.handleTodayClick,
+        datepickerchange: this.handleDatePickerChange
+      }
+    });
+    var footerRender;
+    var footerRenderDefaultRendering = // @ts-ignore  function children
     h(SchedulerFooter, this.v3 ? function () {
-      return [slotDuration && slotDuration < 24 * 60 && // @ts-ignore  function children
-      h(BusinessHours, _this2.v3 ? function () {
-        return [// @ts-ignore  function children
-        h(Button, {
-          tabIndex: -1,
-          attrs: _this2.v3 ? undefined : {
-            tabIndex: -1
-          },
-          onClick: _this2.handleShowWorkHoursClick,
-          on: _this2.v3 ? undefined : {
-            "click": _this2.handleShowWorkHoursClick
-          }
-        }, _this2.v3 ? function () {
-          return [h("span", {
-            "class": "k-icon k-i-clock"
-          }), "\xA0", _this2.localization.toLanguageString(_this2.ks.showWorkHours ? showFullDay : showWorkDay, messages[_this2.ks.showWorkHours ? showFullDay : showWorkDay])];
-        } : [h("span", {
-          "class": "k-icon k-i-clock"
-        }), "\xA0", _this2.localization.toLanguageString(_this2.ks.showWorkHours ? showFullDay : showWorkDay, messages[_this2.ks.showWorkHours ? showFullDay : showWorkDay])])];
-      } : [h(Button, {
-        tabIndex: -1,
-        attrs: _this2.v3 ? undefined : {
-          tabIndex: -1
-        },
-        onClick: _this2.handleShowWorkHoursClick,
-        on: _this2.v3 ? undefined : {
-          "click": _this2.handleShowWorkHoursClick
-        }
-      }, _this2.v3 ? function () {
-        return [h("span", {
-          "class": "k-icon k-i-clock"
-        }), "\xA0", _this2.localization.toLanguageString(_this2.ks.showWorkHours ? showFullDay : showWorkDay, messages[_this2.ks.showWorkHours ? showFullDay : showWorkDay])];
-      } : [h("span", {
-        "class": "k-icon k-i-clock"
-      }), "\xA0", _this2.localization.toLanguageString(_this2.ks.showWorkHours ? showFullDay : showWorkDay, messages[_this2.ks.showWorkHours ? showFullDay : showWorkDay])])])];
-    } : [slotDuration && slotDuration < 24 * 60 && h(BusinessHours, _this2.v3 ? function () {
-      return [h(Button, {
-        tabIndex: -1,
+      return [// @ts-ignore  function children
+      h(BusinessHours, {
+        slotDuration: slotDuration,
         attrs: _this2.v3 ? undefined : {
-          tabIndex: -1
+          slotDuration: slotDuration
         },
         onClick: _this2.handleShowWorkHoursClick,
         on: _this2.v3 ? undefined : {
           "click": _this2.handleShowWorkHoursClick
         }
-      }, _this2.v3 ? function () {
-        return [h("span", {
-          "class": "k-icon k-i-clock"
-        }), "\xA0", _this2.localization.toLanguageString(_this2.ks.showWorkHours ? showFullDay : showWorkDay, messages[_this2.ks.showWorkHours ? showFullDay : showWorkDay])];
-      } : [h("span", {
-        "class": "k-icon k-i-clock"
-      }), "\xA0", _this2.localization.toLanguageString(_this2.ks.showWorkHours ? showFullDay : showWorkDay, messages[_this2.ks.showWorkHours ? showFullDay : showWorkDay])])];
-    } : [h(Button, {
-      tabIndex: -1,
+      })];
+    } : [h(BusinessHours, {
+      slotDuration: slotDuration,
       attrs: _this2.v3 ? undefined : {
-        tabIndex: -1
+        slotDuration: slotDuration
       },
       onClick: _this2.handleShowWorkHoursClick,
       on: _this2.v3 ? undefined : {
         "click": _this2.handleShowWorkHoursClick
       }
-    }, _this2.v3 ? function () {
-      return [h("span", {
-        "class": "k-icon k-i-clock"
-      }), "\xA0", _this2.localization.toLanguageString(_this2.ks.showWorkHours ? showFullDay : showWorkDay, messages[_this2.ks.showWorkHours ? showFullDay : showWorkDay])];
-    } : [h("span", {
-      "class": "k-icon k-i-clock"
-    }), "\xA0", _this2.localization.toLanguageString(_this2.ks.showWorkHours ? showFullDay : showWorkDay, messages[_this2.ks.showWorkHours ? showFullDay : showWorkDay])])])])]);
+    })]);
+    footerRender = getTemplate.call(this, {
+      h: h,
+      template: footer,
+      defaultRendering: footerRenderDefaultRendering,
+      additionalProps: {
+        slotDuration: slotDuration
+      },
+      additionalListeners: {
+        showworkhoursclick: this.handleShowWorkHoursClick
+      }
+    });
+    return h("div", {
+      id: this.$props.id,
+      attrs: this.v3 ? undefined : {
+        id: this.$props.id,
+        tabIndex: this.$props.tabIndex // Aria
+        //  dir={dir}
+        ,
+        role: this.$props.role,
+        "aria-label": this.$props.ariaLabel,
+        "aria-labelledby": this.$props.ariaLabelledby // Handlers
+
+      },
+      style: {
+        height: this.$props.height + 'px'
+      },
+      "class": this.wrapperClassName,
+      tabIndex: this.$props.tabIndex,
+      role: this.$props.role,
+      "aria-label": this.$props.ariaLabel,
+      "aria-labelledby": this.$props.ariaLabelledby,
+      onFocusin: this.handleFocus,
+      on: this.v3 ? undefined : {
+        "focusin": this.handleFocus,
+        "focusout": this.handleBlur
+      },
+      onFocusout: this.handleBlur
+    }, [headerRender, view && h(viewComponent, __assign({
+      key: this.ks.view.name,
+      onDataaction: this.handleDataAction,
+      on: this.v3 ? undefined : {
+        'dataaction': this.handleDataAction
+      },
+      props: this.v3 ? undefined : viewProps
+    }, viewProps)), footerRender]);
   },
   methods: {
     getViewComponentByName: function getViewComponentByName(viewName) {