@tuya-miniapp/smart-ui 2.7.1-beta-13 → 2.7.2-beta-0

package/lib/calendar/index.js

@@ -0,0 +1,465 @@
+"use strict";
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var component_1 = require("../common/component");
+var utils_1 = require("../calendar-utils/utils");
+var dateEdge = (0, utils_1.getInitEdgeDate)('year');
+var getTime = function (date) { return (date instanceof Date ? date.getTime() : date); };
+(0, component_1.SmartComponent)({
+    props: {
+        title: {
+            type: String,
+            value: 'Select Date',
+        },
+        color: String,
+        show: {
+            type: Boolean,
+            observer: function (val) {
+                if (val) {
+                    this.initRect();
+                    this.scrollIntoView();
+                }
+                else {
+                    this.setData({
+                        visibleIndex: 0,
+                    });
+                }
+            },
+        },
+        locale: {
+            type: Object,
+            value: {
+                shortWeekDays: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+                monthsFormatter: [
+                    'Jan',
+                    'Feb',
+                    'Mar',
+                    'Apr',
+                    'May',
+                    'Jun',
+                    'Jul',
+                    'Aug',
+                    'Sept',
+                    'Oct',
+                    'Nov',
+                    'Dec',
+                ],
+                yearFormatter: 'YYYY',
+                subFormatter: 'YYYY-MM',
+                rangeStart: 'Start',
+                rangeEnd: 'End',
+            },
+        },
+        confirmText: {
+            type: String,
+            value: 'Confirm',
+        },
+        confirmDisabledText: {
+            type: String,
+            value: 'Confirm',
+        },
+        headerIconColor: {
+            type: String,
+            value: 'var(--calendar-header-icon_color)',
+        },
+        rangePrompt: String,
+        showRangePrompt: {
+            type: Boolean,
+            value: true,
+        },
+        defaultDate: {
+            type: null,
+            value: (0, utils_1.getToday)().getTime(),
+            observer: function (val) {
+                this.setData({ currentDate: val });
+                this.scrollIntoView();
+            },
+        },
+        allowSameDay: Boolean,
+        type: {
+            type: String,
+            value: 'single',
+            observer: 'reset',
+        },
+        minDate: {
+            type: Number,
+            value: dateEdge.min,
+        },
+        maxDate: {
+            type: Number,
+            value: dateEdge.max,
+        },
+        position: {
+            type: String,
+            value: 'bottom',
+        },
+        rowHeight: {
+            type: null,
+        },
+        round: {
+            type: Boolean,
+            value: true,
+        },
+        poppable: {
+            type: Boolean,
+            value: false,
+        },
+        showMark: {
+            type: Boolean,
+            value: true,
+        },
+        showTitle: {
+            type: Boolean,
+            value: true,
+        },
+        showConfirm: {
+            type: Boolean,
+            value: false,
+        },
+        showSubtitle: {
+            type: Boolean,
+            value: true,
+        },
+        safeAreaInsetBottom: {
+            type: Boolean,
+            value: false,
+        },
+        closeOnClickOverlay: {
+            type: Boolean,
+            value: true,
+        },
+        maxRange: {
+            type: null,
+            value: null,
+        },
+        minRange: {
+            type: Number,
+            value: 1,
+        },
+        firstDayOfWeek: {
+            type: Number,
+            value: 0,
+        },
+        readonly: Boolean,
+        rootPortal: {
+            type: Boolean,
+            value: false,
+        },
+        dayClassMap: {
+            type: null,
+        },
+    },
+    data: {
+        subtitle: '',
+        currentDate: null,
+        originCurrentDateMonthly: null,
+        scrollIntoView: '',
+        visibleIndex: 0,
+        months: [],
+        showToast: false,
+    },
+    watch: {
+        minDate: function () {
+            this.initRect();
+        },
+        maxDate: function () {
+            this.initRect();
+        },
+    },
+    created: function () {
+        this.initData();
+    },
+    mounted: function () {
+        this.isMounted = true;
+        if (this.data.show || !this.data.poppable) {
+            this.initRect();
+            this.scrollIntoView();
+        }
+    },
+    methods: {
+        onPrev: function () {
+            var visibleIndex = this.data.visibleIndex - 1;
+            if (this.data.type === 'year') {
+                this.setData({
+                    visibleIndex: visibleIndex,
+                });
+                return;
+            }
+            if (this.data.type === 'month') {
+                this.setData({
+                    visibleIndex: visibleIndex,
+                });
+                return;
+            }
+            if (this.data.months[visibleIndex]) {
+                this.setData({
+                    visibleIndex: visibleIndex,
+                });
+            }
+        },
+        onNext: function () {
+            var visibleIndex = this.data.visibleIndex + 1;
+            if (this.data.type === 'year') {
+                this.setData({
+                    visibleIndex: visibleIndex,
+                });
+                return;
+            }
+            if (this.data.type === 'month') {
+                this.setData({
+                    visibleIndex: visibleIndex,
+                });
+                return;
+            }
+            if (this.data.months[visibleIndex]) {
+                this.setData({
+                    visibleIndex: visibleIndex,
+                });
+            }
+        },
+        reset: function () {
+            var currentDate = this.getInitialDate(this.data.defaultDate);
+            this.setData({ currentDate: currentDate, visibleIndex: 0 });
+            this.scrollIntoView();
+        },
+        initData: function () {
+            var currentDate = this.getInitialDate(this.data.defaultDate);
+            var months = (0, utils_1.getMonths)(this.data.minDate, this.data.maxDate);
+            var visibleIndex = this.data.defaultDate
+                ? (0, utils_1.getCurrentIndex)(currentDate, months)
+                : months.length - 1;
+            var isYear = this.data.type === 'year';
+            var isMonth = this.data.type === 'month';
+            var data = {
+                currentDate: currentDate,
+                // 初始化时记录一份，用于month列表展示头部
+                originCurrentDateMonthly: currentDate,
+                months: months,
+                visibleIndex: visibleIndex,
+            };
+            if (isYear || isMonth) {
+                // @ts-ignore
+                delete data.visibleIndex;
+            }
+            this.setData(data);
+        },
+        initRect: function () {
+            if (!this.isMounted)
+                return;
+            this.initData();
+        },
+        limitDateRange: function (date, minDate, maxDate) {
+            if (minDate === void 0) { minDate = null; }
+            if (maxDate === void 0) { maxDate = null; }
+            var _a = (0, utils_1.getInitEdgeDate)(this.data.type), min = _a.min, max = _a.max;
+            minDate = minDate || this.data.minDate || min;
+            maxDate = maxDate || this.data.maxDate || max;
+            if ((0, utils_1.compareDay)(date, minDate) === -1) {
+                return minDate;
+            }
+            if ((0, utils_1.compareDay)(date, maxDate) === 1) {
+                return maxDate;
+            }
+            return date;
+        },
+        getInitialDate: function (defaultDate) {
+            var _this = this;
+            if (defaultDate === void 0) { defaultDate = null; }
+            var _a = this.data, type = _a.type, minDate = _a.minDate, maxDate = _a.maxDate, allowSameDay = _a.allowSameDay;
+            if (!defaultDate)
+                return [];
+            var now = (0, utils_1.getToday)().getTime();
+            if (type === 'range' || type === 'week') {
+                if (!Array.isArray(defaultDate)) {
+                    defaultDate = [];
+                }
+                var _b = defaultDate || [], startDay = _b[0], endDay = _b[1];
+                var startDate = getTime(startDay || now);
+                var start = this.limitDateRange(startDate, minDate, allowSameDay ? startDate : (0, utils_1.getPrevDay)(new Date(maxDate)).getTime());
+                var date = getTime(endDay || now);
+                var end = this.limitDateRange(date, allowSameDay ? date : (0, utils_1.getNextDay)(new Date(minDate)).getTime());
+                return [start, end];
+            }
+            if (type === 'multiple') {
+                if (Array.isArray(defaultDate)) {
+                    return defaultDate.map(function (date) { return _this.limitDateRange(date); });
+                }
+                return [this.limitDateRange(now)];
+            }
+            if (!defaultDate || Array.isArray(defaultDate)) {
+                defaultDate = now;
+            }
+            return this.limitDateRange(defaultDate);
+        },
+        scrollIntoView: function () {
+            // if (!this.isMounted) return;
+        },
+        onOpen: function () {
+            this.$emit('open');
+        },
+        onOpened: function () {
+            this.$emit('opened');
+        },
+        onClose: function () {
+            this.$emit('close');
+        },
+        onClosed: function () {
+            this.$emit('closed');
+        },
+        onClickDay: function (event) {
+            if (this.data.readonly) {
+                return;
+            }
+            var date = event.detail.date;
+            var _a = this.data, type = _a.type, currentDate = _a.currentDate, allowSameDay = _a.allowSameDay;
+            if (type === 'week') {
+                var _b = (0, utils_1.getWeekStartAndEnd)(date), weekStart = _b.weekStart, weekEnd = _b.weekEnd;
+                this.select([
+                    Math.max(getTime(weekStart), getTime(this.data.minDate)),
+                    Math.min(getTime(weekEnd), getTime(this.data.maxDate)),
+                ], true);
+            }
+            else if (type === 'range') {
+                // @ts-ignore
+                var startDay_1 = currentDate[0], endDay = currentDate[1];
+                if (startDay_1 && !endDay) {
+                    var compareToStart = (0, utils_1.compareDay)(date, startDay_1);
+                    if (compareToStart === 1) {
+                        var days_1 = this.selectComponent('.month').data.days;
+                        days_1.some(function (day, index) {
+                            var isDisabled = day.type === 'disabled' &&
+                                getTime(startDay_1) < getTime(day.date) &&
+                                getTime(day.date) < getTime(date);
+                            if (isDisabled) {
+                                (date = days_1[index - 1].date);
+                            }
+                            return isDisabled;
+                        });
+                        this.select([startDay_1, date], true);
+                    }
+                    else if (compareToStart === -1) {
+                        this.select([date, null]);
+                    }
+                    else if (allowSameDay) {
+                        this.select([date, date], true);
+                    }
+                }
+                else {
+                    this.select([date, null]);
+                }
+            }
+            else if (type === 'multiple') {
+                var selectedIndex_1;
+                // @ts-ignore
+                var selected = currentDate.some(function (dateItem, index) {
+                    var equal = (0, utils_1.compareDay)(dateItem, date) === 0;
+                    if (equal) {
+                        selectedIndex_1 = index;
+                    }
+                    return equal;
+                });
+                if (selected) {
+                    // @ts-ignore
+                    var cancelDate = currentDate.splice(selectedIndex_1, 1);
+                    this.setData({ currentDate: currentDate });
+                    this.unselect(cancelDate);
+                }
+                else {
+                    // @ts-ignore
+                    this.select(__spreadArray(__spreadArray([], currentDate, true), [date], false));
+                }
+            }
+            else {
+                this.select(date, true);
+            }
+        },
+        onClickDate: function (event) {
+            if (this.data.readonly) {
+                return;
+            }
+            var date = event.detail;
+            this.select(date, true);
+            this.setData({
+                visibleIndex: 0,
+            });
+        },
+        onChangeMonthTitleDate: function (event) {
+            if (this.data.originCurrentDateMonthly !== event.detail) {
+                this.setData({
+                    originCurrentDateMonthly: event.detail,
+                });
+            }
+        },
+        unselect: function (dateArray) {
+            var date = dateArray[0];
+            if (date) {
+                this.$emit('unselect', (0, utils_1.copyDates)(date));
+            }
+        },
+        select: function (date, complete) {
+            if (complete && this.data.type === 'range') {
+                var valid = this.checkRange(date);
+                if (!valid) {
+                    // auto selected to max range if type is range
+                    if (this.data.type === 'range' && this.data.maxRange) {
+                        this.emit([date[0], (0, utils_1.getDayByOffset)(date[0], this.data.maxRange - 1)]);
+                    }
+                    else {
+                        this.emit(date);
+                    }
+                    return;
+                }
+            }
+            this.emit(date);
+            if (complete && !this.data.showConfirm) {
+                this.onConfirm();
+            }
+        },
+        emit: function (date) {
+            this.setData({
+                currentDate: Array.isArray(date) ? date.map(getTime) : getTime(date),
+            });
+            this.$emit('select', (0, utils_1.copyDates)(date));
+        },
+        checkRange: function (date) {
+            var _this = this;
+            var _a = this.data, maxRange = _a.maxRange, showRangePrompt = _a.showRangePrompt;
+            if (maxRange && (0, utils_1.calcDateNum)(date) > maxRange) {
+                if (showRangePrompt) {
+                    this.setData({
+                        showToast: true,
+                    });
+                    setTimeout(function () {
+                        _this.setData({
+                            showToast: false,
+                        });
+                    }, 2000);
+                }
+                this.$emit('over-range');
+                return false;
+            }
+            return true;
+        },
+        onConfirm: function () {
+            var _this = this;
+            if (this.data.type === 'range' && !this.checkRange(this.data.currentDate)) {
+                return;
+            }
+            wx.nextTick(function () {
+                // @ts-ignore
+                _this.$emit('confirm', (0, utils_1.copyDates)(_this.data.currentDate));
+            });
+        },
+        onClickSubtitle: function (event) {
+            this.$emit('click-subtitle', event);
+        },
+    },
+});

