framework7 6.3.16 → 7.0.0-beta.12

package/{esm/components → components}/calendar/calendar-class.js

@@ -1,124 +1,104 @@
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
-
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; _setPrototypeOf(subClass, superClass); }
-
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
-import { extend, nextTick, deleteProps } from '../../shared/utils';
-import Framework7Class from '../../shared/class';
-import $ from '../../shared/dom7';
-import { getDevice } from '../../shared/get-device';
-import { getSupport } from '../../shared/get-support';
+import { extend, nextTick, deleteProps } from '../../shared/utils.js';
+import Framework7Class from '../../shared/class.js';
+import $ from '../../shared/dom7.js';
+import { getDevice } from '../../shared/get-device.js';
+import { getSupport } from '../../shared/get-support.js';
 /** @jsx $jsx */
 
-import $jsx from '../../shared/$jsx';
-
-var Calendar = /*#__PURE__*/function (_Framework7Class) {
-  _inheritsLoose(Calendar, _Framework7Class);
-
-  function Calendar(app, params) {
-    var _this;
-
-    if (params === void 0) {
-      params = {};
-    }
-
-    _this = _Framework7Class.call(this, params, [app]) || this;
-
-    var calendar = _assertThisInitialized(_this);
+import $jsx from '../../shared/$jsx.js';
 
+class Calendar extends Framework7Class {
+  constructor(app, params = {}) {
+    super(params, [app]);
+    const calendar = this;
     calendar.params = extend({}, app.params.calendar, params);
-    var $containerEl;
+    let $containerEl;
 
     if (calendar.params.containerEl) {
       $containerEl = $(calendar.params.containerEl);
-      if ($containerEl.length === 0) return calendar || _assertThisInitialized(_this);
+      if ($containerEl.length === 0) return calendar;
     }
 
-    var $inputEl;
+    let $inputEl;
 
     if (calendar.params.inputEl) {
       $inputEl = $(calendar.params.inputEl);
     }
 
-    var isHorizontal = calendar.params.direction === 'horizontal';
-    var inverter = 1;
+    const isHorizontal = calendar.params.direction === 'horizontal';
+    let inverter = 1;
 
     if (isHorizontal) {
       inverter = app.rtl ? -1 : 1;
     }
 
     extend(calendar, {
-      app: app,
-      $containerEl: $containerEl,
+      app,
+      $containerEl,
       containerEl: $containerEl && $containerEl[0],
       inline: $containerEl && $containerEl.length > 0,
-      $inputEl: $inputEl,
+      $inputEl,
       inputEl: $inputEl && $inputEl[0],
       initialized: false,
       opened: false,
       url: calendar.params.url,
-      isHorizontal: isHorizontal,
-      inverter: inverter,
+      isHorizontal,
+      inverter,
       animating: false,
       allowTouchMove: true,
       hasTimePicker: calendar.params.timePicker && !calendar.params.rangePicker && !calendar.params.multiple
     });
 
-    calendar.dayFormatter = function (date) {
-      var formatter = new Intl.DateTimeFormat(calendar.params.locale, {
+    calendar.dayFormatter = date => {
+      const formatter = new Intl.DateTimeFormat(calendar.params.locale, {
         day: 'numeric'
       });
       return formatter.format(date).replace(/日/, '');
     };
 
-    calendar.monthFormatter = function (date) {
-      var formatter = new Intl.DateTimeFormat(calendar.params.locale, {
+    calendar.monthFormatter = date => {
+      const formatter = new Intl.DateTimeFormat(calendar.params.locale, {
         month: 'long'
       });
       return formatter.format(date);
     };
 
-    calendar.yearFormatter = function (date) {
-      var formatter = new Intl.DateTimeFormat(calendar.params.locale, {
+    calendar.yearFormatter = date => {
+      const formatter = new Intl.DateTimeFormat(calendar.params.locale, {
         year: 'numeric'
       });
       return formatter.format(date);
     };
 
-    calendar.timeSelectorFormatter = function (date) {
-      var formatter = new Intl.DateTimeFormat(calendar.params.locale, calendar.params.timePickerFormat);
+    calendar.timeSelectorFormatter = date => {
+      const formatter = new Intl.DateTimeFormat(calendar.params.locale, calendar.params.timePickerFormat);
       return formatter.format(date);
     };
 
-    var timeFormatCheckDate = calendar.timeSelectorFormatter(new Date()).toLowerCase();
+    const timeFormatCheckDate = calendar.timeSelectorFormatter(new Date()).toLowerCase();
     calendar.is12HoursFormat = timeFormatCheckDate.indexOf('pm') >= 0 || timeFormatCheckDate.indexOf('am') >= 0; // Auto names
 
-    var _calendar$params = calendar.params,
-        monthNames = _calendar$params.monthNames,
-        monthNamesShort = _calendar$params.monthNamesShort,
-        dayNames = _calendar$params.dayNames,
-        dayNamesShort = _calendar$params.dayNamesShort;
-
-    var _calendar$getIntlName = calendar.getIntlNames(),
-        monthNamesIntl = _calendar$getIntlName.monthNamesIntl,
-        monthNamesShortIntl = _calendar$getIntlName.monthNamesShortIntl,
-        dayNamesIntl = _calendar$getIntlName.dayNamesIntl,
-        dayNamesShortIntl = _calendar$getIntlName.dayNamesShortIntl;
-
+    let {
+      monthNames,
+      monthNamesShort,
+      dayNames,
+      dayNamesShort
+    } = calendar.params;
+    const {
+      monthNamesIntl,
+      monthNamesShortIntl,
+      dayNamesIntl,
+      dayNamesShortIntl
+    } = calendar.getIntlNames();
     if (monthNames === 'auto') monthNames = monthNamesIntl;
     if (monthNamesShort === 'auto') monthNamesShort = monthNamesShortIntl;
     if (dayNames === 'auto') dayNames = dayNamesIntl;
     if (dayNamesShort === 'auto') dayNamesShort = dayNamesShortIntl;
     extend(calendar, {
-      monthNames: monthNames,
-      monthNamesShort: monthNamesShort,
-      dayNames: dayNames,
-      dayNamesShort: dayNamesShort
+      monthNames,
+      monthNamesShort,
+      dayNames,
+      dayNamesShort
     });
 
     function onInputClick() {
@@ -138,11 +118,12 @@ var Calendar = /*#__PURE__*/function (_Framework7Class) {
     }
 
     function onHtmlClick(e) {
-      var $targetEl = $(e.target);
+      const $targetEl = $(e.target);
       if (calendar.destroyed || !calendar.params) return;
       if (calendar.isPopover()) return;
       if (!calendar.opened || calendar.closing) return;
       if ($targetEl.closest('[class*="backdrop"]').length) return;
+      if (calendar.monthPickerPopover || calendar.yearPickerPopover || calendar.timePickerPopover) return;
 
       if ($inputEl && $inputEl.length > 0) {
         if ($targetEl[0] !== $inputEl[0] && $targetEl.closest('.sheet-modal, .calendar-modal').length === 0) {
@@ -155,7 +136,7 @@ var Calendar = /*#__PURE__*/function (_Framework7Class) {
 
 
     extend(calendar, {
-      attachInputEvents: function attachInputEvents() {
+      attachInputEvents() {
         calendar.$inputEl.on('click', onInputClick);
         calendar.$inputEl.on('input:clear', onInputClear);
 
@@ -167,7 +148,8 @@ var Calendar = /*#__PURE__*/function (_Framework7Class) {
           }
         }
       },
-      detachInputEvents: function detachInputEvents() {
+
+      detachInputEvents() {
         calendar.$inputEl.off('click', onInputClick);
         calendar.$inputEl.off('input:clear', onInputClear);
 
@@ -179,32 +161,37 @@ var Calendar = /*#__PURE__*/function (_Framework7Class) {
           }
         }
       },
-      attachHtmlEvents: function attachHtmlEvents() {
+
+      attachHtmlEvents() {
         app.on('click', onHtmlClick);
       },
-      detachHtmlEvents: function detachHtmlEvents() {
+
+      detachHtmlEvents() {
         app.off('click', onHtmlClick);
       }
+
     });
 
     calendar.attachCalendarEvents = function attachCalendarEvents() {
-      var allowItemClick = true;
-      var isTouched;
-      var isMoved;
-      var touchStartX;
-      var touchStartY;
-      var touchCurrentX;
-      var touchCurrentY;
-      var touchStartTime;
-      var touchEndTime;
-      var currentTranslate;
-      var wrapperWidth;
-      var wrapperHeight;
-      var percentage;
-      var touchesDiff;
-      var isScrolling;
-      var $el = calendar.$el,
-          $wrapperEl = calendar.$wrapperEl;
+      let allowItemClick = true;
+      let isTouched;
+      let isMoved;
+      let touchStartX;
+      let touchStartY;
+      let touchCurrentX;
+      let touchCurrentY;
+      let touchStartTime;
+      let touchEndTime;
+      let currentTranslate;
+      let wrapperWidth;
+      let wrapperHeight;
+      let percentage;
+      let touchesDiff;
+      let isScrolling;
+      const {
+        $el,
+        $wrapperEl
+      } = calendar;
 
       function handleTouchStart(e) {
         if (isMoved || isTouched) return;
@@ -222,7 +209,9 @@ var Calendar = /*#__PURE__*/function (_Framework7Class) {
 
       function handleTouchMove(e) {
         if (!isTouched) return;
-        var isH = calendar.isHorizontal;
+        const {
+          isHorizontal: isH
+        } = calendar;
         touchCurrentX = e.type === 'touchmove' ? e.targetTouches[0].pageX : e.pageX;
         touchCurrentY = e.type === 'touchmove' ? e.targetTouches[0].pageY : e.pageY;
 
@@ -256,7 +245,7 @@ var Calendar = /*#__PURE__*/function (_Framework7Class) {
         percentage = touchesDiff / (isH ? wrapperWidth : wrapperHeight);
         currentTranslate = (calendar.monthsTranslate * calendar.inverter + percentage) * 100; // Transform wrapper
 
-        $wrapperEl.transform("translate3d(" + (isH ? currentTranslate : 0) + "%, " + (isH ? 0 : currentTranslate) + "%, 0)");
+        $wrapperEl.transform(`translate3d(${isH ? currentTranslate : 0}%, ${isH ? 0 : currentTranslate}%, 0)`);
       }
 
       function handleTouchEnd() {
@@ -285,14 +274,14 @@ var Calendar = /*#__PURE__*/function (_Framework7Class) {
         } // Allow click
 
 
-        setTimeout(function () {
+        setTimeout(() => {
           allowItemClick = true;
         }, 100);
       }
 
       function handleDayClick(e) {
         if (!allowItemClick) return;
-        var $dayEl = $(e.target).parents('.calendar-day');
+        let $dayEl = $(e.target).parents('.calendar-day');
 
         if ($dayEl.length === 0 && $(e.target).hasClass('calendar-day')) {
           $dayEl = $(e.target);
@@ -306,13 +295,13 @@ var Calendar = /*#__PURE__*/function (_Framework7Class) {
           if ($dayEl.hasClass('calendar-day-prev')) calendar.prevMonth();
         }
 
-        var dateYear = parseInt($dayEl.attr('data-year'), 10);
-        var dateMonth = parseInt($dayEl.attr('data-month'), 10);
-        var dateDay = parseInt($dayEl.attr('data-day'), 10);
+        const dateYear = parseInt($dayEl.attr('data-year'), 10);
+        const dateMonth = parseInt($dayEl.attr('data-month'), 10);
+        const dateDay = parseInt($dayEl.attr('data-day'), 10);
         calendar.emit('local::dayClick calendarDayClick', calendar, $dayEl[0], dateYear, dateMonth, dateDay);
 
         if (!$dayEl.hasClass('calendar-day-selected') || calendar.params.multiple || calendar.params.rangePicker) {
-          var valueToAdd = new Date(dateYear, dateMonth, dateDay, 0, 0, 0);
+          const valueToAdd = new Date(dateYear, dateMonth, dateDay, 0, 0, 0);
 
           if (calendar.hasTimePicker) {
             if (calendar.value && calendar.value[0]) {
@@ -349,62 +338,18 @@ var Calendar = /*#__PURE__*/function (_Framework7Class) {
       }
 
       function onMonthSelectorClick() {
-        $el.append(calendar.renderMonthPicker());
-      }
-
-      function onMonthSelectorItemClick() {
-        var $clickedEl = $(this);
-
-        if ($clickedEl.hasClass('calendar-month-picker-item-current')) {
-          $el.find('.calendar-month-picker').remove();
-          return;
-        }
-
-        $el.find('.calendar-month-picker-item-current').add($clickedEl).toggleClass('calendar-month-picker-item-current');
-        var index = $clickedEl.index();
-        var localeMonthIndex = parseInt(calendar.$el.find('.calendar-month-current').attr('data-locale-month'), 10);
-        var monthIndex = calendar.currentMonth;
-        var diff = localeMonthIndex - monthIndex;
-        var diffIndex = index - diff;
-        calendar.setYearMonth(calendar.currentYear, diffIndex, 0);
-        setTimeout(function () {
-          $el.find('.calendar-month-picker').remove();
-        }, 200);
+        calendar.openMonthPicker();
       }
 
       function onYearSelectorClick() {
-        $el.append(calendar.renderYearPicker());
-        var $currentEl = $el.find('.calendar-year-picker-item-current');
-        var $yearPickerEl = $el.find('.calendar-year-picker');
-        if (!$currentEl || !$currentEl.length) return;
-        $yearPickerEl.scrollTop($currentEl[0].offsetTop - $yearPickerEl[0].offsetHeight / 2 + $currentEl[0].offsetHeight / 2);
-      }
-
-      function onYearSelectorItemClick() {
-        var $clickedEl = $(this);
-
-        if ($clickedEl.hasClass('calendar-year-picker-item-current')) {
-          $el.find('.calendar-year-picker').remove();
-          return;
-        }
-
-        $el.find('.calendar-year-picker-item-current').add($clickedEl).toggleClass('calendar-year-picker-item-current');
-        var year = parseInt($clickedEl.attr('data-year'), 10);
-        calendar.setYearMonth(year, undefined, 0);
-        setTimeout(function () {
-          $el.find('.calendar-year-picker').remove();
-        }, 200);
+        calendar.openYearPicker();
       }
 
       function onTimeSelectorClick() {
         calendar.openTimePicker();
       }
 
-      function onTimePickerCloseClick() {
-        calendar.closeTimePicker();
-      }
-
-      var passiveListener = app.touchEvents.start === 'touchstart' && getSupport().passiveListener ? {
+      const passiveListener = app.touchEvents.start === 'touchstart' && getSupport().passiveListener ? {
         passive: true,
         capture: false
       } : false; // Selectors clicks
@@ -416,17 +361,14 @@ var Calendar = /*#__PURE__*/function (_Framework7Class) {
 
       if (calendar.params.monthPicker) {
         $el.find('.current-month-value').on('click', onMonthSelectorClick);
-        $el.on('click', '.calendar-month-picker-item', onMonthSelectorItemClick);
       }
 
       if (calendar.params.yearPicker) {
         $el.find('.current-year-value').on('click', onYearSelectorClick);
-        $el.on('click', '.calendar-year-picker-item', onYearSelectorItemClick);
       }
 
       if (calendar.hasTimePicker) {
         $el.find('.calendar-time-selector a').on('click', onTimeSelectorClick);
-        $el.on('click', '.calendar-time-picker-close', onTimePickerCloseClick);
       } // Day clicks
 
 
@@ -446,17 +388,14 @@ var Calendar = /*#__PURE__*/function (_Framework7Class) {
 
         if (calendar.params.monthPicker) {
           $el.find('.current-month-value').off('click', onMonthSelectorClick);
-          $el.off('click', '.calendar-month-picker-item', onMonthSelectorItemClick);
         }
 
         if (calendar.params.yearPicker) {
           $el.find('.current-year-value').off('click', onYearSelectorClick);
-          $el.off('click', '.calendar-year-picker-item', onYearSelectorItemClick);
         }
 
         if (calendar.hasTimePicker) {
           $el.find('.calendar-time-selector a').off('click', onTimeSelectorClick);
-          $el.off('click', '.calendar-time-picker-close', onTimePickerCloseClick);
         }
 
         $wrapperEl.off('click', handleDayClick);
@@ -470,37 +409,53 @@ var Calendar = /*#__PURE__*/function (_Framework7Class) {
     };
 
     calendar.init();
-    return calendar || _assertThisInitialized(_this);
+    return calendar;
   }
 
-  var _proto = Calendar.prototype;
+  get view() {
+    const {
+      $inputEl,
+      app,
+      params
+    } = this;
+    let view;
 
-  _proto.getIntlNames = function getIntlNames() {
-    var calendar = this;
-    var locale = calendar.params.locale;
-    var monthNamesIntl = [];
-    var monthNamesShortIntl = [];
-    var dayNamesIntl = [];
-    var dayNamesShortIntl = [];
-    var formatterMonthNames = new Intl.DateTimeFormat(locale, {
+    if (params.view) {
+      view = params.view;
+    } else if ($inputEl) {
+      view = $inputEl.parents('.view').length && $inputEl.parents('.view')[0].f7View;
+    }
+
+    if (!view) view = app.views.main;
+    return view;
+  }
+
+  getIntlNames() {
+    const calendar = this;
+    const locale = calendar.params.locale;
+    const monthNamesIntl = [];
+    const monthNamesShortIntl = [];
+    const dayNamesIntl = [];
+    const dayNamesShortIntl = [];
+    const formatterMonthNames = new Intl.DateTimeFormat(locale, {
       month: 'long'
     });
-    var formatterMonthNamesShort = new Intl.DateTimeFormat(locale, {
+    const formatterMonthNamesShort = new Intl.DateTimeFormat(locale, {
       month: 'short'
     });
-    var formatterDayNames = new Intl.DateTimeFormat(locale, {
+    const formatterDayNames = new Intl.DateTimeFormat(locale, {
       weekday: 'long'
     });
-    var formatterDayNamesShort = new Intl.DateTimeFormat(locale, {
+    const formatterDayNamesShort = new Intl.DateTimeFormat(locale, {
       weekday: 'short'
     });
-    var year;
-    var yearStarted;
-    var yearEnded;
+    let year;
+    let yearStarted;
+    let yearEnded;
 
-    for (var i = 0; i < 24; i += 1) {
-      var date = new Date().setMonth(i, 1);
-      var currentYear = calendar.yearFormatter(date);
+    for (let i = 0; i < 24; i += 1) {
+      const date = new Date().setMonth(i, 1);
+      const currentYear = calendar.yearFormatter(date);
 
       if (year && currentYear !== year) {
         if (yearStarted) yearEnded = true;
@@ -518,59 +473,58 @@ var Calendar = /*#__PURE__*/function (_Framework7Class) {
       }
     }
 
-    var weekDay = new Date().getDay();
-
-    for (var _i = 0; _i < 7; _i += 1) {
-      var _date = new Date().getTime() + (_i - weekDay) * 24 * 60 * 60 * 1000;
+    const weekDay = new Date().getDay();
 
-      dayNamesIntl.push(formatterDayNames.format(_date));
-      dayNamesShortIntl.push(formatterDayNamesShort.format(_date));
+    for (let i = 0; i < 7; i += 1) {
+      const date = new Date().getTime() + (i - weekDay) * 24 * 60 * 60 * 1000;
+      dayNamesIntl.push(formatterDayNames.format(date));
+      dayNamesShortIntl.push(formatterDayNamesShort.format(date));
     }
 
     return {
-      monthNamesIntl: monthNamesIntl,
-      monthNamesShortIntl: monthNamesShortIntl,
-      dayNamesIntl: dayNamesIntl,
-      dayNamesShortIntl: dayNamesShortIntl
+      monthNamesIntl,
+      monthNamesShortIntl,
+      dayNamesIntl,
+      dayNamesShortIntl
     };
-  };
+  }
 
-  _proto.normalizeDate = function normalizeDate(date) {
-    var calendar = this;
-    var d = new Date(date);
+  normalizeDate(date) {
+    const calendar = this;
+    const d = new Date(date);
 
     if (calendar.hasTimePicker) {
       return new Date(d.getFullYear(), d.getMonth(), d.getDate(), d.getHours(), d.getMinutes());
     }
 
     return new Date(d.getFullYear(), d.getMonth(), d.getDate());
-  };
+  }
 
-  _proto.normalizeValues = function normalizeValues(values) {
-    var calendar = this;
-    var newValues = [];
+  normalizeValues(values) {
+    const calendar = this;
+    let newValues = [];
 
     if (values && Array.isArray(values)) {
-      newValues = values.map(function (val) {
-        return calendar.normalizeDate(val);
-      });
+      newValues = values.map(val => calendar.normalizeDate(val));
     }
 
     return newValues;
-  };
+  }
 
-  _proto.initInput = function initInput() {
-    var calendar = this;
+  initInput() {
+    const calendar = this;
     if (!calendar.$inputEl) return;
     if (calendar.params.inputReadOnly) calendar.$inputEl.prop('readOnly', true);
-  };
-
-  _proto.isPopover = function isPopover() {
-    var calendar = this;
-    var app = calendar.app,
-        modal = calendar.modal,
-        params = calendar.params;
-    var device = getDevice();
+  }
+
+  isPopover() {
+    const calendar = this;
+    const {
+      app,
+      modal,
+      params
+    } = calendar;
+    const device = getDevice();
     if (params.openIn === 'sheet') return false;
     if (modal && modal.type !== 'popover') return false;
 
@@ -591,30 +545,33 @@ var Calendar = /*#__PURE__*/function (_Framework7Class) {
     }
 
     return false;
-  };
-
-  _proto.formatDate = function formatDate(d) {
-    var calendar = this;
-    var date = new Date(d);
-    var year = date.getFullYear();
-    var month = date.getMonth();
-    var month1 = month + 1;
-    var day = date.getDate();
-    var weekDay = date.getDay();
-    var monthNames = calendar.monthNames,
-        monthNamesShort = calendar.monthNamesShort,
-        dayNames = calendar.dayNames,
-        dayNamesShort = calendar.dayNamesShort;
-    var _calendar$params2 = calendar.params,
-        dateFormat = _calendar$params2.dateFormat,
-        locale = _calendar$params2.locale;
+  }
+
+  formatDate(d) {
+    const calendar = this;
+    const date = new Date(d);
+    const year = date.getFullYear();
+    const month = date.getMonth();
+    const month1 = month + 1;
+    const day = date.getDate();
+    const weekDay = date.getDay();
+    const {
+      monthNames,
+      monthNamesShort,
+      dayNames,
+      dayNamesShort
+    } = calendar;
+    const {
+      dateFormat,
+      locale
+    } = calendar.params;
 
     function twoDigits(number) {
-      return number < 10 ? "0" + number : number;
+      return number < 10 ? `0${number}` : number;
     }
 
     if (typeof dateFormat === 'string') {
-      var tokens = {
+      const tokens = {
         yyyy: year,
         yy: String(year).substring(2),
         mm: twoDigits(month1),
@@ -628,13 +585,13 @@ var Calendar = /*#__PURE__*/function (_Framework7Class) {
       };
 
       if (calendar.params.timePicker) {
-        var hours = date.getHours();
-        var minutes = date.getMinutes();
-        var seconds = date.getSeconds();
-        var hours12 = hours;
+        const hours = date.getHours();
+        const minutes = date.getMinutes();
+        const seconds = date.getSeconds();
+        let hours12 = hours;
         if (hours > 12) hours12 = hours - 12;
         if (hours === 0) hours12 = 12;
-        var a = hours >= 12 && hours !== 0 ? 'pm' : 'am';
+        const a = hours >= 12 && hours !== 0 ? 'pm' : 'am';
         Object.assign(tokens, {
           HH: twoDigits(hours),
           H: hours,
@@ -644,15 +601,13 @@ var Calendar = /*#__PURE__*/function (_Framework7Class) {
           s: seconds,
           ':mm': twoDigits(minutes),
           ':m': minutes,
-          a: a,
+          a,
           A: a.toUpperCase()
         });
       }
 
-      var regexp = new RegExp(Object.keys(tokens).map(function (t) {
-        return "(" + t + ")";
-      }).join('|'), 'g');
-      return dateFormat.replace(regexp, function (token) {
+      const regexp = new RegExp(Object.keys(tokens).map(t => `(${t})`).join('|'), 'g');
+      return dateFormat.replace(regexp, token => {
         if (token in tokens) return tokens[token];
         return token;
       });
@@ -663,36 +618,37 @@ var Calendar = /*#__PURE__*/function (_Framework7Class) {
     } // Intl Object
 
 
-    var formatter = new Intl.DateTimeFormat(locale, dateFormat);
+    const formatter = new Intl.DateTimeFormat(locale, dateFormat);
     return formatter.format(date);
-  };
+  }
 
-  _proto.formatValue = function formatValue() {
-    var calendar = this;
-    var value = calendar.value;
+  formatValue() {
+    const calendar = this;
+    const {
+      value
+    } = calendar;
 
     if (calendar.params.formatValue) {
       return calendar.params.formatValue.call(calendar, value);
     }
 
-    return value.map(function (v) {
-      return calendar.formatDate(v);
-    }).join(calendar.params.rangePicker ? ' - ' : ', ');
-  };
+    return value.map(v => calendar.formatDate(v)).join(calendar.params.rangePicker ? ' - ' : ', ');
+  }
 
-  _proto.addValue = function addValue(newValue) {
-    var calendar = this;
-    var _calendar$params3 = calendar.params,
-        multiple = _calendar$params3.multiple,
-        rangePicker = _calendar$params3.rangePicker,
-        rangePickerMinDays = _calendar$params3.rangePickerMinDays,
-        rangePickerMaxDays = _calendar$params3.rangePickerMaxDays;
+  addValue(newValue) {
+    const calendar = this;
+    const {
+      multiple,
+      rangePicker,
+      rangePickerMinDays,
+      rangePickerMaxDays
+    } = calendar.params;
 
     if (multiple) {
       if (!calendar.value) calendar.value = [];
-      var inValuesIndex;
+      let inValuesIndex;
 
-      for (var i = 0; i < calendar.value.length; i += 1) {
+      for (let i = 0; i < calendar.value.length; i += 1) {
         if (new Date(newValue).getTime() === new Date(calendar.value[i]).getTime()) {
           inValuesIndex = i;
         }
@@ -713,23 +669,21 @@ var Calendar = /*#__PURE__*/function (_Framework7Class) {
       }
 
       if (calendar.value.length === 0 || Math.abs(calendar.value[0].getTime() - newValue.getTime()) >= (rangePickerMinDays - 1) * 60 * 60 * 24 * 1000 && (rangePickerMaxDays === 0 || Math.abs(calendar.value[0].getTime() - newValue.getTime()) <= (rangePickerMaxDays - 1) * 60 * 60 * 24 * 1000)) calendar.value.push(newValue);else calendar.value = [];
-      calendar.value.sort(function (a, b) {
-        return a - b;
-      });
+      calendar.value.sort((a, b) => a - b);
       calendar.updateValue();
     } else {
       calendar.value = [newValue];
       calendar.updateValue();
     }
-  };
+  }
 
-  _proto.setValue = function setValue(values) {
-    var calendar = this;
-    var currentValue = calendar.value;
+  setValue(values) {
+    const calendar = this;
+    const currentValue = calendar.value;
 
     if (Array.isArray(currentValue) && Array.isArray(values) && currentValue.length === values.length) {
-      var equal = true;
-      currentValue.forEach(function (v, index) {
+      let equal = true;
+      currentValue.forEach((v, index) => {
         if (v !== values[index]) equal = false;
       });
       if (equal) return;
@@ -737,33 +691,35 @@ var Calendar = /*#__PURE__*/function (_Framework7Class) {
 
     calendar.value = values;
     calendar.updateValue();
-  };
+  }
 
-  _proto.getValue = function getValue() {
-    var calendar = this;
+  getValue() {
+    const calendar = this;
     return calendar.value;
-  };
+  }
 
-  _proto.updateValue = function updateValue(onlyHeader) {
-    var calendar = this;
-    var $el = calendar.$el,
-        $wrapperEl = calendar.$wrapperEl,
-        $inputEl = calendar.$inputEl,
-        value = calendar.value,
-        params = calendar.params;
-    var i;
+  updateValue(onlyHeader) {
+    const calendar = this;
+    const {
+      $el,
+      $wrapperEl,
+      $inputEl,
+      value,
+      params
+    } = calendar;
+    let i;
 
     if ($el && $el.length > 0) {
       $wrapperEl.find('.calendar-day-selected').removeClass('calendar-day-selected calendar-day-selected-range calendar-day-selected-left calendar-day-selected-right');
-      var valueDate;
+      let valueDate;
 
       if (params.rangePicker && value.length === 2) {
-        var leftDate = new Date(value[0]).getTime();
-        var rightDate = new Date(value[1]).getTime();
+        const leftDate = new Date(value[0]).getTime();
+        const rightDate = new Date(value[1]).getTime();
 
         for (i = leftDate; i <= rightDate; i += 24 * 60 * 60 * 1000) {
           valueDate = new Date(i);
-          var addClass = 'calendar-day-selected';
+          let addClass = 'calendar-day-selected';
 
           if (leftDate !== rightDate) {
             if (i !== leftDate && i !== rightDate) {
@@ -779,17 +735,17 @@ var Calendar = /*#__PURE__*/function (_Framework7Class) {
             }
           }
 
-          $wrapperEl.find(".calendar-day[data-date=\"" + valueDate.getFullYear() + "-" + valueDate.getMonth() + "-" + valueDate.getDate() + "\"]").addClass(addClass);
+          $wrapperEl.find(`.calendar-day[data-date="${valueDate.getFullYear()}-${valueDate.getMonth()}-${valueDate.getDate()}"]`).addClass(addClass);
         }
 
         valueDate = new Date(leftDate);
-        $wrapperEl.find(".calendar-day[data-date=\"" + valueDate.getFullYear() + "-" + valueDate.getMonth() + "-" + valueDate.getDate() + "\"]").removeClass('calendar-day-selected-range').addClass('calendar-day-selected calendar-day-selected-left');
+        $wrapperEl.find(`.calendar-day[data-date="${valueDate.getFullYear()}-${valueDate.getMonth()}-${valueDate.getDate()}"]`).removeClass('calendar-day-selected-range').addClass('calendar-day-selected calendar-day-selected-left');
         valueDate = new Date(rightDate);
-        $wrapperEl.find(".calendar-day[data-date=\"" + valueDate.getFullYear() + "-" + valueDate.getMonth() + "-" + valueDate.getDate() + "\"]").removeClass('calendar-day-selected-range').addClass('calendar-day-selected calendar-day-selected-right');
+        $wrapperEl.find(`.calendar-day[data-date="${valueDate.getFullYear()}-${valueDate.getMonth()}-${valueDate.getDate()}"]`).removeClass('calendar-day-selected-range').addClass('calendar-day-selected calendar-day-selected-right');
       } else {
         for (i = 0; i < calendar.value.length; i += 1) {
           valueDate = new Date(value[i]);
-          $wrapperEl.find(".calendar-day[data-date=\"" + valueDate.getFullYear() + "-" + valueDate.getMonth() + "-" + valueDate.getDate() + "\"]").addClass('calendar-day-selected');
+          $wrapperEl.find(`.calendar-day[data-date="${valueDate.getFullYear()}-${valueDate.getMonth()}-${valueDate.getDate()}"]`).addClass('calendar-day-selected');
         }
       }
     }
@@ -803,7 +759,7 @@ var Calendar = /*#__PURE__*/function (_Framework7Class) {
     }
 
     if ($inputEl && $inputEl.length || params.header) {
-      var inputValue = calendar.formatValue(value);
+      const inputValue = calendar.formatValue(value);
 
       if (params.header && $el && $el.length) {
         $el.find('.calendar-selected-date').text(inputValue);
@@ -814,15 +770,17 @@ var Calendar = /*#__PURE__*/function (_Framework7Class) {
         $inputEl.trigger('change');
       }
     }
-  };
+  }
 
-  _proto.updateCurrentMonthYear = function updateCurrentMonthYear(dir) {
-    var calendar = this;
-    var $months = calendar.$months,
-        $el = calendar.$el,
-        monthNames = calendar.monthNames;
-    var currentLocaleMonth;
-    var currentLocaleYear;
+  updateCurrentMonthYear(dir) {
+    const calendar = this;
+    const {
+      $months,
+      $el,
+      monthNames
+    } = calendar;
+    let currentLocaleMonth;
+    let currentLocaleYear;
 
     if (typeof dir === 'undefined') {
       calendar.currentMonth = parseInt($months.eq(1).attr('data-month'), 10);
@@ -838,49 +796,55 @@ var Calendar = /*#__PURE__*/function (_Framework7Class) {
 
     $el.find('.current-month-value').text(monthNames[currentLocaleMonth]);
     $el.find('.current-year-value').text(currentLocaleYear);
-  };
-
-  _proto.update = function update() {
-    var calendar = this;
-    var currentYear = calendar.currentYear,
-        currentMonth = calendar.currentMonth,
-        $wrapperEl = calendar.$wrapperEl;
-    var currentDate = new Date(currentYear, currentMonth);
-    var prevMonthHtml = calendar.renderMonth(currentDate, 'prev');
-    var currentMonthHtml = calendar.renderMonth(currentDate);
-    var nextMonthHtml = calendar.renderMonth(currentDate, 'next');
-    $wrapperEl.transition(0).html("" + prevMonthHtml + currentMonthHtml + nextMonthHtml).transform('translate3d(0,0,0)');
+  }
+
+  update() {
+    const calendar = this;
+    const {
+      currentYear,
+      currentMonth,
+      $wrapperEl
+    } = calendar;
+    const currentDate = new Date(currentYear, currentMonth);
+    const prevMonthHtml = calendar.renderMonth(currentDate, 'prev');
+    const currentMonthHtml = calendar.renderMonth(currentDate);
+    const nextMonthHtml = calendar.renderMonth(currentDate, 'next');
+    $wrapperEl.transition(0).html(`${prevMonthHtml}${currentMonthHtml}${nextMonthHtml}`).transform('translate3d(0,0,0)');
     calendar.$months = $wrapperEl.find('.calendar-month');
     calendar.monthsTranslate = 0;
     calendar.setMonthsTranslate();
-    calendar.$months.each(function (monthEl) {
+    calendar.$months.each(monthEl => {
       calendar.emit('local::monthAdd calendarMonthAdd', monthEl);
     });
-  };
+  }
 
-  _proto.onMonthChangeStart = function onMonthChangeStart(dir) {
-    var calendar = this;
-    var $months = calendar.$months,
-        currentYear = calendar.currentYear,
-        currentMonth = calendar.currentMonth;
+  onMonthChangeStart(dir) {
+    const calendar = this;
+    const {
+      $months,
+      currentYear,
+      currentMonth
+    } = calendar;
     calendar.updateCurrentMonthYear(dir);
     $months.removeClass('calendar-month-current calendar-month-prev calendar-month-next');
-    var currentIndex = dir === 'next' ? $months.length - 1 : 0;
+    const currentIndex = dir === 'next' ? $months.length - 1 : 0;
     $months.eq(currentIndex).addClass('calendar-month-current');
     $months.eq(dir === 'next' ? currentIndex - 1 : currentIndex + 1).addClass(dir === 'next' ? 'calendar-month-prev' : 'calendar-month-next');
     calendar.emit('local::monthYearChangeStart calendarMonthYearChangeStart', calendar, currentYear, currentMonth);
-  };
-
-  _proto.onMonthChangeEnd = function onMonthChangeEnd(dir, rebuildBoth) {
-    var calendar = this;
-    var currentYear = calendar.currentYear,
-        currentMonth = calendar.currentMonth,
-        $wrapperEl = calendar.$wrapperEl,
-        monthsTranslate = calendar.monthsTranslate;
+  }
+
+  onMonthChangeEnd(dir, rebuildBoth) {
+    const calendar = this;
+    const {
+      currentYear,
+      currentMonth,
+      $wrapperEl,
+      monthsTranslate
+    } = calendar;
     calendar.animating = false;
-    var nextMonthHtml;
-    var prevMonthHtml;
-    var currentMonthHtml;
+    let nextMonthHtml;
+    let prevMonthHtml;
+    let currentMonthHtml;
     $wrapperEl.find('.calendar-month:not(.calendar-month-prev):not(.calendar-month-current):not(.calendar-month-next)').remove();
 
     if (typeof dir === 'undefined') {
@@ -905,18 +869,20 @@ var Calendar = /*#__PURE__*/function (_Framework7Class) {
       $wrapperEl.prepend(currentMonthHtml || prevMonthHtml);
     }
 
-    var $months = $wrapperEl.find('.calendar-month');
+    const $months = $wrapperEl.find('.calendar-month');
     calendar.$months = $months;
     calendar.setMonthsTranslate(monthsTranslate);
     calendar.emit('local::monthAdd calendarMonthAdd', calendar, dir === 'next' ? $months.eq($months.length - 1)[0] : $months.eq(0)[0]);
     calendar.emit('local::monthYearChangeEnd calendarMonthYearChangeEnd', calendar, currentYear, currentMonth);
-  };
+  }
 
-  _proto.setMonthsTranslate = function setMonthsTranslate(translate) {
-    var calendar = this;
-    var $months = calendar.$months,
-        isH = calendar.isHorizontal,
-        inverter = calendar.inverter; // eslint-disable-next-line
+  setMonthsTranslate(translate) {
+    const calendar = this;
+    const {
+      $months,
+      isHorizontal: isH,
+      inverter
+    } = calendar; // eslint-disable-next-line
 
     translate = translate || calendar.monthsTranslate || 0;
 
@@ -925,20 +891,22 @@ var Calendar = /*#__PURE__*/function (_Framework7Class) {
     }
 
     $months.removeClass('calendar-month-current calendar-month-prev calendar-month-next');
-    var prevMonthTranslate = -(translate + 1) * 100 * inverter;
-    var currentMonthTranslate = -translate * 100 * inverter;
-    var nextMonthTranslate = -(translate - 1) * 100 * inverter;
-    $months.eq(0).transform("translate3d(" + (isH ? prevMonthTranslate : 0) + "%, " + (isH ? 0 : prevMonthTranslate) + "%, 0)").addClass('calendar-month-prev');
-    $months.eq(1).transform("translate3d(" + (isH ? currentMonthTranslate : 0) + "%, " + (isH ? 0 : currentMonthTranslate) + "%, 0)").addClass('calendar-month-current');
-    $months.eq(2).transform("translate3d(" + (isH ? nextMonthTranslate : 0) + "%, " + (isH ? 0 : nextMonthTranslate) + "%, 0)").addClass('calendar-month-next');
-  };
-
-  _proto.nextMonth = function nextMonth(transition) {
-    var calendar = this;
-    var params = calendar.params,
-        $wrapperEl = calendar.$wrapperEl,
-        inverter = calendar.inverter,
-        isH = calendar.isHorizontal;
+    const prevMonthTranslate = -(translate + 1) * 100 * inverter;
+    const currentMonthTranslate = -translate * 100 * inverter;
+    const nextMonthTranslate = -(translate - 1) * 100 * inverter;
+    $months.eq(0).transform(`translate3d(${isH ? prevMonthTranslate : 0}%, ${isH ? 0 : prevMonthTranslate}%, 0)`).addClass('calendar-month-prev');
+    $months.eq(1).transform(`translate3d(${isH ? currentMonthTranslate : 0}%, ${isH ? 0 : currentMonthTranslate}%, 0)`).addClass('calendar-month-current');
+    $months.eq(2).transform(`translate3d(${isH ? nextMonthTranslate : 0}%, ${isH ? 0 : nextMonthTranslate}%, 0)`).addClass('calendar-month-next');
+  }
+
+  nextMonth(transition) {
+    const calendar = this;
+    const {
+      params,
+      $wrapperEl,
+      inverter,
+      isHorizontal: isH
+    } = calendar;
 
     if (typeof transition === 'undefined' || typeof transition === 'object') {
       transition = ''; // eslint-disable-line
@@ -946,11 +914,11 @@ var Calendar = /*#__PURE__*/function (_Framework7Class) {
       if (!params.animate) transition = 0; // eslint-disable-line
     }
 
-    var nextMonth = parseInt(calendar.$months.eq(calendar.$months.length - 1).attr('data-month'), 10);
-    var nextYear = parseInt(calendar.$months.eq(calendar.$months.length - 1).attr('data-year'), 10);
-    var nextDate = new Date(nextYear, nextMonth);
-    var nextDateTime = nextDate.getTime();
-    var transitionEndCallback = !calendar.animating;
+    const nextMonth = parseInt(calendar.$months.eq(calendar.$months.length - 1).attr('data-month'), 10);
+    const nextYear = parseInt(calendar.$months.eq(calendar.$months.length - 1).attr('data-year'), 10);
+    const nextDate = new Date(nextYear, nextMonth);
+    const nextDateTime = nextDate.getTime();
+    const transitionEndCallback = !calendar.animating;
 
     if (params.maxDate) {
       if (nextDateTime > new Date(params.maxDate).getTime()) {
@@ -962,8 +930,8 @@ var Calendar = /*#__PURE__*/function (_Framework7Class) {
     calendar.monthsTranslate -= 1;
 
     if (nextMonth === calendar.currentMonth) {
-      var nextMonthTranslate = -calendar.monthsTranslate * 100 * inverter;
-      var nextMonthHtml = $(calendar.renderMonth(nextDateTime, 'next')).transform("translate3d(" + (isH ? nextMonthTranslate : 0) + "%, " + (isH ? 0 : nextMonthTranslate) + "%, 0)").addClass('calendar-month-next');
+      const nextMonthTranslate = -calendar.monthsTranslate * 100 * inverter;
+      const nextMonthHtml = $(calendar.renderMonth(nextDateTime, 'next')).transform(`translate3d(${isH ? nextMonthTranslate : 0}%, ${isH ? 0 : nextMonthTranslate}%, 0)`).addClass('calendar-month-next');
       $wrapperEl.append(nextMonthHtml[0]);
       calendar.$months = $wrapperEl.find('.calendar-month');
       calendar.emit('local::monthAdd calendarMonthAdd', calendar.$months.eq(calendar.$months.length - 1)[0]);
@@ -971,11 +939,11 @@ var Calendar = /*#__PURE__*/function (_Framework7Class) {
 
     calendar.animating = true;
     calendar.onMonthChangeStart('next');
-    var translate = calendar.monthsTranslate * 100 * inverter;
-    $wrapperEl.transition(transition).transform("translate3d(" + (isH ? translate : 0) + "%, " + (isH ? 0 : translate) + "%, 0)");
+    const translate = calendar.monthsTranslate * 100 * inverter;
+    $wrapperEl.transition(transition).transform(`translate3d(${isH ? translate : 0}%, ${isH ? 0 : translate}%, 0)`);
 
     if (transitionEndCallback) {
-      $wrapperEl.transitionEnd(function () {
+      $wrapperEl.transitionEnd(() => {
         calendar.onMonthChangeEnd('next');
       });
     }
@@ -983,14 +951,16 @@ var Calendar = /*#__PURE__*/function (_Framework7Class) {
     if (!params.animate) {
       calendar.onMonthChangeEnd('next');
     }
-  };
+  }
 
-  _proto.prevMonth = function prevMonth(transition) {
-    var calendar = this;
-    var params = calendar.params,
-        $wrapperEl = calendar.$wrapperEl,
-        inverter = calendar.inverter,
-        isH = calendar.isHorizontal;
+  prevMonth(transition) {
+    const calendar = this;
+    const {
+      params,
+      $wrapperEl,
+      inverter,
+      isHorizontal: isH
+    } = calendar;
 
     if (typeof transition === 'undefined' || typeof transition === 'object') {
       transition = ''; // eslint-disable-line
@@ -998,14 +968,14 @@ var Calendar = /*#__PURE__*/function (_Framework7Class) {
       if (!params.animate) transition = 0; // eslint-disable-line
     }
 
-    var prevMonth = parseInt(calendar.$months.eq(0).attr('data-month'), 10);
-    var prevYear = parseInt(calendar.$months.eq(0).attr('data-year'), 10);
-    var prevDate = new Date(prevYear, prevMonth + 1, -1);
-    var prevDateTime = prevDate.getTime();
-    var transitionEndCallback = !calendar.animating;
+    const prevMonth = parseInt(calendar.$months.eq(0).attr('data-month'), 10);
+    const prevYear = parseInt(calendar.$months.eq(0).attr('data-year'), 10);
+    const prevDate = new Date(prevYear, prevMonth + 1, -1);
+    const prevDateTime = prevDate.getTime();
+    const transitionEndCallback = !calendar.animating;
 
     if (params.minDate) {
-      var minDate = new Date(params.minDate);
+      let minDate = new Date(params.minDate);
       minDate = new Date(minDate.getFullYear(), minDate.getMonth(), 1);
 
       if (prevDateTime < minDate.getTime()) {
@@ -1017,8 +987,8 @@ var Calendar = /*#__PURE__*/function (_Framework7Class) {
     calendar.monthsTranslate += 1;
 
     if (prevMonth === calendar.currentMonth) {
-      var prevMonthTranslate = -calendar.monthsTranslate * 100 * inverter;
-      var prevMonthHtml = $(calendar.renderMonth(prevDateTime, 'prev')).transform("translate3d(" + (isH ? prevMonthTranslate : 0) + "%, " + (isH ? 0 : prevMonthTranslate) + "%, 0)").addClass('calendar-month-prev');
+      const prevMonthTranslate = -calendar.monthsTranslate * 100 * inverter;
+      const prevMonthHtml = $(calendar.renderMonth(prevDateTime, 'prev')).transform(`translate3d(${isH ? prevMonthTranslate : 0}%, ${isH ? 0 : prevMonthTranslate}%, 0)`).addClass('calendar-month-prev');
       $wrapperEl.prepend(prevMonthHtml[0]);
       calendar.$months = $wrapperEl.find('.calendar-month');
       calendar.emit('local::monthAdd calendarMonthAdd', calendar.$months.eq(0)[0]);
@@ -1026,11 +996,11 @@ var Calendar = /*#__PURE__*/function (_Framework7Class) {
 
     calendar.animating = true;
     calendar.onMonthChangeStart('prev');
-    var translate = calendar.monthsTranslate * 100 * inverter;
-    $wrapperEl.transition(transition).transform("translate3d(" + (isH ? translate : 0) + "%, " + (isH ? 0 : translate) + "%, 0)");
+    const translate = calendar.monthsTranslate * 100 * inverter;
+    $wrapperEl.transition(transition).transform(`translate3d(${isH ? translate : 0}%, ${isH ? 0 : translate}%, 0)`);
 
     if (transitionEndCallback) {
-      $wrapperEl.transitionEnd(function () {
+      $wrapperEl.transitionEnd(() => {
         calendar.onMonthChangeEnd('prev');
       });
     }
@@ -1038,29 +1008,29 @@ var Calendar = /*#__PURE__*/function (_Framework7Class) {
     if (!params.animate) {
       calendar.onMonthChangeEnd('prev');
     }
-  };
-
-  _proto.resetMonth = function resetMonth(transition) {
-    if (transition === void 0) {
-      transition = '';
-    }
+  }
 
-    var calendar = this;
-    var $wrapperEl = calendar.$wrapperEl,
-        inverter = calendar.inverter,
-        isH = calendar.isHorizontal,
-        monthsTranslate = calendar.monthsTranslate;
-    var translate = monthsTranslate * 100 * inverter;
-    $wrapperEl.transition(transition).transform("translate3d(" + (isH ? translate : 0) + "%, " + (isH ? 0 : translate) + "%, 0)");
+  resetMonth(transition = '') {
+    const calendar = this;
+    const {
+      $wrapperEl,
+      inverter,
+      isHorizontal: isH,
+      monthsTranslate
+    } = calendar;
+    const translate = monthsTranslate * 100 * inverter;
+    $wrapperEl.transition(transition).transform(`translate3d(${isH ? translate : 0}%, ${isH ? 0 : translate}%, 0)`);
   } // eslint-disable-next-line
-  ;
 
-  _proto.setYearMonth = function setYearMonth(year, month, transition) {
-    var calendar = this;
-    var params = calendar.params,
-        isH = calendar.isHorizontal,
-        $wrapperEl = calendar.$wrapperEl,
-        inverter = calendar.inverter; // eslint-disable-next-line
+
+  setYearMonth(year, month, transition) {
+    const calendar = this;
+    const {
+      params,
+      isHorizontal: isH,
+      $wrapperEl,
+      inverter
+    } = calendar; // eslint-disable-next-line
 
     if (typeof year === 'undefined') year = calendar.currentYear; // eslint-disable-next-line
 
@@ -1073,7 +1043,7 @@ var Calendar = /*#__PURE__*/function (_Framework7Class) {
       if (!params.animate) transition = 0;
     }
 
-    var targetDate;
+    let targetDate;
 
     if (year < calendar.currentYear) {
       targetDate = new Date(year, month + 1, -1).getTime();
@@ -1086,7 +1056,7 @@ var Calendar = /*#__PURE__*/function (_Framework7Class) {
     }
 
     if (params.minDate) {
-      var minDate = new Date(params.minDate);
+      let minDate = new Date(params.minDate);
       minDate = new Date(minDate.getFullYear(), minDate.getMonth(), 1);
 
       if (targetDate < minDate.getTime()) {
@@ -1094,13 +1064,13 @@ var Calendar = /*#__PURE__*/function (_Framework7Class) {
       }
     }
 
-    var currentDate = new Date(calendar.currentYear, calendar.currentMonth).getTime();
-    var dir = targetDate > currentDate ? 'next' : 'prev';
-    var newMonthHTML = calendar.renderMonth(new Date(year, month));
+    const currentDate = new Date(calendar.currentYear, calendar.currentMonth).getTime();
+    const dir = targetDate > currentDate ? 'next' : 'prev';
+    const newMonthHTML = calendar.renderMonth(new Date(year, month));
     calendar.monthsTranslate = calendar.monthsTranslate || 0;
-    var prevTranslate = calendar.monthsTranslate;
-    var monthTranslate;
-    var transitionEndCallback = !calendar.animating && transition !== 0;
+    const prevTranslate = calendar.monthsTranslate;
+    let monthTranslate;
+    const transitionEndCallback = !calendar.animating && transition !== 0;
 
     if (targetDate > currentDate) {
       // To next
@@ -1109,7 +1079,7 @@ var Calendar = /*#__PURE__*/function (_Framework7Class) {
       $wrapperEl.append(newMonthHTML);
       calendar.$months = $wrapperEl.find('.calendar-month');
       monthTranslate = -(prevTranslate - 1) * 100 * inverter;
-      calendar.$months.eq(calendar.$months.length - 1).transform("translate3d(" + (isH ? monthTranslate : 0) + "%, " + (isH ? 0 : monthTranslate) + "%, 0)").addClass('calendar-month-next');
+      calendar.$months.eq(calendar.$months.length - 1).transform(`translate3d(${isH ? monthTranslate : 0}%, ${isH ? 0 : monthTranslate}%, 0)`).addClass('calendar-month-next');
     } else {
       // To prev
       calendar.monthsTranslate += 1;
@@ -1117,17 +1087,17 @@ var Calendar = /*#__PURE__*/function (_Framework7Class) {
       $wrapperEl.prepend(newMonthHTML);
       calendar.$months = $wrapperEl.find('.calendar-month');
       monthTranslate = -(prevTranslate + 1) * 100 * inverter;
-      calendar.$months.eq(0).transform("translate3d(" + (isH ? monthTranslate : 0) + "%, " + (isH ? 0 : monthTranslate) + "%, 0)").addClass('calendar-month-prev');
+      calendar.$months.eq(0).transform(`translate3d(${isH ? monthTranslate : 0}%, ${isH ? 0 : monthTranslate}%, 0)`).addClass('calendar-month-prev');
     }
 
     calendar.emit('local::monthAdd calendarMonthAdd', dir === 'next' ? calendar.$months.eq(calendar.$months.length - 1)[0] : calendar.$months.eq(0)[0]);
     calendar.animating = true;
     calendar.onMonthChangeStart(dir);
-    var wrapperTranslate = calendar.monthsTranslate * 100 * inverter;
-    $wrapperEl.transition(transition).transform("translate3d(" + (isH ? wrapperTranslate : 0) + "%, " + (isH ? 0 : wrapperTranslate) + "%, 0)");
+    const wrapperTranslate = calendar.monthsTranslate * 100 * inverter;
+    $wrapperEl.transition(transition).transform(`translate3d(${isH ? wrapperTranslate : 0}%, ${isH ? 0 : wrapperTranslate}%, 0)`);
 
     if (transitionEndCallback) {
-      $wrapperEl.transitionEnd(function () {
+      $wrapperEl.transitionEnd(() => {
         calendar.onMonthChangeEnd(dir, true);
       });
     }
@@ -1135,22 +1105,22 @@ var Calendar = /*#__PURE__*/function (_Framework7Class) {
     if (!params.animate || transition === 0) {
       calendar.onMonthChangeEnd(dir, true);
     }
-  };
+  }
 
-  _proto.nextYear = function nextYear() {
-    var calendar = this;
+  nextYear() {
+    const calendar = this;
     calendar.setYearMonth(calendar.currentYear + 1);
-  };
+  }
 
-  _proto.prevYear = function prevYear() {
-    var calendar = this;
+  prevYear() {
+    const calendar = this;
     calendar.setYearMonth(calendar.currentYear - 1);
   } // eslint-disable-next-line
-  ;
 
-  _proto.dateInRange = function dateInRange(dayDate, range) {
-    var match = false;
-    var i;
+
+  dateInRange(dayDate, range) {
+    let match = false;
+    let i;
     if (!range) return false;
 
     if (Array.isArray(range)) {
@@ -1199,15 +1169,15 @@ var Calendar = /*#__PURE__*/function (_Framework7Class) {
 
     return match;
   } // eslint-disable-next-line
-  ;
 
-  _proto.daysInMonth = function daysInMonth(date) {
-    var d = new Date(date);
+
+  daysInMonth(date) {
+    const d = new Date(date);
     return new Date(d.getFullYear(), d.getMonth() + 1, 0).getDate();
-  };
+  }
 
-  _proto.renderMonths = function renderMonths(date) {
-    var calendar = this;
+  renderMonths(date) {
+    const calendar = this;
 
     if (calendar.params.renderMonths) {
       return calendar.params.renderMonths.call(calendar, date);
@@ -1216,23 +1186,25 @@ var Calendar = /*#__PURE__*/function (_Framework7Class) {
     return $jsx("div", {
       class: "calendar-months-wrapper"
     }, calendar.renderMonth(date, 'prev'), calendar.renderMonth(date), calendar.renderMonth(date, 'next'));
-  };
+  }
 
-  _proto.renderMonth = function renderMonth(d, offset) {
-    var calendar = this;
-    var params = calendar.params,
-        value = calendar.value;
+  renderMonth(d, offset) {
+    const calendar = this;
+    const {
+      params,
+      value
+    } = calendar;
 
     if (params.renderMonth) {
       return params.renderMonth.call(calendar, d, offset);
     }
 
-    var date = new Date(d);
-    var year = date.getFullYear();
-    var month = date.getMonth();
-    var localeMonth = calendar.monthNames.indexOf(calendar.monthFormatter(date));
+    let date = new Date(d);
+    let year = date.getFullYear();
+    let month = date.getMonth();
+    let localeMonth = calendar.monthNames.indexOf(calendar.monthFormatter(date));
     if (localeMonth < 0) localeMonth = month;
-    var localeYear = calendar.yearFormatter(date);
+    let localeYear = calendar.yearFormatter(date);
 
     if (offset === 'next') {
       if (month === 11) date = new Date(year + 1, 0);else date = new Date(year, month + 1, 1);
@@ -1250,43 +1222,43 @@ var Calendar = /*#__PURE__*/function (_Framework7Class) {
       localeYear = calendar.yearFormatter(date);
     }
 
-    var currentValues = [];
-    var today = new Date().setHours(0, 0, 0, 0);
-    var minDate = params.minDate ? new Date(params.minDate).getTime() : null;
-    var maxDate = params.maxDate ? new Date(params.maxDate).getTime() : null;
-    var rows = 6;
-    var cols = 7;
-    var daysInPrevMonth = calendar.daysInMonth(new Date(date.getFullYear(), date.getMonth()).getTime() - 10 * 24 * 60 * 60 * 1000);
-    var daysInMonth = calendar.daysInMonth(date);
-    var minDayNumber = params.firstDay === 6 ? 0 : 1;
-    var monthHtml = '';
-    var dayIndex = 0 + (params.firstDay - 1);
-    var disabled;
-    var hasEvents;
-    var firstDayOfMonthIndex = new Date(date.getFullYear(), date.getMonth()).getDay();
+    const currentValues = [];
+    const today = new Date().setHours(0, 0, 0, 0);
+    const minDate = params.minDate ? new Date(params.minDate).getTime() : null;
+    const maxDate = params.maxDate ? new Date(params.maxDate).getTime() : null;
+    const rows = 6;
+    const cols = 7;
+    const daysInPrevMonth = calendar.daysInMonth(new Date(date.getFullYear(), date.getMonth()).getTime() - 10 * 24 * 60 * 60 * 1000);
+    const daysInMonth = calendar.daysInMonth(date);
+    const minDayNumber = params.firstDay === 6 ? 0 : 1;
+    let monthHtml = '';
+    let dayIndex = 0 + (params.firstDay - 1);
+    let disabled;
+    let hasEvents;
+    let firstDayOfMonthIndex = new Date(date.getFullYear(), date.getMonth()).getDay();
     if (firstDayOfMonthIndex === 0) firstDayOfMonthIndex = 7;
 
     if (value && value.length) {
-      for (var i = 0; i < value.length; i += 1) {
+      for (let i = 0; i < value.length; i += 1) {
         currentValues.push(new Date(value[i]).setHours(0, 0, 0, 0));
       }
     }
 
-    for (var row = 1; row <= rows; row += 1) {
-      var rowHtml = '';
+    for (let row = 1; row <= rows; row += 1) {
+      let rowHtml = '';
 
-      var _loop = function _loop(col) {
+      for (let col = 1; col <= cols; col += 1) {
         dayIndex += 1;
-        var dayDate = void 0;
-        var dayNumber = dayIndex - firstDayOfMonthIndex;
-        var addClass = '';
+        let dayDate;
+        let dayNumber = dayIndex - firstDayOfMonthIndex;
+        let addClass = '';
 
         if (row === 1 && col === 1 && dayNumber > minDayNumber && params.firstDay !== 1) {
           dayIndex -= 7;
           dayNumber = dayIndex - firstDayOfMonthIndex;
         }
 
-        var weekDayIndex = col - 1 + params.firstDay > 6 ? col - 1 - 7 + params.firstDay : col - 1 + params.firstDay;
+        const weekDayIndex = col - 1 + params.firstDay > 6 ? col - 1 - 7 + params.firstDay : col - 1 + params.firstDay;
 
         if (dayNumber < 0) {
           dayNumber = daysInPrevMonth + dayNumber + 1;
@@ -1333,7 +1305,7 @@ var Calendar = /*#__PURE__*/function (_Framework7Class) {
         } // Events
 
 
-        var eventsHtml = '';
+        let eventsHtml = '';
         hasEvents = false;
 
         if (params.events) {
@@ -1345,29 +1317,37 @@ var Calendar = /*#__PURE__*/function (_Framework7Class) {
         if (hasEvents) {
           addClass += ' calendar-day-has-events'; // prettier-ignore
 
-          eventsHtml = "\n            <span class=\"calendar-day-events\">\n              <span class=\"calendar-day-event\"></span>\n            </span>\n          ";
+          eventsHtml = `
+            <span class="calendar-day-events">
+              <span class="calendar-day-event"></span>
+            </span>
+          `;
 
           if (Array.isArray(params.events)) {
-            var eventDots = [];
-            params.events.forEach(function (ev) {
-              var color = ev.color || '';
+            const eventDots = [];
+            params.events.forEach(ev => {
+              const color = ev.color || '';
 
               if (eventDots.indexOf(color) < 0 && calendar.dateInRange(dayDate, ev)) {
                 eventDots.push(color);
               }
             }); // prettier-ignore
 
-            eventsHtml = "\n              <span class=\"calendar-day-events\">\n                " + eventDots.map(function (color) {
-              return ("\n                  <span class=\"calendar-day-event\" style=\"" + (color ? "background-color: " + color : '') + "\"></span>\n                ").trim();
-            }).join('') + "\n              </span>\n            ";
+            eventsHtml = `
+              <span class="calendar-day-events">
+                ${eventDots.map(color => `
+                  <span class="calendar-day-event" style="${color ? `background-color: ${color}` : ''}"></span>
+                `.trim()).join('')}
+              </span>
+            `;
           }
         } // Custom Ranges
 
 
         if (params.rangesClasses) {
-          for (var k = 0; k < params.rangesClasses.length; k += 1) {
+          for (let k = 0; k < params.rangesClasses.length; k += 1) {
             if (calendar.dateInRange(dayDate, params.rangesClasses[k].range)) {
-              addClass += " " + params.rangesClasses[k].cssClass;
+              addClass += ` ${params.rangesClasses[k].cssClass}`;
             }
           }
         } // Disabled
@@ -1390,47 +1370,48 @@ var Calendar = /*#__PURE__*/function (_Framework7Class) {
         }
 
         dayDate = new Date(dayDate);
-        var dayYear = dayDate.getFullYear();
-        var dayMonth = dayDate.getMonth();
-        var dayNumberDisplay = calendar.dayFormatter(dayDate); // prettier-ignore
-
-        rowHtml += ("\n          <div data-year=\"" + dayYear + "\" data-month=\"" + dayMonth + "\" data-day=\"" + dayNumber + "\" class=\"calendar-day" + addClass + "\" data-date=\"" + dayYear + "-" + dayMonth + "-" + dayNumber + "\">\n            <span class=\"calendar-day-number\">" + dayNumberDisplay + eventsHtml + "</span>\n          </div>").trim();
-      };
-
-      for (var col = 1; col <= cols; col += 1) {
-        _loop(col);
+        const dayYear = dayDate.getFullYear();
+        const dayMonth = dayDate.getMonth();
+        const dayNumberDisplay = calendar.dayFormatter(dayDate); // prettier-ignore
+
+        rowHtml += `
+          <div data-year="${dayYear}" data-month="${dayMonth}" data-day="${dayNumber}" class="calendar-day${addClass}" data-date="${dayYear}-${dayMonth}-${dayNumber}">
+            <span class="calendar-day-number">${dayNumberDisplay}${eventsHtml}</span>
+          </div>`.trim();
       }
 
-      monthHtml += "<div class=\"calendar-row\">" + rowHtml + "</div>";
+      monthHtml += `<div class="calendar-row">${rowHtml}</div>`;
     }
 
-    monthHtml = "<div class=\"calendar-month\" data-year=\"" + year + "\" data-month=\"" + month + "\" data-locale-year=\"" + localeYear + "\" data-locale-month=\"" + localeMonth + "\">" + monthHtml + "</div>";
+    monthHtml = `<div class="calendar-month" data-year="${year}" data-month="${month}" data-locale-year="${localeYear}" data-locale-month="${localeMonth}">${monthHtml}</div>`;
     return monthHtml;
-  };
+  }
 
-  _proto.renderWeekHeader = function renderWeekHeader() {
-    var calendar = this;
+  renderWeekHeader() {
+    const calendar = this;
 
     if (calendar.params.renderWeekHeader) {
       return calendar.params.renderWeekHeader.call(calendar);
     }
 
-    var params = calendar.params;
-    var weekDaysHtml = '';
+    const {
+      params
+    } = calendar;
+    let weekDaysHtml = '';
 
-    for (var i = 0; i < 7; i += 1) {
-      var dayIndex = i + params.firstDay > 6 ? i - 7 + params.firstDay : i + params.firstDay;
-      var dayName = calendar.dayNamesShort[dayIndex];
-      weekDaysHtml += "<div class=\"calendar-week-day\">" + dayName + "</div>";
+    for (let i = 0; i < 7; i += 1) {
+      const dayIndex = i + params.firstDay > 6 ? i - 7 + params.firstDay : i + params.firstDay;
+      const dayName = calendar.dayNamesShort[dayIndex];
+      weekDaysHtml += `<div class="calendar-week-day">${dayName}</div>`;
     }
 
     return $jsx("div", {
       class: "calendar-week-header"
     }, weekDaysHtml);
-  };
+  }
 
-  _proto.renderMonthSelector = function renderMonthSelector() {
-    var calendar = this;
+  renderMonthSelector() {
+    const calendar = this;
 
     if (calendar.params.renderMonthSelector) {
       return calendar.params.renderMonthSelector.call(calendar);
@@ -1451,22 +1432,10 @@ var Calendar = /*#__PURE__*/function (_Framework7Class) {
     }, $jsx("i", {
       class: "icon icon-next"
     })));
-  };
-
-  _proto.renderMonthPicker = function renderMonthPicker() {
-    var calendar = this;
-    var localeMonth = parseInt(calendar.$el.find('.calendar-month-current').attr('data-locale-month'), 10);
-    return $jsx("div", {
-      class: "calendar-month-picker"
-    }, calendar.monthNames.map(function (m, index) {
-      return $jsx("div", {
-        class: "calendar-month-picker-item " + (localeMonth === index ? 'calendar-month-picker-item-current' : '')
-      }, $jsx("span", null, m));
-    }));
-  };
+  }
 
-  _proto.renderYearSelector = function renderYearSelector() {
-    var calendar = this;
+  renderYearSelector() {
+    const calendar = this;
 
     if (calendar.params.renderYearSelector) {
       return calendar.params.renderYearSelector.call(calendar);
@@ -1487,54 +1456,23 @@ var Calendar = /*#__PURE__*/function (_Framework7Class) {
     }, $jsx("i", {
       class: "icon icon-next"
     })));
-  };
-
-  _proto.renderYearPicker = function renderYearPicker() {
-    var calendar = this;
-    var currentYear = calendar.currentYear;
-    var yearMin = calendar.params.yearPickerMin || new Date().getFullYear() - 100;
-
-    if (calendar.params.minDate) {
-      yearMin = Math.max(yearMin, new Date(calendar.params.minDate).getFullYear());
-    }
-
-    var yearMax = calendar.params.yearPickerMax || new Date().getFullYear() + 100;
-
-    if (calendar.params.maxDate) {
-      yearMax = Math.min(yearMax, new Date(calendar.params.maxDate).getFullYear());
-    }
-
-    var years = [];
-
-    for (var i = yearMin; i <= yearMax; i += 1) {
-      years.push(i);
-    }
-
-    return $jsx("div", {
-      class: "calendar-year-picker"
-    }, years.map(function (year) {
-      return $jsx("div", {
-        "data-year": year,
-        class: "calendar-year-picker-item " + (year === currentYear ? 'calendar-year-picker-item-current' : '')
-      }, $jsx("span", null, calendar.yearFormatter(new Date().setFullYear(year))));
-    }));
   } // eslint-disable-next-line
-  ;
 
-  _proto.renderTimeSelector = function renderTimeSelector() {
-    var calendar = this;
-    var value = calendar.value && calendar.value[0];
-    var timeString;
+
+  renderTimeSelector() {
+    const calendar = this;
+    const value = calendar.value && calendar.value[0];
+    let timeString;
     if (value) timeString = calendar.timeSelectorFormatter(value);
     return $jsx("div", {
       class: "calendar-time-selector"
-    }, $jsx("a", {
+    }, $jsx("span", null, calendar.params.timePickerLabel), $jsx("a", {
       class: "link"
     }, timeString || calendar.params.timePickerPlaceholder));
-  };
+  }
 
-  _proto.renderHeader = function renderHeader() {
-    var calendar = this;
+  renderHeader() {
+    const calendar = this;
 
     if (calendar.params.renderHeader) {
       return calendar.params.renderHeader.call(calendar);
@@ -1545,11 +1483,11 @@ var Calendar = /*#__PURE__*/function (_Framework7Class) {
     }, $jsx("div", {
       class: "calendar-selected-date"
     }, calendar.params.headerPlaceholder));
-  };
+  }
 
-  _proto.renderFooter = function renderFooter() {
-    var calendar = this;
-    var app = calendar.app;
+  renderFooter() {
+    const calendar = this;
+    const app = calendar.app;
 
     if (calendar.params.renderFooter) {
       return calendar.params.renderFooter.call(calendar);
@@ -1558,12 +1496,12 @@ var Calendar = /*#__PURE__*/function (_Framework7Class) {
     return $jsx("div", {
       class: "calendar-footer"
     }, $jsx("a", {
-      class: (app.theme === 'md' ? 'button' : 'link') + " calendar-close sheet-close popover-close"
+      class: `${app.theme === 'md' ? 'button' : 'link'} calendar-close sheet-close popover-close`
     }, calendar.params.toolbarCloseText));
-  };
+  }
 
-  _proto.renderToolbar = function renderToolbar() {
-    var calendar = this;
+  renderToolbar() {
+    const calendar = this;
 
     if (calendar.params.renderToolbar) {
       return calendar.params.renderToolbar.call(calendar, calendar);
@@ -1576,95 +1514,109 @@ var Calendar = /*#__PURE__*/function (_Framework7Class) {
       class: "toolbar-inner"
     }, calendar.params.monthSelector ? calendar.renderMonthSelector() : '', calendar.params.yearSelector ? calendar.renderYearSelector() : ''));
   } // eslint-disable-next-line
-  ;
-
-  _proto.renderInline = function renderInline() {
-    var calendar = this;
-    var _calendar$params4 = calendar.params,
-        cssClass = _calendar$params4.cssClass,
-        toolbar = _calendar$params4.toolbar,
-        header = _calendar$params4.header,
-        footer = _calendar$params4.footer,
-        rangePicker = _calendar$params4.rangePicker,
-        weekHeader = _calendar$params4.weekHeader;
-    var value = calendar.value,
-        hasTimePicker = calendar.hasTimePicker;
-    var date = value && value.length ? value[0] : new Date().setHours(0, 0, 0);
+
+
+  renderInline() {
+    const calendar = this;
+    const {
+      cssClass,
+      toolbar,
+      header,
+      footer,
+      rangePicker,
+      weekHeader
+    } = calendar.params;
+    const {
+      value,
+      hasTimePicker
+    } = calendar;
+    const date = value && value.length ? value[0] : new Date().setHours(0, 0, 0);
     return $jsx("div", {
-      class: "calendar calendar-inline " + (rangePicker ? 'calendar-range' : '') + " " + (cssClass || '')
+      class: `calendar calendar-inline ${rangePicker ? 'calendar-range' : ''} ${cssClass || ''}`
     }, header && calendar.renderHeader(), toolbar && calendar.renderToolbar(), weekHeader && calendar.renderWeekHeader(), $jsx("div", {
       class: "calendar-months"
     }, calendar.renderMonths(date)), hasTimePicker && calendar.renderTimeSelector(), footer && calendar.renderFooter());
-  };
-
-  _proto.renderCustomModal = function renderCustomModal() {
-    var calendar = this;
-    var _calendar$params5 = calendar.params,
-        cssClass = _calendar$params5.cssClass,
-        toolbar = _calendar$params5.toolbar,
-        header = _calendar$params5.header,
-        footer = _calendar$params5.footer,
-        rangePicker = _calendar$params5.rangePicker,
-        weekHeader = _calendar$params5.weekHeader;
-    var value = calendar.value,
-        hasTimePicker = calendar.hasTimePicker;
-    var date = value && value.length ? value[0] : new Date().setHours(0, 0, 0);
+  }
+
+  renderCustomModal() {
+    const calendar = this;
+    const {
+      cssClass,
+      toolbar,
+      header,
+      footer,
+      rangePicker,
+      weekHeader
+    } = calendar.params;
+    const {
+      value,
+      hasTimePicker
+    } = calendar;
+    const date = value && value.length ? value[0] : new Date().setHours(0, 0, 0);
     return $jsx("div", {
-      class: "calendar calendar-modal " + (rangePicker ? 'calendar-range' : '') + " " + (cssClass || '')
+      class: `calendar calendar-modal ${rangePicker ? 'calendar-range' : ''} ${cssClass || ''}`
     }, header && calendar.renderHeader(), toolbar && calendar.renderToolbar(), weekHeader && calendar.renderWeekHeader(), $jsx("div", {
       class: "calendar-months"
     }, calendar.renderMonths(date)), hasTimePicker && calendar.renderTimeSelector(), footer && calendar.renderFooter());
-  };
-
-  _proto.renderSheet = function renderSheet() {
-    var calendar = this;
-    var _calendar$params6 = calendar.params,
-        cssClass = _calendar$params6.cssClass,
-        toolbar = _calendar$params6.toolbar,
-        header = _calendar$params6.header,
-        footer = _calendar$params6.footer,
-        rangePicker = _calendar$params6.rangePicker,
-        weekHeader = _calendar$params6.weekHeader;
-    var value = calendar.value,
-        hasTimePicker = calendar.hasTimePicker;
-    var date = value && value.length ? value[0] : new Date().setHours(0, 0, 0);
+  }
+
+  renderSheet() {
+    const calendar = this;
+    const {
+      cssClass,
+      toolbar,
+      header,
+      footer,
+      rangePicker,
+      weekHeader
+    } = calendar.params;
+    const {
+      value,
+      hasTimePicker
+    } = calendar;
+    const date = value && value.length ? value[0] : new Date().setHours(0, 0, 0);
     return $jsx("div", {
-      class: "sheet-modal calendar calendar-sheet " + (rangePicker ? 'calendar-range' : '') + " " + (cssClass || '')
+      class: `sheet-modal calendar calendar-sheet ${rangePicker ? 'calendar-range' : ''} ${cssClass || ''}`
     }, header && calendar.renderHeader(), toolbar && calendar.renderToolbar(), weekHeader && calendar.renderWeekHeader(), $jsx("div", {
       class: "sheet-modal-inner calendar-months"
     }, calendar.renderMonths(date)), hasTimePicker && calendar.renderTimeSelector(), footer && calendar.renderFooter());
-  };
-
-  _proto.renderPopover = function renderPopover() {
-    var calendar = this;
-    var _calendar$params7 = calendar.params,
-        cssClass = _calendar$params7.cssClass,
-        toolbar = _calendar$params7.toolbar,
-        header = _calendar$params7.header,
-        footer = _calendar$params7.footer,
-        rangePicker = _calendar$params7.rangePicker,
-        weekHeader = _calendar$params7.weekHeader;
-    var value = calendar.value,
-        hasTimePicker = calendar.hasTimePicker;
-    var date = value && value.length ? value[0] : new Date().setHours(0, 0, 0);
+  }
+
+  renderPopover() {
+    const calendar = this;
+    const {
+      cssClass,
+      toolbar,
+      header,
+      footer,
+      rangePicker,
+      weekHeader
+    } = calendar.params;
+    const {
+      value,
+      hasTimePicker
+    } = calendar;
+    const date = value && value.length ? value[0] : new Date().setHours(0, 0, 0);
     return $jsx("div", {
       class: "popover calendar-popover"
     }, $jsx("div", {
       class: "popover-inner"
     }, $jsx("div", {
-      class: "calendar " + (rangePicker ? 'calendar-range' : '') + " " + (cssClass || '')
+      class: `calendar ${rangePicker ? 'calendar-range' : ''} ${cssClass || ''}`
     }, header && calendar.renderHeader(), toolbar && calendar.renderToolbar(), weekHeader && calendar.renderWeekHeader(), $jsx("div", {
       class: "calendar-months"
     }, calendar.renderMonths(date)), hasTimePicker && calendar.renderTimeSelector(), footer && calendar.renderFooter())));
-  };
+  }
 
-  _proto.render = function render() {
-    var calendar = this;
-    var params = calendar.params;
+  render() {
+    const calendar = this;
+    const {
+      params
+    } = calendar;
     if (params.render) return params.render.call(calendar);
 
     if (!calendar.inline) {
-      var modalType = params.openIn;
+      let modalType = params.openIn;
       if (modalType === 'auto') modalType = calendar.isPopover() ? 'popover' : 'sheet';
       if (modalType === 'popover') return calendar.renderPopover();
       if (modalType === 'sheet') return calendar.renderSheet();
@@ -1672,29 +1624,167 @@ var Calendar = /*#__PURE__*/function (_Framework7Class) {
     }
 
     return calendar.renderInline();
-  };
+  }
 
-  _proto.openTimePicker = function openTimePicker() {
-    var calendar = this;
-    var $el = calendar.$el,
-        app = calendar.app,
-        is12HoursFormat = calendar.is12HoursFormat;
+  openMonthPicker() {
+    const calendar = this;
+    const {
+      $el,
+      app
+    } = calendar;
     if (!$el || !$el.length) return;
-    $el.append('<div class="calendar-time-picker"></div>');
-    var hoursArr = [];
-    var minutesArr = [];
-    var hoursMin = is12HoursFormat ? 1 : 0;
-    var hoursMax = is12HoursFormat ? 12 : 23;
+    $el.append('<div class="popover calendar-popover calendar-month-picker-popover"><div class="popover-inner"><div class="calendar-month-picker"></div></div></div>');
+    calendar.monthPickerPopover = app.popover.create({
+      el: $el.find('.calendar-month-picker-popover'),
+      targetEl: $el.find('.calendar-month-selector'),
+      backdrop: true,
+      backdropUnique: true,
+      on: {
+        close() {
+          calendar.closeMonthPicker();
+        },
 
-    for (var i = hoursMin; i <= hoursMax; i += 1) {
+        closed() {
+          if (calendar.monthPickerPopover.$el) calendar.monthPickerPopover.$el.remove();
+          calendar.monthPickerPopover.destroy();
+
+          if (calendar.monthPickerInstance) {
+            calendar.monthPickerInstance.close();
+            calendar.monthPickerInstance.destroy();
+          }
+
+          delete calendar.monthPickerInstance;
+          delete calendar.monthPickerPopover;
+        }
+
+      }
+    });
+    calendar.monthPickerPopover.open();
+    const localeMonth = parseInt(calendar.$el.find('.calendar-month-current').attr('data-locale-month'), 10);
+    const values = [];
+    const displayValues = [];
+    calendar.monthNames.forEach((m, index) => {
+      values.push(index);
+      displayValues.push(m);
+    });
+    calendar.monthPickerInstance = app.picker.create({
+      containerEl: calendar.monthPickerPopover.$el.find('.calendar-month-picker'),
+      value: [localeMonth],
+      toolbar: false,
+      rotateEffect: false,
+      toolbarCloseText: calendar.params.toolbarCloseText,
+      cols: [{
+        values,
+        displayValues
+      }]
+    });
+  }
+
+  closeMonthPicker() {
+    const calendar = this;
+    if (calendar.monthPickerPopover && calendar.monthPickerPopover.opened) calendar.monthPickerPopover.close();
+    const index = calendar.monthPickerInstance.value[0];
+    const localeMonthIndex = parseInt(calendar.$el.find('.calendar-month-current').attr('data-locale-month'), 10);
+    const monthIndex = calendar.currentMonth;
+    const diff = localeMonthIndex - monthIndex;
+    const diffIndex = index - diff;
+    calendar.setYearMonth(calendar.currentYear, diffIndex, 0);
+  }
+
+  openYearPicker() {
+    const calendar = this;
+    const {
+      $el,
+      app
+    } = calendar;
+    if (!$el || !$el.length) return;
+    $el.append('<div class="popover calendar-popover calendar-year-picker-popover"><div class="popover-inner"><div class="calendar-year-picker"></div></div></div>');
+    calendar.yearPickerPopover = app.popover.create({
+      el: $el.find('.calendar-year-picker-popover'),
+      targetEl: $el.find('.calendar-year-selector'),
+      backdrop: true,
+      backdropUnique: true,
+      on: {
+        close() {
+          calendar.closeYearPicker();
+        },
+
+        closed() {
+          if (calendar.yearPickerPopover.$el) calendar.yearPickerPopover.$el.remove();
+          calendar.yearPickerPopover.destroy();
+
+          if (calendar.yearPickerInstance) {
+            calendar.yearPickerInstance.close();
+            calendar.yearPickerInstance.destroy();
+          }
+
+          delete calendar.yearPickerInstance;
+          delete calendar.yearPickerPopover;
+        }
+
+      }
+    });
+    calendar.yearPickerPopover.open();
+    const currentYear = calendar.currentYear;
+    let yearMin = calendar.params.yearPickerMin || new Date().getFullYear() - 100;
+
+    if (calendar.params.minDate) {
+      yearMin = Math.max(yearMin, new Date(calendar.params.minDate).getFullYear());
+    }
+
+    let yearMax = calendar.params.yearPickerMax || new Date().getFullYear() + 100;
+
+    if (calendar.params.maxDate) {
+      yearMax = Math.min(yearMax, new Date(calendar.params.maxDate).getFullYear());
+    }
+
+    const years = [];
+
+    for (let i = yearMin; i <= yearMax; i += 1) {
+      years.push(i);
+    }
+
+    calendar.yearPickerInstance = app.picker.create({
+      containerEl: calendar.yearPickerPopover.$el.find('.calendar-year-picker'),
+      value: [currentYear],
+      toolbar: false,
+      rotateEffect: false,
+      toolbarCloseText: calendar.params.toolbarCloseText,
+      cols: [{
+        values: years
+      }]
+    });
+  }
+
+  closeYearPicker() {
+    const calendar = this;
+    if (calendar.yearPickerPopover && calendar.yearPickerPopover.opened) calendar.yearPickerPopover.close();
+    calendar.setYearMonth(calendar.yearPickerInstance.value[0], undefined, 0);
+  }
+
+  openTimePicker() {
+    const calendar = this;
+    const {
+      $el,
+      app,
+      is12HoursFormat
+    } = calendar;
+    if (!$el || !$el.length) return;
+    $el.append('<div class="popover calendar-popover calendar-time-picker-popover"><div class="popover-inner"><div class="calendar-time-picker"></div></div></div>');
+    const hoursArr = [];
+    const minutesArr = [];
+    const hoursMin = is12HoursFormat ? 1 : 0;
+    const hoursMax = is12HoursFormat ? 12 : 23;
+
+    for (let i = hoursMin; i <= hoursMax; i += 1) {
       hoursArr.push(i);
     }
 
-    for (var _i2 = 0; _i2 <= 59; _i2 += 1) {
-      minutesArr.push(_i2);
+    for (let i = 0; i <= 59; i += 1) {
+      minutesArr.push(i);
     }
 
-    var value;
+    let value;
 
     if (calendar.value && calendar.value.length) {
       value = [calendar.value[0].getHours(), calendar.value[0].getMinutes()];
@@ -1708,10 +1798,36 @@ var Calendar = /*#__PURE__*/function (_Framework7Class) {
       if (value[0] === 0) value[0] = 12;
     }
 
+    calendar.timePickerPopover = app.popover.create({
+      el: $el.find('.calendar-time-picker-popover'),
+      targetEl: $el.find('.calendar-time-selector .link'),
+      backdrop: true,
+      backdropUnique: true,
+      on: {
+        close() {
+          calendar.closeTimePicker();
+        },
+
+        closed() {
+          if (calendar.timePickerPopover.$el) calendar.timePickerPopover.$el.remove();
+          calendar.timePickerPopover.destroy();
+
+          if (calendar.timePickerInstance) {
+            calendar.timePickerInstance.close();
+            calendar.timePickerInstance.destroy();
+          }
+
+          delete calendar.timePickerInstance;
+          delete calendar.timePickerPopover;
+        }
+
+      }
+    });
+    calendar.timePickerPopover.open();
     calendar.timePickerInstance = app.picker.create({
-      containerEl: $el.find('.calendar-time-picker'),
-      value: value,
-      toolbar: true,
+      containerEl: calendar.timePickerPopover.$el.find('.calendar-time-picker'),
+      value,
+      toolbar: false,
       rotateEffect: false,
       toolbarCloseText: calendar.params.toolbarCloseText,
       cols: [{
@@ -1721,25 +1837,24 @@ var Calendar = /*#__PURE__*/function (_Framework7Class) {
         content: ':'
       }, {
         values: minutesArr,
-        displayValues: minutesArr.map(function (m) {
-          return m < 10 ? "0" + m : m;
-        })
-      }].concat(is12HoursFormat ? [{
+        displayValues: minutesArr.map(m => m < 10 ? `0${m}` : m)
+      }, ...(is12HoursFormat ? [{
         values: ['AM', 'PM']
-      }] : [])
+      }] : [])]
     });
-    calendar.timePickerInstance.$el.find('.toolbar a').removeClass('sheet-close popover-close').addClass('calendar-time-picker-close');
-  };
+  }
 
-  _proto.closeTimePicker = function closeTimePicker() {
-    var calendar = this;
-    var is12HoursFormat = calendar.is12HoursFormat;
+  closeTimePicker() {
+    const calendar = this;
+    const {
+      is12HoursFormat
+    } = calendar;
 
     if (calendar.timePickerInstance) {
-      var timePickerValue = calendar.timePickerInstance.value;
-      var hours = parseInt(timePickerValue[0], 10);
-      var minutes = parseInt(timePickerValue[1], 10);
-      var period = calendar.timePickerInstance.value[2];
+      const timePickerValue = calendar.timePickerInstance.value;
+      let hours = parseInt(timePickerValue[0], 10);
+      const minutes = parseInt(timePickerValue[1], 10);
+      const period = calendar.timePickerInstance.value[2];
 
       if (is12HoursFormat) {
         if (period === 'AM' && hours === 12) {
@@ -1749,7 +1864,7 @@ var Calendar = /*#__PURE__*/function (_Framework7Class) {
         }
       }
 
-      var value = calendar.value && calendar.value.length && calendar.value[0];
+      let value = calendar.value && calendar.value.length && calendar.value[0];
 
       if (!value) {
         value = new Date();
@@ -1760,31 +1875,27 @@ var Calendar = /*#__PURE__*/function (_Framework7Class) {
       }
 
       calendar.setValue([value]);
-      calendar.timePickerInstance.close();
-      calendar.timePickerInstance.destroy();
-      delete calendar.timePickerInstance;
+      if (calendar.timePickerPopover && calendar.timePickerPopover.opened) calendar.timePickerPopover.close();
     }
+  }
 
-    if (calendar.$el && calendar.$el.length) {
-      calendar.$el.find('.calendar-time-picker').remove();
-    }
-  };
-
-  _proto.onOpen = function onOpen() {
-    var calendar = this;
-    var initialized = calendar.initialized,
-        $el = calendar.$el,
-        app = calendar.app,
-        $inputEl = calendar.$inputEl,
-        inline = calendar.inline,
-        value = calendar.value,
-        params = calendar.params;
+  onOpen() {
+    const calendar = this;
+    const {
+      initialized,
+      $el,
+      app,
+      $inputEl,
+      inline,
+      value,
+      params
+    } = calendar;
     calendar.closing = false;
     calendar.opened = true;
     calendar.opening = true; // Init main events
 
     calendar.attachCalendarEvents();
-    var updateValue = !value && params.value; // Set value
+    const updateValue = !value && params.value; // Set value
 
     if (!initialized) {
       if (value) calendar.setValue(value, 0);else if (params.value) {
@@ -1809,7 +1920,7 @@ var Calendar = /*#__PURE__*/function (_Framework7Class) {
     }
 
     calendar.initialized = true;
-    calendar.$months.each(function (monthEl) {
+    calendar.$months.each(monthEl => {
       calendar.emit('local::monthAdd calendarMonthAdd', monthEl);
     }); // Trigger events
 
@@ -1822,10 +1933,10 @@ var Calendar = /*#__PURE__*/function (_Framework7Class) {
     }
 
     calendar.emit('local::open calendarOpen', calendar);
-  };
+  }
 
-  _proto.onOpened = function onOpened() {
-    var calendar = this;
+  onOpened() {
+    const calendar = this;
     calendar.opening = false;
 
     if (calendar.$el) {
@@ -1837,11 +1948,11 @@ var Calendar = /*#__PURE__*/function (_Framework7Class) {
     }
 
     calendar.emit('local::opened calendarOpened', calendar);
-  };
+  }
 
-  _proto.onClose = function onClose() {
-    var calendar = this;
-    var app = calendar.app;
+  onClose() {
+    const calendar = this;
+    const app = calendar.app;
     calendar.opening = false;
     calendar.closing = true;
 
@@ -1849,8 +1960,8 @@ var Calendar = /*#__PURE__*/function (_Framework7Class) {
       if (app.theme === 'md') {
         calendar.$inputEl.trigger('blur');
       } else {
-        var validate = calendar.$inputEl.attr('validate');
-        var required = calendar.$inputEl.attr('required');
+        const validate = calendar.$inputEl.attr('validate');
+        const required = calendar.$inputEl.attr('required');
 
         if (validate && required) {
           app.input.validate(calendar.$inputEl);
@@ -1871,15 +1982,15 @@ var Calendar = /*#__PURE__*/function (_Framework7Class) {
     }
 
     calendar.emit('local::close calendarClose', calendar);
-  };
+  }
 
-  _proto.onClosed = function onClosed() {
-    var calendar = this;
+  onClosed() {
+    const calendar = this;
     calendar.opened = false;
     calendar.closing = false;
 
     if (!calendar.inline) {
-      nextTick(function () {
+      nextTick(() => {
         if (calendar.modal && calendar.modal.el && calendar.modal.destroy) {
           if (!calendar.params.routableModals) {
             calendar.modal.destroy();
@@ -1904,15 +2015,17 @@ var Calendar = /*#__PURE__*/function (_Framework7Class) {
     }
 
     calendar.emit('local::closed calendarClosed', calendar);
-  };
-
-  _proto.open = function open() {
-    var calendar = this;
-    var app = calendar.app,
-        opened = calendar.opened,
-        inline = calendar.inline,
-        $inputEl = calendar.$inputEl,
-        params = calendar.params;
+  }
+
+  open() {
+    const calendar = this;
+    const {
+      app,
+      opened,
+      inline,
+      $inputEl,
+      params
+    } = calendar;
     if (opened) return;
 
     if (inline) {
@@ -1926,22 +2039,22 @@ var Calendar = /*#__PURE__*/function (_Framework7Class) {
       return;
     }
 
-    var modalType = params.openIn;
+    let modalType = params.openIn;
 
     if (modalType === 'auto') {
       modalType = calendar.isPopover() ? 'popover' : 'sheet';
     }
 
-    var modalContent = calendar.render();
-    var modalParams = {
+    const modalContent = calendar.render();
+    const modalParams = {
       targetEl: $inputEl,
       scrollToEl: params.scrollToInput ? $inputEl : undefined,
       content: modalContent,
       backdrop: params.backdrop === true || modalType === 'popover' && app.params.popover.backdrop !== false && params.backdrop !== false,
       closeByBackdropClick: params.closeByBackdropClick,
       on: {
-        open: function open() {
-          var modal = this;
+        open() {
+          const modal = this;
           calendar.modal = modal;
           calendar.$el = modalType === 'popover' ? modal.$el.find('.calendar') : modal.$el;
           calendar.$wrapperEl = calendar.$el.find('.calendar-months-wrapper');
@@ -1949,22 +2062,26 @@ var Calendar = /*#__PURE__*/function (_Framework7Class) {
           calendar.$el[0].f7Calendar = calendar;
 
           if (modalType === 'customModal') {
-            $(calendar.$el).find('.calendar-close').once('click', function () {
+            $(calendar.$el).find('.calendar-close').once('click', () => {
               calendar.close();
             });
           }
 
           calendar.onOpen();
         },
-        opened: function opened() {
+
+        opened() {
           calendar.onOpened();
         },
-        close: function close() {
+
+        close() {
           calendar.onClose();
         },
-        closed: function closed() {
+
+        closed() {
           calendar.onClosed();
         }
+
       }
     };
 
@@ -1974,24 +2091,25 @@ var Calendar = /*#__PURE__*/function (_Framework7Class) {
     }
 
     if (params.routableModals && calendar.view) {
-      var _route;
-
       calendar.view.router.navigate({
         url: calendar.url,
-        route: (_route = {
-          path: calendar.url
-        }, _route[modalType] = modalParams, _route)
+        route: {
+          path: calendar.url,
+          [modalType]: modalParams
+        }
       });
     } else {
       calendar.modal = app[modalType].create(modalParams);
       calendar.modal.open();
     }
-  };
+  }
 
-  _proto.close = function close() {
-    var calendar = this;
-    var opened = calendar.opened,
-        inline = calendar.inline;
+  close() {
+    const calendar = this;
+    const {
+      opened,
+      inline
+    } = calendar;
     if (!opened) return;
 
     if (inline) {
@@ -2005,10 +2123,10 @@ var Calendar = /*#__PURE__*/function (_Framework7Class) {
     } else {
       calendar.modal.close();
     }
-  };
+  }
 
-  _proto.init = function init() {
-    var calendar = this;
+  init() {
+    const calendar = this;
     calendar.initInput();
 
     if (calendar.inline) {
@@ -2031,12 +2149,14 @@ var Calendar = /*#__PURE__*/function (_Framework7Class) {
     }
 
     calendar.emit('local::init calendarInit', calendar);
-  };
+  }
 
-  _proto.destroy = function destroy() {
-    var calendar = this;
+  destroy() {
+    const calendar = this;
     if (calendar.destroyed) return;
-    var $el = calendar.$el;
+    const {
+      $el
+    } = calendar;
     calendar.emit('local::beforeDestroy calendarBeforeDestroy', calendar);
     if ($el) $el.trigger('calendar:beforedestroy');
     calendar.close(); // Detach Events
@@ -2057,28 +2177,8 @@ var Calendar = /*#__PURE__*/function (_Framework7Class) {
     if ($el && $el.length) delete calendar.$el[0].f7Calendar;
     deleteProps(calendar);
     calendar.destroyed = true;
-  };
-
-  _createClass(Calendar, [{
-    key: "view",
-    get: function get() {
-      var $inputEl = this.$inputEl,
-          app = this.app,
-          params = this.params;
-      var view;
-
-      if (params.view) {
-        view = params.view;
-      } else if ($inputEl) {
-        view = $inputEl.parents('.view').length && $inputEl.parents('.view')[0].f7View;
-      }
-
-      if (!view) view = app.views.main;
-      return view;
-    }
-  }]);
+  }
 
-  return Calendar;
-}(Framework7Class);
+}
 
 export default Calendar;