@cloudbase/weda-ui 0.2.17 → 0.2.21-alpha.1

package/dist/web/components/calendar/index.css

@@ -0,0 +1,422 @@
+/* weda_calendar */
+
+.weda-calendar {
+  font-size: 14px;
+}
+
+/* pc 日历样式 start */
+.weda-calendar.weda-calendar-pc {
+  background: #ffffff;
+  border: 0.5px solid #dcdcdc;
+  box-sizing: border-box;
+  box-shadow: 0px 3px 14px 2px rgba(0, 0, 0, 0.05),
+    0px 8px 10px 1px rgba(0, 0, 0, 0.06), 0px 5px 5px -3px rgba(0, 0, 0, 0.1);
+  border-radius: 3px;
+  min-width: 560px;
+}
+
+.weda-calendar-pc .weda-calendar__control_h5 {
+  display: none;
+}
+
+.weda-calendar-pc .weda-calendar__control_pc {
+  padding: 32px;
+  display: flex;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  -webkit-box-pack: end;
+  -ms-flex-pack: end;
+  justify-content: flex-end;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.weda-calendar-pc .weda-calendar__control-section {
+  display: flex;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  -webkit-box-pack: end;
+  -ms-flex-pack: end;
+  justify-content: flex-end;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  height: 100%;
+  margin-right: 16px;
+}
+
+.weda-calendar-pc .weda-calendar__control-section:last-child {
+  margin-right: 0;
+}
+
+.weda-calendar-pc
+  .weda-calendar__control-section
+  .weda-calendar__control-section-cell {
+  height: 100%;
+  margin-right: 8px;
+}
+
+.weda-calendar-pc
+  .weda-calendar__control-section
+  .weda-calendar__control-section-cell:last-child {
+  margin-right: 0;
+}
+
+.weda-calendar-pc .weda-calendar__control_pc .weda-calendar__current-date {
+  font-size: 1em;
+  line-height: 1.57142em;
+  color: rgba(0, 0, 0, 0.9);
+}
+
+.weda-calendar-pc .weda-calendar__panel {
+  position: relative;
+  padding: 0 32px 32px 32px;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.weda-calendar .weda-calendar__table {
+  font-size: inherit;
+  border-collapse: collapse;
+  border-spacing: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.weda-calendar .weda-calendar__table .weda-calendar__table-head {
+  display: block;
+  width: 100%;
+  margin-bottom: 8px;
+  box-sizing: border-box;
+}
+
+.weda-calendar .weda-calendar__table .weda-calendar__table-head-row,
+.weda-calendar .weda-calendar__table .weda-calendar__table-body-row {
+  display: flex;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  width: 100%;
+  padding-bottom: 0;
+}
+
+.weda-calendar .weda-calendar__table .weda-calendar__table-head-cell {
+  cursor: default;
+  -webkit-box-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: end;
+  -ms-flex-pack: end;
+  justify-content: flex-end;
+  height: 100%;
+  padding: 0;
+  font-size: 1em;
+  line-height: 1.57142em;
+  color: rgba(0, 0, 0, 0.6);
+  margin-right: 12px;
+  position: relative;
+}
+
+.weda-calendar .weda-calendar__table .weda-calendar__table-head-cell:last-child,
+.weda-calendar
+  .weda-calendar__table
+  .weda-calendar__table-body-cell:last-child {
+  margin-right: 0;
+}
+
+.weda-calendar .weda-calendar__table .weda-calendar__table-body {
+  width: 100%;
+}
+
+.weda-calendar .weda-calendar__table .weda-calendar__table-body-cell {
+  flex: 1;
+  -webkit-box-flex: 1;
+  -ms-flex: 1;
+  border-top: 1px solid #e7e7e7;
+  padding: 0;
+  height: 87.4px;
+  display: flex;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-align: end;
+  -ms-flex-align: end;
+  align-items: flex-end;
+  margin-left: 0;
+  margin-right: 12px;
+  position: relative;
+  justify-content: flex-start;
+  color: rgba(0, 0, 0, 0.26);
+}
+
+.weda-calendar
+  .weda-calendar__table
+  .weda-calendar__table-body-cell.is-invalid {
+  cursor: default;
+}
+.weda-calendar
+  .weda-calendar__table
+  .weda-calendar__table-body-cell.is-disabled {
+  cursor: not-allowed;
+}
+
+.weda-calendar
+  .weda-calendar__table
+  .weda-calendar__table-body-cell.is-disabled {
+  background: #f3f3f3;
+}
+
+.weda-calendar
+  .weda-calendar__table
+  .weda-calendar__table-body-cell.is-checked {
+  border-top-color: var(--wd-color-brand, #0052d9);
+  background-color: var(--wd-color-brand-light, #ecf2fe);
+}
+
+.weda-calendar .weda-calendar__table .weda-calendar__table-body-cell-value {
+  font-size: 1em;
+  font-weight: 400;
+  line-height: 1.57142em;
+  color: rgba(0, 0, 0, 0.9);
+  margin-top: 3px;
+  position: relative;
+}
+
+.weda-calendar
+  .weda-calendar__table
+  .weda-calendar__table-body-cell.is-invalid
+  .weda-calendar__table-body-cell-value {
+  color: rgba(0, 0, 0, 0.26);
+}
+
+.weda-calendar
+  .weda-calendar__table
+  .weda-calendar__table-body-cell
+  .weda-calendar__table-body-cell-marked {
+  position: absolute;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  left: 50%;
+  transform: translate(-50%);
+  bottom: -10px;
+}
+
+/* pc 日历样式 end */
+
+/* h5 日历样式 start */
+
+.weda-calendar.weda-calendar-h5 {
+  background: #ffffff;
+  width: 100%;
+  opacity: 0.9;
+}
+
+.weda-calendar-h5 .weda-calendar__control_pc {
+  display: none;
+}
+
+.weda-calendar__control_h5 {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 16px 16px 0 16px;
+  position: relative;
+  text-align: center;
+}
+.weda-calendar__control_h5 .wedatea2td-icon-arrowleft--line,
+.weda-calendar__control_h5 .wedatea2td-icon-arrowright--line {
+  vertical-align: middle;
+  background-repeat: no-repeat;
+  background-size: contain;
+  background-position: center;
+}
+
+.weda-calendar__control_h5
+  .weda-calendar_prevMonth.wedatea2td-icon-arrowleft--line,
+.weda-calendar__control_h5
+  .weda-calendar_nextMonth.wedatea2td-icon-arrowright--line {
+  position: absolute;
+  top: 17px;
+  width: 1.42857em;
+  height: 1.42857em;
+}
+
+.weda-calendar__control_h5
+  .weda-calendar_prevMonth.wedatea2td-icon-arrowleft--line {
+  left: 16px;
+}
+.weda-calendar__control_h5
+  .weda-calendar_nextMonth.wedatea2td-icon-arrowright--line {
+  right: 16px;
+}
+
+.weda-calendar__control_h5 .weda-calendar__current-date {
+  font-size: 1em;
+  line-height: 1.57142em;
+  font-weight: bold;
+}
+
+.weda-calendar-h5 .weda-calendar__panel {
+  height: 21.85714em;
+  padding: 20px 16px 16px 16px;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.weda-calendar-h5 .weda-calendar__table {
+  width: 100%;
+  height: 100%;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  justify-self: start;
+  -webkit-box-align: start;
+  -ms-flex-align: start;
+  align-items: flex-start;
+}
+
+.weda-calendar-h5 .weda-calendar__table .weda-calendar__table-head {
+  margin-bottom: 0;
+}
+
+.weda-calendar-h5 .weda-calendar__table .weda-calendar__table-head-cell {
+  font-size: 0.85714em;
+  line-height: 20px;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  font-size: 0.85714em;
+  line-height: 1.428571em;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+.weda-calendar-h5 .weda-calendar__table-body {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  justify-self: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+}
+
+.weda-calendar-h5 .weda-calendar__table-body .weda-calendar__table-body-row {
+  width: 100%;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  flex: 1;
+}
+
+.weda-calendar-h5 .weda-calendar__table-body .weda-calendar__table-body-cell {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  border: none;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  font-size: 0.85714em;
+  line-height: 1.42857em;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  flex-direction: row;
+}
+
+.weda-calendar-h5
+  .weda-calendar__table
+  .weda-calendar__table-body-cell.is-checked {
+  border: none;
+  background: transparent;
+}
+
+.weda-calendar-h5
+  .weda-calendar__table-body
+  .weda-calendar__table-body-cell-value {
+  font-size: 1em;
+  text-align: center;
+  border-radius: 50%;
+  width: 40px;
+  line-height: 2.85714em;
+  margin: 0;
+  box-sizing: border-box;
+}
+
+.weda-calendar-h5
+  .weda-calendar__table
+  .weda-calendar__table-body-cell.is-checked
+  .weda-calendar__table-body-cell-value {
+  color: #fff;
+}
+
+.weda-calendar-h5
+  .weda-calendar__table
+  .weda-calendar__table-body-cell.is-checked
+  .weda-calendar__table-body-cell-bg {
+  position: absolute;
+  width: 1.714285em;
+  height: 1.714285em;
+  background: var(--wd-color-brand, #0052d9);
+  border-radius: 100%;
+  left: calc(50% - 0.85714em);
+  top: calc(50% - 0.85714em);
+  z-index: -1;
+}
+
+.weda-calendar-h5
+  .weda-calendar__table
+  .weda-calendar__table-body-cell
+  .weda-calendar__table-body-cell-marked {
+  width: 4px;
+  height: 4px;
+  top: calc(50% + 14px);
+}
+
+.weda-calendar-h5
+  .weda-calendar__table
+  .weda-calendar__table-body-cell.is-invalid
+  .weda-calendar__table-body-cell-value {
+  color: rgba(0, 0, 0, 0.6);
+}
+
+.weda-calendar-h5
+  .weda-calendar__table
+  .weda-calendar__table-body-cell.is-disabled {
+  background: transparent;
+}
+
+.weda-calendar-h5
+  .weda-calendar__table
+  .weda-calendar__table-body-cell.is-disabled
+  .weda-calendar__table-body-cell-value {
+  color: #c5c5c5;
+}
+
+/* h5 日历样式 end */

package/dist/web/components/calendar/index.d.ts

@@ -0,0 +1,20 @@
+declare function Calendar({ id, className, style, initVisible, initValue, configData, }: {
+    id: any;
+    className: any;
+    style: any;
+    initVisible: any;
+    initValue: any;
+    configData?: readonly [];
+}): JSX.Element;
+declare namespace Calendar {
+    namespace propTypes {
+        const className: PropTypes.Requireable<string>;
+        const style: PropTypes.Requireable<object>;
+        const initValue: PropTypes.Requireable<string>;
+        const platform: PropTypes.Requireable<string>;
+        const initVisible: PropTypes.Requireable<boolean>;
+        const configData: PropTypes.Requireable<any[]>;
+    }
+}
+export default Calendar;
+import * as PropTypes from "prop-types";

package/dist/web/components/calendar/index.js

@@ -0,0 +1,165 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState, useEffect, useMemo } from 'react';
+import { usePlatform } from '../../utils/platform';
+import { ConfigProvider, Select } from 'tea-component';
+import * as PropTypes from 'prop-types';
+import classNames from '../../utils/classnames';
+import dayjs from 'dayjs';
+import { createDateList } from './util';
+import { emptyArray } from '../../utils/constant';
+import './style';
+// 抽取配置常量
+const blockName = 'weda-calendar'; // 类名前缀
+const minYear = 1970; // 最早选择年份
+const firstDayOfWeek = 7; // 日历第一列从周日开始
+const format = 'YYYY-MM-DD';
+const controlSectionSize = 'auto'; // 操作栏控件尺寸
+const week = ['一', '二', '三', '四', '五', '六', '日']; // 表头日历星期展示方式
+const isShowWeekend = true; // 是否显示周末
+export default function Calendar({ id, className, style, initVisible, initValue, configData = emptyArray, }) {
+    // 'h5' || 'pc'
+    const platform = usePlatform();
+    const visible = typeof initVisible === 'boolean' ? initVisible : true;
+    // dayjs.Dayjs
+    const [value, setValue] = useState(dayjs());
+    // number
+    const [year, setYear] = useState(dayjs().year());
+    const [month, setMonth] = useState(parseInt(dayjs().format('M'), 10));
+    useEffect(() => {
+        if (initValue !== null && initValue !== '') {
+            setValue(dayjs(initValue));
+            setYear(dayjs(initValue).year());
+            setMonth(parseInt(dayjs(initValue).format('M'), 10));
+        }
+    }, [initValue]);
+    // 年份、月份 Select 选择框选项
+    const [yearSelectList, monthSelectList] = useMemo(() => {
+        const yearList = [];
+        const monthList = [];
+        // 年列表
+        const yearBegin = Math.min(minYear, year - 50);
+        const yearEnd = Math.max(minYear, year + 50); // parseInt(dayjs().format('YYYY-MM-DD'));
+        for (let i = yearBegin; i <= yearEnd; i++) {
+            yearList.push({
+                value: i,
+            });
+        }
+        // 月列表
+        for (let i = 1; i <= 12; i++) {
+            monthList.push({
+                value: i,
+            });
+        }
+        return [yearList, monthList];
+    }, [year, month]);
+    // 日历单元格数据
+    const dateList = useMemo(() => {
+        // 匹配数据
+        const _dateList = (configList) => {
+            const _map = new Map();
+            const configArr = JSON.parse(JSON.stringify(configData));
+            // 补日期的零
+            configArr &&
+                configArr.length &&
+                configArr.map((item) => {
+                    if (item.matchDate === '' || item.matchDate === undefined)
+                        return;
+                    const date = item.matchDate.split('-');
+                    const day = date[2].split('');
+                    if (day.length === 1) {
+                        date[2] = `0${date[2]}`;
+                        item.matchDate = date.join('-');
+                    }
+                });
+            for (const item of configArr) {
+                _map.set(item.matchDate, item);
+            }
+            return configList.map((item) => {
+                return item.reduce((res, i) => {
+                    if (_map.has(i.formattedDate)) {
+                        const _disabled = _map.get(i.formattedDate)['disabled'];
+                        const _marked = _map.get(i.formattedDate)['marked'];
+                        i['disabled'] =
+                            _disabled !== undefined ? JSON.parse(_disabled) : false;
+                        i['marked'] = _marked;
+                    }
+                    res.push(i);
+                    return res;
+                }, []);
+            });
+        };
+        return _dateList(createDateList(year, month, firstDayOfWeek, value, format));
+    }, [year, month, firstDayOfWeek, format, value, configData]);
+    // 表头数组
+    const colHeaderList = useMemo(() => {
+        const weekTextArr = week;
+        const list = [];
+        for (let i = firstDayOfWeek; i <= 7; i++) {
+            if (!isShowWeekend && i > 5) {
+                break;
+            }
+            list.push({
+                day: i,
+                text: weekTextArr[i - 1],
+            });
+        }
+        if (firstDayOfWeek > 1) {
+            for (let i = 1; i < firstDayOfWeek; i++) {
+                if (!isShowWeekend && i > 5) {
+                    break;
+                }
+                list.push({
+                    day: i,
+                    text: weekTextArr[i - 1],
+                });
+            }
+        }
+        return list;
+    }, [firstDayOfWeek, isShowWeekend, week]);
+    // 补零
+    // const fix0 = (num) => {
+    //   return num < 10 ? `0${num}` : num;
+    // };
+    const yearSelectOptions = () => {
+        return yearSelectList.map((item) => ({
+            text: `${item.value} 年`,
+            value: `${item.value}`,
+        }));
+    };
+    const monthSelectOptions = () => {
+        return monthSelectList.map((item) => ({
+            text: `${item.value} 月`,
+            value: `${item.value}`,
+        }));
+    };
+    return (_jsxs("div", { id: id, "data-testid": "weda-calendar", className: classNames(blockName, 'weda-ui', platform === 'h5' ? `${blockName}-h5` : `${blockName}-pc`, {
+            [className]: className,
+        }), style: style, children: [_jsx(ConfigProvider, { classPrefix: "wedatea2td", children: _jsx("div", { className: blockName + '__control_pc', "data-testid": "weda-calendar-control-pc", children: visible ? (_jsxs("div", { className: blockName + '__control-section', children: [_jsx("div", { className: blockName + '__control-section-cell', children: _jsx(Select, { appearance: "button", size: controlSectionSize, value: String(year), options: yearSelectOptions(), onChange: (selectYear) => setYear(parseInt(selectYear)) }) }), _jsx("div", { className: blockName + '__control-section-cell', children: _jsx(Select, { appearance: "button", size: controlSectionSize, value: String(month), options: monthSelectOptions(), onChange: (selectMonth) => setMonth(parseInt(selectMonth)) }) })] })) : (_jsxs("div", { className: `${blockName}__current-date`, children: [year, " \u5E74 ", month, " \u6708"] })) }) }), _jsxs("div", { className: blockName + '__control_h5', "data-testid": "weda-calendar-control-h5", children: [visible && (_jsx("div", { className: blockName + '_prevMonth wedatea2td-icon-arrowleft--line', onClick: () => {
+                            // 上一个月
+                            setYear(month === 1 ? year - 1 : year);
+                            setMonth(month === 1 ? 12 : month - 1);
+                        } })), _jsxs("div", { className: `${blockName}__current-date`, children: [year, "\u5E74", month, "\u6708"] }), visible && (_jsx("div", { className: blockName + '_nextMonth wedatea2td-icon-arrowright--line', onClick: () => {
+                            // 下一个月
+                            setYear(month === 12 ? year + 1 : year);
+                            setMonth(month === 12 ? 1 : month + 1);
+                        } }))] }), _jsx("div", { className: blockName + '__panel', children: _jsxs("table", { className: blockName + '__table', children: [colHeaderList.length > 0 && (_jsx("thead", { className: blockName + '__table-head', children: _jsx("tr", { className: blockName + '__table-head-row', children: colHeaderList.map((item) => (_jsx("th", { className: blockName + '__table-head-cell', children: item.text }, item.day))) }) })), _jsx("tbody", { className: blockName + '__table-body', children: dateList.map((dateRow, dateRowIndex) => (_jsx("tr", { className: blockName + '__table-body-row', children: dateRow.map((dateCell, dateCellIndex) => {
+                                    if (!isShowWeekend && [6, 7].indexOf(dateCell.day) >= 0)
+                                        return null;
+                                    const isNow = (dateCell.formattedDate === dayjs().format('YYYY-MM-DD') &&
+                                        'is-now') ||
+                                        '';
+                                    return (_jsx("td", { className: classNames(`${blockName}__table-body-cell`, isNow, dateCell.isCurrent ? 'is-checked' : '', dateCell.belongTo !== 0 ? 'is-invalid' : '', dateCell.disabled ? 'is-disabled' : ''), children: _jsxs("div", { className: blockName + '__table-body-cell-value', children: [dateCell.date.getDate(), _jsx("div", { className: `${blockName}__table-body-cell-bg` }), dateCell.marked && dateCell.marked !== '' && (_jsx("div", { style: { backgroundColor: `${dateCell.marked}` }, className: blockName + '__table-body-cell-marked', "data-testid": "weda-calendar-cell-marked" }))] }) }, String(dateCellIndex)));
+                                }) }, String(dateRowIndex)))) })] }) })] }));
+}
+Calendar.propTypes = {
+    className: PropTypes.string,
+    style: PropTypes.object,
+    /** 传入日期 '2021-01-01' */
+    initValue: PropTypes.string,
+    /** 平台 'h5' || 'pc'*/
+    platform: PropTypes.string,
+    /** 时间控制器 */
+    initVisible: PropTypes.bool,
+    /** 展示配置 */
+    configData: PropTypes.array,
+};

package/dist/web/components/calendar/style.d.ts

@@ -0,0 +1,2 @@
+import './index.css';
+import '../style';

package/dist/web/components/calendar/style.js

@@ -0,0 +1,2 @@
+import './index.css';
+import '../style';

package/dist/web/components/calendar/util.d.ts

@@ -0,0 +1,13 @@
+export function getDay(dt: any): number;
+export function createDateList(year: any, month: any, firstDayOfWeek: any, currentValue: any, format: any): {
+    mode: string;
+    belongTo: any;
+    isCurrent: any;
+    day: number;
+    weekOrder: any;
+    date: any;
+    formattedDate: string;
+    filterDate: any;
+    formattedFilterDate: any;
+    isShowWeekend: boolean;
+}[][];

package/dist/web/components/calendar/util.js

@@ -0,0 +1,74 @@
+import dayjs from 'dayjs';
+/**
+ * 获取一个日期是周几（1~7）
+ */
+export const getDay = (dt) => {
+    let day = dayjs(dt).day();
+    if (day === 0) {
+        day = 7;
+    }
+    return day;
+};
+/**
+ * 创建日历单元格数据
+ * @param year 日历年份
+ * @param month 日历月份
+ * @param firstDayOfWeek 周起始日（1~7）
+ * @param currentValue 当前日期
+ * @param format 日期格式
+ */
+export const createDateList = (year, month, firstDayOfWeek, currentValue, format) => {
+    const createCellData = (belongTo, isCurrent, date, weekOrder) => {
+        const day = getDay(date);
+        return {
+            mode: 'month',
+            belongTo,
+            isCurrent,
+            day,
+            weekOrder,
+            date,
+            formattedDate: dayjs(date).format(format),
+            filterDate: null,
+            formattedFilterDate: null,
+            isShowWeekend: true,
+        };
+    };
+    const monthFirstDay = dayjs(`${year}-${month}`);
+    const rowList = [];
+    let list = [];
+    let weekCount = 1;
+    // 添加上个月中会在本月显示的最后几天日期
+    // getDay(monthFirstDay.toDate()) 获取每月第一天是周几
+    const lastMonthDaysCount = (getDay(monthFirstDay.toDate()) - firstDayOfWeek + 7) % 7;
+    for (let i = 0; i < lastMonthDaysCount; i++) {
+        // 获取显示在当前月的日历中，上月日期数据
+        // monthFirstDay.subtract(num, 'day' | 'month' | 'year') 表示以当月第一天日期为基准，在 日|月|年 数字上减去num
+        const dayObj = monthFirstDay.subtract(i + 1, 'day');
+        list.unshift(createCellData(-1, false, dayObj.toDate(), weekCount));
+    }
+    // 添加本月日期
+    // 获取本月最后一天是几号
+    const monthDaysCount = monthFirstDay.endOf('month').daysInMonth();
+    for (let i = 0; i < monthDaysCount; i++) {
+        const dayObj = monthFirstDay.add(i, 'day');
+        list.push(createCellData(0, currentValue.isSame(dayObj), dayObj.toDate(), weekCount));
+        if (list.length === 7) {
+            rowList.push(list);
+            list = [];
+            weekCount += 1;
+        }
+    }
+    // 添加下月日期
+    if (list.length) {
+        // 获取当月最后一天
+        const monthLastDay = dayjs(`${year}-${month}`).endOf('month');
+        // 获取下月在当月日历中的天数
+        const nextMonthDaysCount = 7 - list.length;
+        for (let i = 0; i < nextMonthDaysCount; i++) {
+            const dayObj = monthLastDay.add(i + 1, 'day');
+            list.push(createCellData(1, false, dayObj.toDate(), weekCount));
+        }
+        rowList.push(list);
+    }
+    return rowList;
+};