package/lib/calendar/index.json

@@ -0,0 +1,12 @@
+{
+  "component": true,
+  "usingComponents": {
+    "header": "../calendar-header/index",
+    "month": "../calendar-month/index",
+    "month-list": "../calendar-month-list/index",
+    "year-list": "../calendar-year-list/index",
+    "smart-button": "../button/index",
+    "smart-popup": "../popup/index",
+    "smart-toast": "../toast/index"
+  }
+}

package/lib/calendar/index.wxml

@@ -0,0 +1,25 @@
+<wxs src="./index.wxs" module="computed" />
+<wxs src="../wxs/utils.wxs" module="utils" />
+
+<import src="./calendar.wxml" />
+
+<smart-popup
+  wx:if="{{ poppable }}"
+  custom-class="smart-calendar__popup--{{ position }}"
+  close-icon-class="smart-calendar__close-icon"
+  show="{{ show }}"
+  round="{{ round }}"
+  position="{{ position }}"
+  closeable="{{false}}"
+  close-on-click-overlay="{{ closeOnClickOverlay }}"
+  safe-area-inset-bottom="{{ safeAreaInsetBottom }}"
+  root-portal="{{ rootPortal }}"
+  bind:enter="onOpen"
+  bind:close="onClose"
+  bind:after-enter="onOpened"
+  bind:after-leave="onClosed"
+>
+  <include src="./calendar.wxml" />
+</smart-popup>
+
+<include wx:else src="./calendar.wxml" />

