framework7 7.0.0-beta.10 → 7.0.0-beta.11

package/components/calendar/calendar-class.js

@@ -48,17 +48,34 @@ class Calendar extends Framework7Class {
       allowTouchMove: true,
       hasTimePicker: calendar.params.timePicker && !calendar.params.rangePicker && !calendar.params.multiple
     });
-    calendar.dayFormatter = new Intl.DateTimeFormat(calendar.params.locale, {
-      day: 'numeric'
-    });
-    calendar.monthFormatter = new Intl.DateTimeFormat(calendar.params.locale, {
-      month: 'long'
-    });
-    calendar.yearFormatter = new Intl.DateTimeFormat(calendar.params.locale, {
-      year: 'numeric'
-    });
-    calendar.timeSelectorFormatter = new Intl.DateTimeFormat(calendar.params.locale, calendar.params.timePickerFormat);
-    const timeFormatCheckDate = calendar.timeSelectorFormatter.format(new Date()).toLowerCase();
+
+    calendar.dayFormatter = date => {
+      const formatter = new Intl.DateTimeFormat(calendar.params.locale, {
+        day: 'numeric'
+      });
+      return formatter.format(date).replace(/日/, '');
+    };
+
+    calendar.monthFormatter = date => {
+      const formatter = new Intl.DateTimeFormat(calendar.params.locale, {
+        month: 'long'
+      });
+      return formatter.format(date);
+    };
+
+    calendar.yearFormatter = date => {
+      const formatter = new Intl.DateTimeFormat(calendar.params.locale, {
+        year: 'numeric'
+      });
+      return formatter.format(date);
+    };
+
+    calendar.timeSelectorFormatter = date => {
+      const formatter = new Intl.DateTimeFormat(calendar.params.locale, calendar.params.timePickerFormat);
+      return formatter.format(date);
+    };
+
+    const timeFormatCheckDate = calendar.timeSelectorFormatter(new Date()).toLowerCase();
     calendar.is12HoursFormat = timeFormatCheckDate.indexOf('pm') >= 0 || timeFormatCheckDate.indexOf('am') >= 0; // Auto names
 
     let {
@@ -106,6 +123,7 @@ class Calendar extends Framework7Class {
       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) {
@@ -320,61 +338,17 @@ class Calendar extends Framework7Class {
       }
 
       function onMonthSelectorClick() {
-        $el.append(calendar.renderMonthPicker());
-      }
-
-      function onMonthSelectorItemClick() {
-        const $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');
-        const index = $clickedEl.index();
-        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);
-        setTimeout(() => {
-          $el.find('.calendar-month-picker').remove();
-        }, 200);
+        calendar.openMonthPicker();
       }
 
       function onYearSelectorClick() {
-        $el.append(calendar.renderYearPicker());
-        const $currentEl = $el.find('.calendar-year-picker-item-current');
-        const $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() {
-        const $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');
-        const year = parseInt($clickedEl.attr('data-year'), 10);
-        calendar.setYearMonth(year, undefined, 0);
-        setTimeout(() => {
-          $el.find('.calendar-year-picker').remove();
-        }, 200);
+        calendar.openYearPicker();
       }
 
       function onTimeSelectorClick() {
         calendar.openTimePicker();
       }
 
-      function onTimePickerCloseClick() {
-        calendar.closeTimePicker();
-      }
-
       const passiveListener = app.touchEvents.start === 'touchstart' && getSupport().passiveListener ? {
         passive: true,
         capture: false
@@ -387,17 +361,14 @@ class Calendar extends 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
 
 
@@ -417,17 +388,14 @@ class Calendar extends 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);
@@ -487,7 +455,7 @@ class Calendar extends Framework7Class {
 
     for (let i = 0; i < 24; i += 1) {
       const date = new Date().setMonth(i, 1);
-      const currentYear = calendar.yearFormatter.format(date);
+      const currentYear = calendar.yearFormatter(date);
 
       if (year && currentYear !== year) {
         if (yearStarted) yearEnded = true;
@@ -787,7 +755,7 @@ class Calendar extends Framework7Class {
     }
 
     if ($el && $el.length > 0 && calendar.hasTimePicker) {
-      $el.find('.calendar-time-selector a').text(value && value.length ? calendar.timeSelectorFormatter.format(value[0]) : calendar.params.timePickerPlaceholder);
+      $el.find('.calendar-time-selector a').text(value && value.length ? calendar.timeSelectorFormatter(value[0]) : calendar.params.timePickerPlaceholder);
     }
 
     if ($inputEl && $inputEl.length || params.header) {
@@ -1234,9 +1202,9 @@ class Calendar extends Framework7Class {
     let date = new Date(d);
     let year = date.getFullYear();
     let month = date.getMonth();
-    let localeMonth = calendar.monthNames.indexOf(calendar.monthFormatter.format(date));
+    let localeMonth = calendar.monthNames.indexOf(calendar.monthFormatter(date));
     if (localeMonth < 0) localeMonth = month;
-    let localeYear = calendar.yearFormatter.format(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);
@@ -1249,9 +1217,9 @@ class Calendar extends Framework7Class {
     if (offset === 'next' || offset === 'prev') {
       month = date.getMonth();
       year = date.getFullYear();
-      localeMonth = calendar.monthNames.indexOf(calendar.monthFormatter.format(date));
+      localeMonth = calendar.monthNames.indexOf(calendar.monthFormatter(date));
       if (localeMonth < 0) localeMonth = month;
-      localeYear = calendar.yearFormatter.format(date);
+      localeYear = calendar.yearFormatter(date);
     }
 
     const currentValues = [];
@@ -1404,7 +1372,7 @@ class Calendar extends Framework7Class {
         dayDate = new Date(dayDate);
         const dayYear = dayDate.getFullYear();
         const dayMonth = dayDate.getMonth();
-        const dayNumberDisplay = calendar.dayFormatter.format(dayDate); // prettier-ignore
+        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}">
@@ -1466,16 +1434,6 @@ class Calendar extends Framework7Class {
     })));
   }
 
-  renderMonthPicker() {
-    const calendar = this;
-    const localeMonth = parseInt(calendar.$el.find('.calendar-month-current').attr('data-locale-month'), 10);
-    return $jsx("div", {
-      class: "calendar-month-picker"
-    }, calendar.monthNames.map((m, index) => $jsx("div", {
-      class: `calendar-month-picker-item ${localeMonth === index ? 'calendar-month-picker-item-current' : ''}`
-    }, $jsx("span", null, m))));
-  }
-
   renderYearSelector() {
     const calendar = this;
 
@@ -1498,35 +1456,6 @@ class Calendar extends Framework7Class {
     }, $jsx("i", {
       class: "icon icon-next"
     })));
-  }
-
-  renderYearPicker() {
-    const calendar = this;
-    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);
-    }
-
-    return $jsx("div", {
-      class: "calendar-year-picker"
-    }, years.map(year => $jsx("div", {
-      "data-year": year,
-      class: `calendar-year-picker-item ${year === currentYear ? 'calendar-year-picker-item-current' : ''}`
-    }, $jsx("span", null, calendar.yearFormatter.format(new Date().setFullYear(year))))));
   } // eslint-disable-next-line
 
 