package/lib/calendar/index.wxs

@@ -0,0 +1,59 @@
+/* eslint-disable */
+var utils = require('../calendar-utils/utils.wxs');
+
+function getMonths(minDate, maxDate) {
+  var months = [];
+  var cursor = getDate(minDate);
+
+  cursor.setDate(1);
+
+  do {
+    months.push(cursor.getTime());
+    cursor.setMonth(cursor.getMonth() + 1);
+  } while (utils.compareMonth(cursor, getDate(maxDate)) !== 1);
+
+  return months;
+}
+
+function getButtonDisabled(type, currentDate, minRange) {
+  if (currentDate == null) {
+    return true;
+  }
+
+  if (type === 'range') {
+    return !currentDate[0] || !currentDate[1];
+  }
+
+  if (type === 'multiple') {
+    return currentDate.length < minRange;
+  }
+
+  return !currentDate;
+}
+
+function getVisible(visibleIndex, curIndex) {
+  return visibleIndex === curIndex;
+}
+
+function formatMonthTitle(date, formatter = 'YYYY-MM') {
+  if (!date) return '';
+  date = getDate(date);
+  var year = date.getFullYear();
+  var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1 + '';
+  return formatter.replace('YYYY', year + '').replace('MM', month);
+}
+
+function formatYearTitle(date, offset, formatter = 'YYYY') {
+  if (!date) return '';
+  date = getDate(date);
+  var year = date.getFullYear();
+  return formatter.replace('YYYY', year + '');
+}
+
+module.exports = {  
+  getMonths: getMonths,
+  getVisible: getVisible,
+  getButtonDisabled: getButtonDisabled,
+  formatMonthTitle: formatMonthTitle,
+  formatYearTitle: formatYearTitle,
+};

package/lib/calendar/index.wxss

@@ -0,0 +1 @@
+@import '../common/index.wxss';:root{--smart-ui-overlay:rgba(0,0,0,.4);--smart-ui-dialog-background:#fff;--smart-ui-border-image:linear-gradient(90deg,transparent,rgba(0,0,0,.3),transparent)}:root[theme=dark]{--smart-ui-overlay:rgba(0,0,0,.7);--smart-ui-dialog-background:#333;--smart-ui-border-image:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.3),hsla(0,0%,100%,0))}.smart-calendar{--calendar-header-icon_color:var(--calendar-header-icon-color,var(--app-B1-N2,rgba(0,0,0,.7)));background-color:var(--calendar-background-color,var(--app-B6,#fff));color:var(--calendar-text-color,#000);display:flex;flex-direction:column;height:auto}.smart-calendar__close-icon{top:11px}.smart-calendar__popup--bottom,.smart-calendar__popup--top{height:var(--calendar-popup-height,848rpx)}.smart-calendar__popup--left,.smart-calendar__popup--right{height:100%}.smart-calendar-month{margin-top:0rpx}.smart-calendar__body{-webkit-overflow-scrolling:touch;flex:1;overflow:auto}.smart-calendar__footer{flex-shrink:0;padding:0 var(--padding-md,16px)}.smart-calendar__footer--safe-area-inset-bottom{padding-bottom:env(safe-area-inset-bottom)}.smart-calendar__footer+.smart-calendar__footer,.smart-calendar__footer:empty{display:none}.smart-calendar__footer:empty+.smart-calendar__footer{display:block!important}

package/lib/calendar-header/index.css

@@ -0,0 +1 @@
+@import '../common/index.css';:root{--smart-ui-overlay:rgba(0,0,0,.4);--smart-ui-dialog-background:#fff;--smart-ui-border-image:linear-gradient(90deg,transparent,rgba(0,0,0,.3),transparent)}:root[theme=dark]{--smart-ui-overlay:rgba(0,0,0,.7);--smart-ui-dialog-background:#333;--smart-ui-border-image:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.3),hsla(0,0%,100%,0))}.smart-calendar__header{flex-shrink:0}.smart-calendar__header-title-save{color:var(--calendar-header-title-save-color,#1989fa);font-size:16px;font-weight:400;letter-spacing:0;line-height:24px;position:absolute;right:48rpx;text-align:right;top:50%;transform:translateY(-50%)}.smart-calendar__header-subtitle,.smart-calendar__header-title{color:var(--calendar-header-title-font-color,var(--app-B4-N1,#000));font-weight:var(--calendar-header-title-weight,600);height:var(--calendar-header-title-height,44px);line-height:var(--calendar-header-title-height,44px);text-align:center}.smart-calendar__header-subtitle{font-size:var(--calendar-header-subtitle-font-size,16px)}.smart-calendar__header-title{font-size:var(--calendar-header-title-font-size,16px);position:relative}.smart-calendar__header-subtitle_wrap{align-items:center;display:flex;justify-content:center;position:relative}.smart-calendar__header-subtitle_left{align-items:center;background:var(--calendar-header-icon-bg-color,var(--app-B2-N9,rgba(0,0,0,.05)));border-radius:50%;display:flex;height:48rpx;justify-content:center;left:52rpx;position:absolute;top:50%;transform:translateY(-50%);width:48rpx}.smart-calendar__header-subtitle_left_icon{left:-1px;position:relative}.smart-calendar__header-subtitle_right{align-items:center;background:var(--calendar-header-icon-bg-color,var(--app-B2-N9,rgba(0,0,0,.05)));border-radius:50%;display:flex;height:48rpx;justify-content:center;position:absolute;right:52rpx;top:50%;transform:translateY(-50%);width:48rpx}.smart-calendar__header-subtitle_right_icon{position:relative;right:-1px}.smart-calendar__header-title+.smart-calendar__header-title,.smart-calendar__header-title:empty{display:none}.smart-calendar__header-title:empty+.smart-calendar__header-title{display:block!important}.smart-calendar__weekdays{display:flex;margin-bottom:16rpx;margin-top:16rpx;padding-left:16rpx;padding-right:16rpx}.smart-calendar__weekday{color:var(--calendar-weekdays-font-color,var(--app-B4-N1,#000));flex:1;font-size:var(--calendar-weekdays-font-size,12px);font-weight:400;line-height:var(--calendar-weekdays-height,30px);opacity:.5;text-align:center}

package/lib/calendar-header/index.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/calendar-header/index.js

@@ -0,0 +1,75 @@
+"use strict";
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var component_1 = require("../common/component");
+var Left_1 = __importDefault(require("@tuya-miniapp/icons/dist/svg/Left"));
+var Right_1 = __importDefault(require("@tuya-miniapp/icons/dist/svg/Right"));
+(0, component_1.SmartComponent)({
+    props: {
+        title: {
+            type: String,
+            value: 'Select Date',
+        },
+        rightText: {
+            type: String,
+            value: 'Save',
+        },
+        subtitle: String,
+        showTitle: Boolean,
+        showSubtitle: Boolean,
+        defaultWeeks: Array,
+        hideWeek: Boolean,
+        iconColor: {
+            type: String,
+            value: 'var(--calendar-header-icon_color)',
+        },
+        showConfirm: {
+            type: Boolean,
+            value: true,
+        },
+        firstDayOfWeek: {
+            type: Number,
+            observer: 'initWeekDay',
+        },
+    },
+    data: {
+        weekdays: [],
+        LeftIcon: Left_1.default,
+        RightIcon: Right_1.default,
+    },
+    created: function () {
+        this.initWeekDay();
+    },
+    methods: {
+        initWeekDay: function () {
+            var defaultWeeks = this.properties.defaultWeeks;
+            var firstDayOfWeek = this.data.firstDayOfWeek || 0;
+            this.setData({
+                weekdays: __spreadArray(__spreadArray([], defaultWeeks.slice(firstDayOfWeek, 7), true), defaultWeeks.slice(0, firstDayOfWeek), true),
+            });
+        },
+        onClickSubtitle: function (event) {
+            this.$emit('click-subtitle', event);
+        },
+        onPrev: function () {
+            this.$emit('click-prev');
+        },
+        onNext: function () {
+            this.$emit('click-next');
+        },
+        onSave: function () {
+            this.$emit('click-save');
+        },
+    },
+});

package/lib/calendar-header/index.json

@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "smart-icon": "../icon/index"
+  }
+}