@@ -1534,10 +1463,10 @@ class Calendar extends Framework7Class {
     const calendar = this;
     const value = calendar.value && calendar.value[0];
     let timeString;
-    if (value) timeString = calendar.timeSelectorFormatter.format(value);
+    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));
   }
@@ -1697,6 +1626,142 @@ class Calendar extends Framework7Class {
     return calendar.renderInline();
   }
 
+  openMonthPicker() {
+    const calendar = this;
+    const {
+      $el,
+      app
+    } = calendar;
+    if (!$el || !$el.length) return;
+    $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();
+        },
+
+        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 {
@@ -1705,7 +1770,7 @@ class Calendar extends Framework7Class {
       is12HoursFormat
     } = calendar;
     if (!$el || !$el.length) return;
-    $el.append('<div class="calendar-time-picker"></div>');
+    $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;
@@ -1733,10 +1798,36 @@ class Calendar extends 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'),
+      containerEl: calendar.timePickerPopover.$el.find('.calendar-time-picker'),
       value,
-      toolbar: true,
+      toolbar: false,
       rotateEffect: false,
       toolbarCloseText: calendar.params.toolbarCloseText,
       cols: [{
@@ -1751,7 +1842,6 @@ class Calendar extends Framework7Class {
         values: ['AM', 'PM']
       }] : [])]
     });
-    calendar.timePickerInstance.$el.find('.toolbar a').removeClass('sheet-close popover-close').addClass('calendar-time-picker-close');
   }
 
   closeTimePicker() {
@@ -1785,13 +1875,7 @@ class Calendar extends Framework7Class {
       }
 
       calendar.setValue([value]);
-      calendar.timePickerInstance.close();
-      calendar.timePickerInstance.destroy();
-      delete calendar.timePickerInstance;
-    }
-
-    if (calendar.$el && calendar.$el.length) {
-      calendar.$el.find('.calendar-time-picker').remove();
+      if (calendar.timePickerPopover && calendar.timePickerPopover.opened) calendar.timePickerPopover.close();
     }
   }
 

package/components/calendar/calendar-rtl.css