package/lib/calendar-header/index.wxml

@@ -0,0 +1,27 @@
+<view class="smart-calendar__header">
+  <block wx:if="{{ showTitle }}">
+    <view class="smart-calendar__header-title"><slot name="title"></slot></view>
+    <view class="smart-calendar__header-title">
+      {{ title }}
+      <view class="smart-calendar__header-title-save" bind:tap="onSave" wx:if="{{showConfirm}}">{{ rightText }}</view>
+    </view>
+  </block>
+
+  <view class="smart-calendar__header-subtitle_wrap">
+    <view class="smart-calendar__header-subtitle_left" bind:tap="onPrev">
+      <smart-icon color="{{iconColor}}" class="smart-calendar__header-subtitle_left_icon" name="{{LeftIcon}}" />
+    </view>
+    <view wx:if="{{ showSubtitle }}" class="smart-calendar__header-subtitle" bind:tap="onClickSubtitle">
+      {{ subtitle }}
+    </view>
+    <view class="smart-calendar__header-subtitle_right" bind:tap="onNext">
+      <smart-icon color="{{iconColor}}" class="smart-calendar__header-subtitle_right_icon" name="{{RightIcon}}" />
+    </view>
+  </view>
+
+  <view class="smart-calendar__weekdays" wx:if="{{!hideWeek}}">
+    <view wx:for="{{ weekdays }}" wx:key="index" class="smart-calendar__weekday">
+      {{ item }}
+    </view>
+  </view>
+</view>