@@ -1 +1 @@
-:root{--f7-calendar-height:340px;--f7-calendar-sheet-landscape-height:220px;--f7-calendar-popover-width:320px;--f7-calendar-popover-height:320px;--f7-calendar-modal-height:420px;--f7-calendar-modal-max-width:380px;--f7-calendar-modal-border-radius:4px;--f7-calendar-footer-padding:0 8px;--f7-calendar-week-header-font-size:11px;--f7-calendar-selected-text-color:#fff;--f7-calendar-prev-next-text-color:#b8b8b8;--f7-calendar-disabled-text-color:#d4d4d4;--f7-calendar-event-dot-size:4px;--f7-calendar-time-selector-height:28px;--f7-calendar-day-text-color:#000;--f7-calendar-sheet-bg-color:#fff;--f7-calendar-modal-bg-color:#fff;--f7-calendar-picker-bg-color:#fff;--f7-calendar-picker-pressed-bg-color:rgba(0, 0, 0, 0.1);--f7-calendar-picker-hover-bg-color:rgba(0, 0, 0, 0.03);--f7-calendar-time-selector-bg-color:rgba(0, 0, 0, 0.1)}:root .dark,:root.dark{--f7-calendar-sheet-border-color:var(--f7-bars-border-color);--f7-calendar-modal-bg-color:#121212;--f7-calendar-sheet-bg-color:#121212;--f7-calendar-picker-bg-color:#1c1c1d;--f7-calendar-picker-pressed-bg-color:rgba(255, 255, 255, 0.08);--f7-calendar-picker-hover-bg-color:rgba(255, 255, 255, 0.03);--f7-calendar-time-selector-bg-color:rgba(255, 255, 255, 0.1)}.ios{--f7-calendar-sheet-border-color:#929499;--f7-calendar-header-height:44px;--f7-calendar-header-font-size:17px;--f7-calendar-header-font-weight:600;--f7-calendar-header-padding:0 8px;--f7-calendar-footer-height:44px;--f7-calendar-footer-font-size:17px;--f7-calendar-week-header-height:18px;--f7-calendar-day-font-size:15px;--f7-calendar-day-size:30px;--f7-calendar-picker-font-size:17px;--f7-calendar-time-selector-font-size:17px;--f7-calendar-row-border-color:rgba(0, 0, 0, 0.25);--f7-calendar-today-text-color:#000;--f7-calendar-today-bg-color:#e3e3e3}.ios .dark,.ios.dark{--f7-calendar-row-border-color:var(--f7-bars-border-color);--f7-calendar-day-text-color:#fff;--f7-calendar-today-text-color:#fff;--f7-calendar-today-bg-color:#333}.md{--f7-calendar-sheet-border-color:#ccc;--f7-calendar-header-height:56px;--f7-calendar-header-font-size:20px;--f7-calendar-header-font-weight:400;--f7-calendar-header-padding:0 24px;--f7-calendar-footer-height:48px;--f7-calendar-footer-font-size:14px;--f7-calendar-week-header-height:24px;--f7-calendar-row-border-color:transparent;--f7-calendar-day-font-size:14px;--f7-calendar-today-bg-color:none;--f7-calendar-day-size:32px;--f7-calendar-picker-font-size:14px;--f7-calendar-time-selector-font-size:14px}.md .dark,.md.dark{--f7-calendar-day-text-color:rgba(255, 255, 255, 0.87)}.aurora{--f7-calendar-sheet-border-color:#ccc;--f7-calendar-header-height:56px;--f7-calendar-header-font-size:18px;--f7-calendar-header-font-weight:600;--f7-calendar-header-padding:0 16px;--f7-calendar-footer-height:48px;--f7-calendar-footer-font-size:14px;--f7-calendar-footer-padding:0 16px;--f7-calendar-week-header-height:24px;--f7-calendar-day-font-size:14px;--f7-calendar-day-size:32px;--f7-calendar-picker-font-size:16px;--f7-calendar-time-selector-font-size:14px;--f7-calendar-row-border-color:transparent;--f7-calendar-today-text-color:#000;--f7-calendar-today-bg-color:#e3e3e3}.aurora .dark,.aurora.dark{--f7-calendar-day-text-color:#fff;--f7-calendar-today-text-color:#fff;--f7-calendar-today-bg-color:#333}.calendar{overflow:hidden;height:var(--f7-calendar-height);width:100%;display:flex;flex-direction:column}.aurora .calendar{--f7-toolbar-border-color:transparent;--f7-bars-border-color:transparent}.calendar.modal-in{display:flex}@media (orientation:landscape) and (max-height:415px){.calendar.calendar-sheet{height:var(--f7-calendar-sheet-landscape-height)}.calendar.calendar-modal{height:calc(100vh - var(--f7-navbar-height))}}.calendar.calendar-inline,.calendar.calendar-popover .calendar{position:relative}.calendar-sheet{--f7-sheet-border-color:var(--f7-calendar-sheet-border-color);background:var(--f7-calendar-sheet-bg-color);padding-bottom:var(--f7-safe-area-bottom);height:calc(var(--f7-calendar-height) + var(--f7-safe-area-bottom))}.calendar-sheet:before{z-index:600}.calendar-modal .toolbar:before,.calendar-popover .toolbar:before,.calendar-sheet .toolbar:before{display:none}.calendar-popover{width:var(--f7-calendar-popover-width)}.calendar-popover .calendar-header,.calendar-popover .toolbar-top{border-radius:var(--f7-popover-border-radius) var(--f7-popover-border-radius) 0 0}.calendar-popover .calendar-header+.toolbar-top{border-radius:0}.calendar-popover .calendar-footer,.calendar-popover .toolbar-bottom{border-radius:0 0 var(--f7-popover-border-radius) var(--f7-popover-border-radius)}.calendar-popover .calendar{height:var(--f7-calendar-popover-height);position:relative;z-index:1}.calendar-popover .calendar-month-picker,.calendar-popover .calendar-time-picker,.calendar-popover .calendar-year-picker{border-radius:var(--f7-popover-border-radius)}.calendar-header{width:100%;position:relative;overflow:hidden;flex-shrink:0;white-space:nowrap;text-overflow:ellipsis;box-sizing:border-box;padding:var(--f7-calendar-header-padding);background-color:var(--f7-calendar-header-bg-color,var(--f7-bars-bg-color));color:var(--f7-calendar-header-text-color,var(--f7-bars-text-color));height:var(--f7-calendar-header-height);line-height:var(--f7-calendar-header-height);font-size:var(--f7-calendar-header-font-size);font-weight:var(--f7-calendar-header-font-weight)}.calendar-header a{color:var(--f7-calendar-header-link-color,var(--f7-bars-link-color,var(--f7-theme-color)))}.calendar-footer{width:100%;flex-shrink:0;padding:var(--f7-calendar-footer-padding);background-color:var(--f7-calendar-footer-bg-color,var(--f7-bars-bg-color));color:var(--f7-calendar-footer-text-color,var(--f7-bars-text-color));height:var(--f7-calendar-footer-height);font-size:var(--f7-calendar-header-font-size);display:flex;justify-content:flex-end;box-sizing:border-box;align-items:center;position:relative}.calendar-footer a{color:var(--f7-calendar-footer-link-color,var(--f7-bars-link-color,var(--f7-theme-color)))}.calendar-footer:before{content:'';position:absolute;background-color:var(--f7-calendar-footer-border-color,var(--f7-bars-border-color));display:block;z-index:15;top:0;right:auto;bottom:auto;left:0;height:1px;width:100%;transform-origin:50% 0%;transform:scaleY(calc(1 / var(--f7-device-pixel-ratio)))}.calendar-modal{position:absolute;height:var(--f7-calendar-modal-height);overflow:hidden;top:50%;left:50%;min-width:300px;max-width:var(--f7-calendar-modal-max-width);transform:translate3d(-50%,100vh,0);transition-property:transform;display:flex;z-index:13500;background:var(--f7-calendar-modal-bg-color);width:90%;border-radius:var(--f7-calendar-modal-border-radius);box-shadow:var(--f7-elevation-24)}.calendar-modal.modal-in,.calendar-modal.modal-out{transition-duration:.4s}.calendar-modal.modal-in{transform:translate3d(-50%,-50%,0)}.calendar-modal.modal-out{transform:translate3d(-50%,100vh,0)}.calendar-week-header{display:flex;box-sizing:border-box;position:relative;font-size:var(--f7-calendar-week-header-font-size);background-color:var(--f7-calendar-week-header-bg-color,var(--f7-bars-bg-color));color:var(--f7-calendar-week-header-text-color,var(--f7-bars-text-color));height:var(--f7-calendar-week-header-height);padding-left:var(--f7-safe-area-left);padding-right:var(--f7-safe-area-right)}.calendar-week-header .calendar-week-day{flex-shrink:1;width:calc(100% / 7);text-align:center;line-height:var(--f7-calendar-week-header-height)}.calendar-months{width:100%;height:100%;overflow:hidden;position:relative;flex-shrink:10}.calendar-months-wrapper{position:relative;width:100%;height:100%;transition:.3s}.calendar-month{display:flex;flex-direction:column;width:100%;height:100%;position:absolute;left:0;top:0}.calendar-row{height:16.66666667%;display:flex;flex-shrink:1;width:100%;position:relative;box-sizing:border-box;padding-left:var(--f7-safe-area-left);padding-right:var(--f7-safe-area-right)}.calendar-row:before{content:'';position:absolute;background-color:var(--f7-calendar-row-border-color);display:block;z-index:15;top:0;right:auto;bottom:auto;left:0;height:1px;width:100%;transform-origin:50% 0%;transform:scaleY(calc(1 / var(--f7-device-pixel-ratio)))}.calendar-modal .calendar-months:first-child .calendar-row:first-child:before,.calendar-popover .calendar-months:first-child .calendar-row:first-child:before{display:none!important}.calendar-day{flex-shrink:1;display:flex;justify-content:center;align-items:center;box-sizing:border-box;width:14.28571429%;text-align:center;cursor:pointer;z-index:20;color:var(--f7-calendar-day-text-color);height:100%;font-size:var(--f7-calendar-day-font-size)}.calendar-day-today .calendar-day-number{color:var(--f7-calendar-today-text-color,var(--f7-theme-color));background-color:var(--f7-calendar-today-bg-color)}.calendar-day-next,.calendar-day-prev{color:var(--f7-calendar-prev-next-text-color)}.calendar-day-disabled{color:var(--f7-calendar-disabled-text-color);cursor:auto}.calendar-day-selected .calendar-day-number{color:var(--f7-calendar-selected-text-color);background-color:var(--f7-calendar-selected-bg-color,var(--f7-theme-color))}.calendar-day-number{display:inline-block;border-radius:50%;position:relative;width:var(--f7-calendar-day-size);height:var(--f7-calendar-day-size);line-height:var(--f7-calendar-day-size)}.calendar-day-events{position:absolute;display:flex;left:0;width:100%;top:100%;align-items:center;justify-content:center;margin-top:1px}.calendar-day-event{width:var(--f7-calendar-event-dot-size);height:var(--f7-calendar-event-dot-size);border-radius:calc(var(--f7-calendar-event-dot-size)/ 2);background-color:var(--f7-calendar-event-bg-color)}.calendar-day-event+.calendar-day-event{margin-left:2px}.calendar-day-selected-left,.calendar-day-selected-range,.calendar-day-selected-right{position:relative}.calendar-day-selected-left:before,.calendar-day-selected-range:before,.calendar-day-selected-right:before{width:100%;height:var(--f7-calendar-day-size);content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);z-index:-1;background-color:var(--f7-calendar-selected-bg-color,var(--f7-theme-color));opacity:.2}.calendar-day-selected-left:before,.calendar-day-selected-range:first-child:before{left:auto;right:0;width:calc(50% + var(--f7-calendar-day-size)/ 2);border-radius:var(--f7-calendar-day-size) 0 0 var(--f7-calendar-day-size)}.calendar-day-selected-range:last-child:before,.calendar-day-selected-right:before{width:calc(50% + var(--f7-calendar-day-size)/ 2);border-radius:0 var(--f7-calendar-day-size) var(--f7-calendar-day-size) 0}.calendar-day-selected-left:last-child:before,.calendar-day-selected-right:first-child:before{display:none}.calendar-day-selected-range .calendar-day-number{background-color:transparent;color:inherit}.calendar-month-selector,.calendar-year-selector{display:flex;justify-content:space-between;align-items:center;width:50%;max-width:200px;flex-shrink:10;margin-left:auto;margin-right:auto}.calendar-month-selector .calendar-day-number,.calendar-year-selector .calendar-day-number{flex-shrink:1;position:relative;overflow:hidden;text-overflow:ellipsis}.calendar-month-selector a.icon-only,.calendar-year-selector a.icon-only{min-width:36px}.calendar-month-picker,.calendar-time-picker,.calendar-year-picker{position:absolute;width:100%;height:100%;left:0px;top:0px;background:var(--f7-calendar-picker-bg-color);z-index:1000;-webkit-user-select:none;user-select:none}.calendar-month-picker,.calendar-year-picker{flex-wrap:wrap;font-size:var(--f7-calendar-picker-font-size);display:flex}.calendar-month-picker-item,.calendar-year-picker-item{display:flex;justify-content:center;align-items:center;position:relative;overflow:hidden;cursor:pointer;transition-duration:.1s;box-sizing:border-box}.calendar-month-picker-item span,.calendar-year-picker-item span{white-space:nowrap;text-overflow:ellipsis;box-sizing:border-box;position:relative;overflow:hidden;pointer-events:none}.device-desktop.aurora .calendar-month-picker-item:hover,.device-desktop.aurora .calendar-year-picker-item:hover{background-color:var(--f7-calendar-picker-hover-bg-color)}.calendar-month-picker-item.active-state,.calendar-year-picker-item.active-state,.device-desktop.aurora .calendar-month-picker-item.active-state,.device-desktop.aurora .calendar-year-picker-item.active-state{background:var(--f7-calendar-picker-pressed-bg-color)}.calendar-month-picker-item{padding:5px}.calendar-month-picker-item:after{content:'';position:absolute;background-color:var(--f7-calendar-row-border-color);display:block;z-index:15;top:auto;right:auto;bottom:0;left:0;height:1px;width:100%;transform-origin:50% 100%;transform:scaleY(calc(1 / var(--f7-device-pixel-ratio)))}.calendar-month-picker-item:before{content:'';position:absolute;background-color:var(--f7-calendar-row-border-color);display:block;z-index:15;top:0;right:auto;bottom:auto;left:0;width:1px;height:100%;transform-origin:0% 50%;transform:scaleX(calc(1 / var(--f7-device-pixel-ratio)))}.sheet-modal .calendar-month-picker-item{width:25%;height:33.33333333%}.sheet-modal .calendar-month-picker-item:nth-child(4n+1):before{display:none!important}.sheet-modal .calendar-month-picker-item:nth-child(n+9):after{display:none!important}.calendar-modal .calendar-month-picker-item,.popover .calendar-month-picker-item{width:33.33333333%;height:25%}.calendar-modal .calendar-month-picker-item:nth-child(3n+1):before,.popover .calendar-month-picker-item:nth-child(3n+1):before{display:none!important}.calendar-modal .calendar-month-picker-item:nth-child(n+10):after,.popover .calendar-month-picker-item:nth-child(n+10):after{display:none!important}.calendar-month-picker-item-current,.calendar-year-picker-item-current{color:var(--f7-calendar-picker-selected-text-color,var(--f7-theme-color))}.calendar-year-picker{overflow:auto;--webkit-overflow-scrolling:touch}.calendar-year-picker-item{height:34px;line-height:34px;width:100%}.calendar-year-picker-item:after{content:'';position:absolute;background-color:var(--f7-calendar-row-border-color);display:block;z-index:15;top:auto;right:auto;bottom:0;left:0;height:1px;width:100%;transform-origin:50% 100%;transform:scaleY(calc(1 / var(--f7-device-pixel-ratio)))}.calendar-time-selector{flex-shrink:0;font-size:var(--f7-calendar-time-selector-font-size);position:relative;display:flex;justify-content:center;padding:12px 16px}.calendar-time-selector:before{content:'';position:absolute;background-color:var(--f7-calendar-row-border-color);display:block;z-index:15;top:0;right:auto;bottom:auto;left:0;height:1px;width:100%;transform-origin:50% 0%;transform:scaleY(calc(1 / var(--f7-device-pixel-ratio)))}.calendar-time-selector a{overflow:hidden;position:relative;justify-content:center;align-items:center;display:flex;min-width:200px;box-sizing:border-box;height:var(--f7-calendar-time-selector-height);background-color:var(--f7-calendar-time-selector-bg-color);padding:0 10px;border-radius:8px}.calendar-time-selector .segmented{margin-left:8px}.calendar-time-picker{--f7-picker-popover-height:100%;--f7-picker-inline-height:100%}.calendar-time-picker .toolbar{flex-shrink:0;top:0!important}.calendar-time-picker .picker{height:100%;display:flex;flex-direction:column}
+:root{--f7-calendar-height:340px;--f7-calendar-sheet-landscape-height:220px;--f7-calendar-popover-width:320px;--f7-calendar-popover-height:320px;--f7-calendar-modal-height:420px;--f7-calendar-modal-max-width:380px;--f7-calendar-modal-border-radius:4px;--f7-calendar-week-header-bg-color:transparent;--f7-calendar-footer-padding:0 8px;--f7-calendar-week-header-font-size:11px;--f7-calendar-selected-text-color:#fff;--f7-calendar-disabled-text-color:#d4d4d4;--f7-calendar-event-dot-size:4px;--f7-calendar-time-selector-height:28px;--f7-calendar-week-header-text-color:#5e5e5e;--f7-calendar-prev-next-text-color:#c8c8c8;--f7-calendar-day-text-color:#000;--f7-calendar-sheet-bg-color:#fff;--f7-calendar-modal-bg-color:#fff;--f7-calendar-picker-pressed-bg-color:rgba(0, 0, 0, 0.1);--f7-calendar-picker-hover-bg-color:rgba(0, 0, 0, 0.03);--f7-calendar-time-selector-bg-color:rgba(0, 0, 0, 0.05)}:root .dark,:root.dark{--f7-calendar-week-header-text-color:#aaa;--f7-calendar-prev-next-text-color:#5e5e5e;--f7-calendar-sheet-border-color:var(--f7-bars-border-color);--f7-calendar-modal-bg-color:#121212;--f7-calendar-sheet-bg-color:#121212;--f7-calendar-picker-pressed-bg-color:rgba(255, 255, 255, 0.08);--f7-calendar-picker-hover-bg-color:rgba(255, 255, 255, 0.03);--f7-calendar-time-selector-bg-color:rgba(255, 255, 255, 0.1)}.ios{--f7-calendar-sheet-border-color:#929499;--f7-calendar-header-height:44px;--f7-calendar-header-font-size:17px;--f7-calendar-header-font-weight:600;--f7-calendar-header-padding:0 8px;--f7-calendar-footer-height:44px;--f7-calendar-footer-font-size:17px;--f7-calendar-week-header-height:18px;--f7-calendar-day-font-size:15px;--f7-calendar-day-size:30px;--f7-calendar-picker-font-size:17px;--f7-calendar-time-selector-font-size:17px;--f7-calendar-today-text-color:#000;--f7-calendar-today-bg-color:#e3e3e3}.ios .dark,.ios.dark{--f7-calendar-day-text-color:#fff;--f7-calendar-today-text-color:#fff;--f7-calendar-today-bg-color:#333}.md{--f7-calendar-sheet-border-color:#ccc;--f7-calendar-header-height:56px;--f7-calendar-header-font-size:20px;--f7-calendar-header-font-weight:400;--f7-calendar-header-padding:0 24px;--f7-calendar-footer-height:48px;--f7-calendar-footer-font-size:14px;--f7-calendar-week-header-height:24px;--f7-calendar-day-font-size:14px;--f7-calendar-today-bg-color:none;--f7-calendar-day-size:32px;--f7-calendar-picker-font-size:14px;--f7-calendar-time-selector-font-size:14px}.md .dark,.md.dark{--f7-calendar-day-text-color:rgba(255, 255, 255, 0.87)}.aurora{--f7-calendar-sheet-border-color:#ccc;--f7-calendar-header-height:56px;--f7-calendar-header-font-size:18px;--f7-calendar-header-font-weight:600;--f7-calendar-header-padding:0 16px;--f7-calendar-footer-height:48px;--f7-calendar-footer-font-size:14px;--f7-calendar-footer-padding:0 16px;--f7-calendar-week-header-height:24px;--f7-calendar-day-font-size:14px;--f7-calendar-day-size:32px;--f7-calendar-picker-font-size:16px;--f7-calendar-time-selector-font-size:14px;--f7-calendar-today-text-color:#000;--f7-calendar-today-bg-color:#e3e3e3}.aurora .dark,.aurora.dark{--f7-calendar-day-text-color:#fff;--f7-calendar-today-text-color:#fff;--f7-calendar-today-bg-color:#333}.calendar{overflow:hidden;height:var(--f7-calendar-height);width:100%;display:flex;flex-direction:column}.aurora .calendar{--f7-toolbar-border-color:transparent;--f7-bars-border-color:transparent}.calendar.modal-in{display:flex}@media (orientation:landscape) and (max-height:415px){.calendar.calendar-sheet{height:var(--f7-calendar-sheet-landscape-height)}.calendar.calendar-modal{height:calc(100vh - var(--f7-navbar-height))}}.calendar.calendar-inline,.calendar.calendar-popover .calendar{position:relative}.calendar-sheet{--f7-sheet-border-color:var(--f7-calendar-sheet-border-color);background:var(--f7-calendar-sheet-bg-color);padding-bottom:var(--f7-safe-area-bottom);height:calc(var(--f7-calendar-height) + var(--f7-safe-area-bottom))}.calendar-sheet:before{z-index:600}.calendar-modal .toolbar:before,.calendar-popover .toolbar:before,.calendar-sheet .toolbar:before{display:none}.calendar-popover{width:var(--f7-calendar-popover-width)}.calendar-popover .calendar-header,.calendar-popover .toolbar-top{border-radius:var(--f7-popover-border-radius) var(--f7-popover-border-radius) 0 0}.calendar-popover .calendar-header+.toolbar-top{border-radius:0}.calendar-popover .calendar-footer,.calendar-popover .toolbar-bottom{border-radius:0 0 var(--f7-popover-border-radius) var(--f7-popover-border-radius)}.calendar-popover .calendar{height:var(--f7-calendar-popover-height);position:relative;z-index:1}.calendar-popover .calendar-month-picker,.calendar-popover .calendar-time-picker,.calendar-popover .calendar-year-picker{border-radius:var(--f7-popover-border-radius)}.calendar-header{width:100%;position:relative;overflow:hidden;flex-shrink:0;white-space:nowrap;text-overflow:ellipsis;box-sizing:border-box;padding:var(--f7-calendar-header-padding);background-color:var(--f7-calendar-header-bg-color,var(--f7-bars-bg-color));color:var(--f7-calendar-header-text-color,var(--f7-bars-text-color));height:var(--f7-calendar-header-height);line-height:var(--f7-calendar-header-height);font-size:var(--f7-calendar-header-font-size);font-weight:var(--f7-calendar-header-font-weight)}.calendar-header a{color:var(--f7-calendar-header-link-color,var(--f7-bars-link-color,var(--f7-theme-color)))}.calendar-footer{width:100%;flex-shrink:0;padding:var(--f7-calendar-footer-padding);background-color:var(--f7-calendar-footer-bg-color,var(--f7-bars-bg-color));color:var(--f7-calendar-footer-text-color,var(--f7-bars-text-color));height:var(--f7-calendar-footer-height);font-size:var(--f7-calendar-header-font-size);display:flex;justify-content:flex-end;box-sizing:border-box;align-items:center;position:relative}.calendar-footer a{color:var(--f7-calendar-footer-link-color,var(--f7-bars-link-color,var(--f7-theme-color)))}.calendar-footer:before{content:'';position:absolute;background-color:var(--f7-calendar-footer-border-color,var(--f7-bars-border-color));display:block;z-index:15;top:0;right:auto;bottom:auto;left:0;height:1px;width:100%;transform-origin:50% 0%;transform:scaleY(calc(1 / var(--f7-device-pixel-ratio)))}.calendar-modal{position:absolute;height:var(--f7-calendar-modal-height);overflow:hidden;top:50%;left:50%;min-width:300px;max-width:var(--f7-calendar-modal-max-width);transform:translate3d(-50%,100vh,0);transition-property:transform;display:flex;z-index:13500;background:var(--f7-calendar-modal-bg-color);width:90%;border-radius:var(--f7-calendar-modal-border-radius);box-shadow:var(--f7-elevation-24)}.calendar-modal.modal-in,.calendar-modal.modal-out{transition-duration:.4s}.calendar-modal.modal-in{transform:translate3d(-50%,-50%,0)}.calendar-modal.modal-out{transform:translate3d(-50%,100vh,0)}.calendar-week-header{display:flex;box-sizing:border-box;position:relative;font-size:var(--f7-calendar-week-header-font-size);background-color:var(--f7-calendar-week-header-bg-color,var(--f7-bars-bg-color));color:var(--f7-calendar-week-header-text-color,var(--f7-bars-text-color));height:var(--f7-calendar-week-header-height);padding-left:var(--f7-safe-area-left);padding-right:var(--f7-safe-area-right)}.calendar-week-header .calendar-week-day{flex-shrink:1;width:calc(100% / 7);text-align:center;line-height:var(--f7-calendar-week-header-height)}.calendar-months{width:100%;height:100%;overflow:hidden;position:relative;flex-shrink:10}.calendar-months-wrapper{position:relative;width:100%;height:100%;transition:.3s}.calendar-month{display:flex;flex-direction:column;width:100%;height:100%;position:absolute;left:0;top:0}.calendar-row{height:16.66666667%;display:flex;flex-shrink:1;width:100%;position:relative;box-sizing:border-box;padding-left:var(--f7-safe-area-left);padding-right:var(--f7-safe-area-right)}.calendar-modal .calendar-months:first-child .calendar-row:first-child:before,.calendar-popover .calendar-months:first-child .calendar-row:first-child:before{display:none!important}.calendar-day{flex-shrink:1;display:flex;justify-content:center;align-items:center;box-sizing:border-box;width:14.28571429%;text-align:center;cursor:pointer;z-index:20;color:var(--f7-calendar-day-text-color);height:100%;font-size:var(--f7-calendar-day-font-size)}.calendar-day-today .calendar-day-number{color:var(--f7-calendar-today-text-color,var(--f7-theme-color));background-color:var(--f7-calendar-today-bg-color)}.calendar-day-next,.calendar-day-prev{color:var(--f7-calendar-prev-next-text-color)}.calendar-day-disabled{color:var(--f7-calendar-disabled-text-color);cursor:auto}.calendar-day-selected .calendar-day-number{color:var(--f7-calendar-selected-text-color);background-color:var(--f7-calendar-selected-bg-color,var(--f7-theme-color))}.calendar-day-number{display:inline-block;border-radius:50%;position:relative;width:var(--f7-calendar-day-size);height:var(--f7-calendar-day-size);line-height:var(--f7-calendar-day-size)}.calendar-day-events{position:absolute;display:flex;left:0;width:100%;top:100%;align-items:center;justify-content:center;margin-top:1px}.calendar-day-event{width:var(--f7-calendar-event-dot-size);height:var(--f7-calendar-event-dot-size);border-radius:calc(var(--f7-calendar-event-dot-size)/ 2);background-color:var(--f7-calendar-event-bg-color)}.calendar-day-event+.calendar-day-event{margin-left:2px}.calendar-day-selected-left,.calendar-day-selected-range,.calendar-day-selected-right{position:relative}.calendar-day-selected-left:before,.calendar-day-selected-range:before,.calendar-day-selected-right:before{width:100%;height:var(--f7-calendar-day-size);content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);z-index:-1;background-color:var(--f7-calendar-selected-bg-color,var(--f7-theme-color));opacity:.2}.calendar-day-selected-left:before,.calendar-day-selected-range:first-child:before{left:auto;right:0;width:calc(50% + var(--f7-calendar-day-size)/ 2);border-radius:var(--f7-calendar-day-size) 0 0 var(--f7-calendar-day-size)}.calendar-day-selected-range:last-child:before,.calendar-day-selected-right:before{width:calc(50% + var(--f7-calendar-day-size)/ 2);border-radius:0 var(--f7-calendar-day-size) var(--f7-calendar-day-size) 0}.calendar-day-selected-left:last-child:before,.calendar-day-selected-right:first-child:before{display:none}.calendar-day-selected-range .calendar-day-number{background-color:transparent;color:inherit}.calendar-month-selector,.calendar-year-selector{display:flex;justify-content:space-between;align-items:center;width:50%;max-width:200px;flex-shrink:10;margin-left:auto;margin-right:auto}.calendar-month-selector .calendar-day-number,.calendar-year-selector .calendar-day-number{flex-shrink:1;position:relative;overflow:hidden;text-overflow:ellipsis}.calendar-month-selector a.icon-only,.calendar-year-selector a.icon-only{min-width:36px}.calendar-month-picker,.calendar-time-picker,.calendar-year-picker{position:relative;width:100%;height:100%;-webkit-user-select:none;user-select:none;background:0 0}.calendar-month-picker .picker-columns,.calendar-year-picker .picker-columns{text-align:center}.calendar-month-picker-item,.calendar-year-picker-item{display:flex;justify-content:center;align-items:center;position:relative;overflow:hidden;cursor:pointer;transition-duration:.1s;box-sizing:border-box}.calendar-month-picker-item span,.calendar-year-picker-item span{white-space:nowrap;text-overflow:ellipsis;box-sizing:border-box;position:relative;overflow:hidden;pointer-events:none}.device-desktop.aurora .calendar-month-picker-item:hover,.device-desktop.aurora .calendar-year-picker-item:hover{background-color:var(--f7-calendar-picker-hover-bg-color)}.calendar-month-picker-item.active-state,.calendar-year-picker-item.active-state,.device-desktop.aurora .calendar-month-picker-item.active-state,.device-desktop.aurora .calendar-year-picker-item.active-state{background:var(--f7-calendar-picker-pressed-bg-color)}.calendar-month-picker-item{padding:5px}.sheet-modal .calendar-month-picker-item{width:25%;height:33.33333333%}.sheet-modal .calendar-month-picker-item:nth-child(4n+1):before{display:none!important}.sheet-modal .calendar-month-picker-item:nth-child(n+9):after{display:none!important}.calendar-modal .calendar-month-picker-item,.popover .calendar-month-picker-item{width:33.33333333%;height:25%}.calendar-modal .calendar-month-picker-item:nth-child(3n+1):before,.popover .calendar-month-picker-item:nth-child(3n+1):before{display:none!important}.calendar-modal .calendar-month-picker-item:nth-child(n+10):after,.popover .calendar-month-picker-item:nth-child(n+10):after{display:none!important}.calendar-month-picker-item-current,.calendar-year-picker-item-current{color:var(--f7-calendar-picker-selected-text-color,var(--f7-theme-color))}.calendar-year-picker{overflow:auto;--webkit-overflow-scrolling:touch}.calendar-year-picker-item{height:34px;line-height:34px;width:100%}.calendar-time-selector{flex-shrink:0;font-size:var(--f7-calendar-time-selector-font-size);position:relative;display:flex;justify-content:space-between;align-items:center;padding:12px 16px}.calendar-time-selector a{overflow:hidden;position:relative;justify-content:center;align-items:center;display:flex;box-sizing:border-box;height:var(--f7-calendar-time-selector-height);background-color:var(--f7-calendar-time-selector-bg-color);padding:0 16px;border-radius:8px}.calendar-time-selector>span{font-weight:500}.calendar-time-selector .segmented{margin-left:8px}.calendar-month-picker-popover,.calendar-time-picker-popover,.calendar-year-picker-popover{height:240px;width:240px}.calendar-month-picker-popover .popover-inner,.calendar-time-picker-popover .popover-inner,.calendar-year-picker-popover .popover-inner{height:100%}.calendar-time-picker{--f7-picker-popover-height:100%;--f7-picker-inline-height:100%}.calendar-time-picker .toolbar{flex-shrink:0;top:0!important}.calendar-time-picker .picker{height:100%;display:flex;flex-direction:column}

package/components/calendar/calendar-vars.less

@@ -14,16 +14,14 @@
   --f7-calendar-footer-border-color: var(--f7-bars-border-color);
   --f7-calendar-footer-link-color: var(--f7-bars-link-color);
   --f7-calendar-footer-text-color: var(--f7-bars-text-color);
-  --f7-calendar-week-header-bg-color: var(--f7-bars-bg-color);
-  --f7-calendar-week-header-text-color: var(--f7-bars-text-color);
   */
+  --f7-calendar-week-header-bg-color: transparent;
   --f7-calendar-footer-padding: 0 8px;
   --f7-calendar-week-header-font-size: 11px;
   --f7-calendar-selected-text-color: #fff;
   /*
   --f7-calendar-selected-bg-color:  var(--f7-theme-color);
   */
-  --f7-calendar-prev-next-text-color: #b8b8b8;
   --f7-calendar-disabled-text-color: #d4d4d4;
   --f7-calendar-event-dot-size: 4px;
   /*
@@ -34,19 +32,21 @@
   */
   --f7-calendar-time-selector-height: 28px;
   .light-vars({
+    --f7-calendar-week-header-text-color: #5e5e5e;
+    --f7-calendar-prev-next-text-color: #c8c8c8;
     --f7-calendar-day-text-color:  #000;
     --f7-calendar-sheet-bg-color: #fff;
     --f7-calendar-modal-bg-color: #fff;
-    --f7-calendar-picker-bg-color: #fff;
     --f7-calendar-picker-pressed-bg-color: rgba(0,0,0,0.1);
     --f7-calendar-picker-hover-bg-color: rgba(0,0,0,0.03);
-    --f7-calendar-time-selector-bg-color: rgba(0,0,0,0.1);
+    --f7-calendar-time-selector-bg-color: rgba(0,0,0,0.05);
   });
   .dark-vars({
+    --f7-calendar-week-header-text-color: #aaa;
+    --f7-calendar-prev-next-text-color: #5e5e5e;
     --f7-calendar-sheet-border-color: var(--f7-bars-border-color);
     --f7-calendar-modal-bg-color: #121212;
     --f7-calendar-sheet-bg-color: #121212;
-    --f7-calendar-picker-bg-color: #1c1c1d;
     --f7-calendar-picker-pressed-bg-color: rgba(255,255,255,0.08);
     --f7-calendar-picker-hover-bg-color: rgba(255,255,255,0.03);
     --f7-calendar-time-selector-bg-color: rgba(255,255,255,0.1);
@@ -66,12 +66,10 @@
   --f7-calendar-picker-font-size: 17px;
   --f7-calendar-time-selector-font-size: 17px;
   .light-vars({
-    --f7-calendar-row-border-color: rgba(0,0,0,0.25);
     --f7-calendar-today-text-color: #000;
     --f7-calendar-today-bg-color: #e3e3e3;
   });
   .dark-vars({
-    --f7-calendar-row-border-color: var(--f7-bars-border-color);
     --f7-calendar-day-text-color: #fff;
     --f7-calendar-today-text-color: #fff;
     --f7-calendar-today-bg-color: #333;
@@ -86,7 +84,6 @@
   --f7-calendar-footer-height: 48px;
   --f7-calendar-footer-font-size: 14px;
   --f7-calendar-week-header-height: 24px;
-  --f7-calendar-row-border-color: transparent;
   --f7-calendar-day-font-size: 14px;
   /*
   --f7-calendar-today-text-color: var(--f7-theme-color);
@@ -113,7 +110,6 @@
   --f7-calendar-day-size: 32px;
   --f7-calendar-picker-font-size: 16px;
   --f7-calendar-time-selector-font-size: 14px;
-  --f7-calendar-row-border-color: transparent;
   .light-vars({
     --f7-calendar-today-text-color: #000;
     --f7-calendar-today-bg-color: #e3e3e3;