feat: Calendar新增weekdays和formatMonthTitle支持星期文案和月标题自定义 #263 (#279)

close #263
3lang3 · Dec 6, 2021 · 88a7623 · 88a7623
1 parent f501d20
commit 88a7623
Show file tree

Hide file tree

Showing 6 changed files with 76 additions and 34 deletions.
diff --git a/packages/react-vant/src/calendar/Calendar.tsx b/packages/react-vant/src/calendar/Calendar.tsx
@@ -354,6 +354,7 @@ const Calendar = forwardRef<CalendarInstance, CalendarProps>(
             'allowSameDay',
             'topInfoRender',
             'bottomInfoRender',
+            'formatMonthTitle',
           ])}
           onClick={onClickDay}
         />
@@ -395,6 +396,7 @@ const Calendar = forwardRef<CalendarInstance, CalendarProps>(
     const renderCalendar = () => (
       <div className={cls(className, bem())} style={style}>
         <CalendarHeader
+          weekdays={props.weekdays}
           title={props.title}
           subtitle={props.subtitle || state.subtitle}
           showTitle={props.showTitle}

diff --git a/packages/react-vant/src/calendar/CalendarHeader.tsx b/packages/react-vant/src/calendar/CalendarHeader.tsx
@@ -31,8 +31,11 @@ const CalenderHeader: React.FC<CalendarHeaderProps> = (props) => {
   };
 
   const renderWeekDays = () => {
-    const { firstDayOfWeek } = props;
-    const weekdays = ['日', '一', '二', '三', '四', '五', '六'];
+    const { weekdays: customWeekdays, firstDayOfWeek } = props;
+    const defaultWeekdays = ['日', '一', '二', '三', '四', '五', '六'];
+    const weekdays = customWeekdays
+      ? defaultWeekdays.map((wk, i) => customWeekdays[i] || wk)
+      : defaultWeekdays;
     const renderWeekDaysContent = [
       ...weekdays.slice(firstDayOfWeek, 7),
       ...weekdays.slice(0, firstDayOfWeek),

diff --git a/packages/react-vant/src/calendar/CalendarMonth.tsx b/packages/react-vant/src/calendar/CalendarMonth.tsx
@@ -32,7 +32,10 @@ const CalenderMonth = forwardRef<unknown, CalendarMonthProps>((props, ref) => {
     }
   }, [monthRef]);
 
-  const title = useMemo(() => formatMonthTitle(props.date), [props.date]);
+  const title = useMemo(() => {
+    const formatterFn = props.formatMonthTitle || formatMonthTitle;
+    return formatterFn(props.date);
+  }, [props.date]);
   const rowHeight = useMemo(() => addUnit(props.rowHeight), [props.rowHeight]);
   const offset = useMemo(() => {
     const realDay = props.date.getDay();

diff --git a/packages/react-vant/src/calendar/PropsType.ts b/packages/react-vant/src/calendar/PropsType.ts
@@ -45,6 +45,7 @@ export type CalendarMonthInstance = {
 export interface CalendarHeaderProps extends BaseTypeProps {
   title?: string | React.ReactNode;
   subtitle?: string | React.ReactNode;
+  weekdays?: React.ReactNode[];
   showTitle?: boolean;
   showSubtitle?: boolean;
   firstDayOfWeek?: number;
@@ -68,6 +69,7 @@ export interface CalendarMonthProps extends BaseTypeProps {
   showMark?: boolean;
   rowHeight?: number | string;
   formatter?: (item: CalendarDayItem) => CalendarDayItem;
+  formatMonthTitle?: (date: Date) => React.ReactNode;
   currentDate?: Date | Date[];
   allowSameDay?: boolean;
   showSubtitle?: boolean;
@@ -86,13 +88,17 @@ export interface CalendarProps extends BaseTypeProps {
   visible?: boolean;
   title?: string | React.ReactNode;
   subtitle?: string | React.ReactNode;
+  /** 自定义星期文案 */
+  weekdays?: React.ReactNode[];
   color?: string;
   round?: boolean;
   readonly?: boolean;
   poppable?: boolean;
   showMark?: boolean;
   showTitle?: boolean;
   formatter?: (item: CalendarDayItem) => CalendarDayItem;
+  /** 自定义月标题 */
+  formatMonthTitle?: (date: Date) => React.ReactNode;
   rowHeight?: number | string;
   confirmText?: string;
   rangePrompt?: string;

diff --git a/packages/react-vant/src/calendar/README.md b/packages/react-vant/src/calendar/README.md
@@ -165,6 +165,18 @@ const formatter = (day) => {
 <Calendar visible={visible} type="range" formatter={formatter} />;
 ```
 
+### 自定义星期文案/月标题
+
+通过 `weekdays` 属性可以实现星期内容的自定义，通过 `formatMonthTitle` 函数可以实现月标题的自定义渲染。
+
+```jsx
+<Calendar
+  weekdays={['🌕', '🌖', '🌗', '🌘', '🌑', '🌒', '🌓']}
+  formatMonthTitle={(date) => `${date.getFullYear()}🥑${date.getMonth() + 1}🍪`}
+  visible={visible}
+/>
+```
+
 ### 自定义弹出位置
 
 通过 `position` 属性自定义弹出层的弹出位置，可选值为 `top`、`left`、`right`。
@@ -206,6 +218,8 @@ const formatter = (day) => {
 | type | 选择类型:<br>`single` 表示选择单个日期，<br>`multiple` 表示选择多个日期，<br>`range` 表示选择日期区间 | _string_ | `single` |
 | title | 日历标题 | _string\|React.ReactNode_ | `日期选择` |
 | subtitle | 自定义日历副标题 | _string\|React.ReactNode_ | - |
+| weekdays | 自定义星期文案 | _React.ReactNode[]_ | `['日', '一', '二', '三', '四', '五', '六']` |
+| formatMonthTitle | 自定义月标题 | _(date: Date) => React.ReactNode_ | - |
 | footer | 自定义底部区域内容 | _string\|React.ReactNode_ | - |
 | topInfoRender | 自定义日期上方的提示信息 | _(day: Day) => React.ReactNode_ | - |
 | bottomInfoRender | 自定义日期下方的提示信息 | _(day: Day) => React.ReactNode_ | - |
@@ -308,42 +322,39 @@ const calendarRef = ref<CalendarInstance>();
 calendarRef.value?.reset();
 ```
 
-
 ## 主题定制
 
 ### 样式变量
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
 
-| 名称 | 默认值 | 描述 |
-| --- | --- | --- |
-| --rv-calendar-background-color | _var(--rv-white)_ | - |
-| --rv-calendar-popup-height | _80%_ | - |
-| --rv-calendar-header-box-shadow | _0 2px 10px rgba(125, 126, 128, 0.16)_ | - |
-| --rv-calendar-header-title-height | _44px_ | - |
-| --rv-calendar-header-title-font-size | _var(--rv-font-size-lg)_ | - |
-| --rv-calendar-header-subtitle-font-size | _var(--rv-font-size-md)_ | - |
-| --rv-calendar-weekdays-height | _30px_ | - |
-| --rv-calendar-weekdays-font-size | _var(--rv-font-size-sm)_ | - |
-| --rv-calendar-month-title-font-size | _var(--rv-font-size-md)_ | - |
-| --rv-calendar-month-mark-color | _fade(var(--rv-gray-2), 80%)_ | - |
-| --rv-calendar-month-mark-font-size | _160px_ | - |
-| --rv-calendar-day-height | _64px_ | - |
-| --rv-calendar-day-font-size | _var(--rv-font-size-lg)_ | - |
-| --rv-calendar-range-edge-color | _var(--rv-white)_ | - |
-| --rv-calendar-range-edge-background-color | _var(--rv-danger-color)_ | - |
-| --rv-calendar-range-middle-color | _var(--rv-danger-color)_ | - |
-| --rv-calendar-range-middle-background-opacity | _0.1_ | - |
-| --rv-calendar-selected-day-size | _54px_ | - |
-| --rv-calendar-selected-day-color | _var(--rv-white)_ | - |
-| --rv-calendar-info-font-size | _var(--rv-font-size-xs)_ | - |
-| --rv-calendar-info-line-height | _var(--rv-line-height-xs)_ | - |
-| --rv-calendar-selected-day-background-color | _var(--rv-danger-color)_ | - |
-| --rv-calendar-day-disabled-color | _var(--rv-gray-5)_ | - |
-| --rv-calendar-confirm-button-height | _36px_ | - |
-| --rv-calendar-confirm-button-margin | _7px 0_ | - |
-
-
+| 名称                                          | 默认值                                 | 描述 |
+| --------------------------------------------- | -------------------------------------- | ---- |
+| --rv-calendar-background-color                | _var(--rv-white)_                      | -    |
+| --rv-calendar-popup-height                    | _80%_                                  | -    |
+| --rv-calendar-header-box-shadow               | _0 2px 10px rgba(125, 126, 128, 0.16)_ | -    |
+| --rv-calendar-header-title-height             | _44px_                                 | -    |
+| --rv-calendar-header-title-font-size          | _var(--rv-font-size-lg)_               | -    |
+| --rv-calendar-header-subtitle-font-size       | _var(--rv-font-size-md)_               | -    |
+| --rv-calendar-weekdays-height                 | _30px_                                 | -    |
+| --rv-calendar-weekdays-font-size              | _var(--rv-font-size-sm)_               | -    |
+| --rv-calendar-month-title-font-size           | _var(--rv-font-size-md)_               | -    |
+| --rv-calendar-month-mark-color                | _fade(var(--rv-gray-2), 80%)_          | -    |
+| --rv-calendar-month-mark-font-size            | _160px_                                | -    |
+| --rv-calendar-day-height                      | _64px_                                 | -    |
+| --rv-calendar-day-font-size                   | _var(--rv-font-size-lg)_               | -    |
+| --rv-calendar-range-edge-color                | _var(--rv-white)_                      | -    |
+| --rv-calendar-range-edge-background-color     | _var(--rv-danger-color)_               | -    |
+| --rv-calendar-range-middle-color              | _var(--rv-danger-color)_               | -    |
+| --rv-calendar-range-middle-background-opacity | _0.1_                                  | -    |
+| --rv-calendar-selected-day-size               | _54px_                                 | -    |
+| --rv-calendar-selected-day-color              | _var(--rv-white)_                      | -    |
+| --rv-calendar-info-font-size                  | _var(--rv-font-size-xs)_               | -    |
+| --rv-calendar-info-line-height                | _var(--rv-line-height-xs)_             | -    |
+| --rv-calendar-selected-day-background-color   | _var(--rv-danger-color)_               | -    |
+| --rv-calendar-day-disabled-color              | _var(--rv-gray-5)_                     | -    |
+| --rv-calendar-confirm-button-height           | _36px_                                 | -    |
+| --rv-calendar-confirm-button-margin           | _7px 0_                                | -    |
 
 ## 常见问题
 

diff --git a/packages/react-vant/src/calendar/demo/index.tsx b/packages/react-vant/src/calendar/demo/index.tsx
@@ -58,14 +58,15 @@ export default (): React.ReactNode => {
     t11: '',
     v12: false,
     t12: '',
+    v13: false,
+    t13: '',
   });
 
   return (
     <DemoSection className="demo-calendar">
       <DemoBlock card title="基础用法">
         <Cell title="选择单个日期" value={state.t1} isLink onClick={() => set({ v1: true })} />
         <Calendar
-          subtitle={<div>subtitle123</div>}
           visible={state.v1}
           onClose={() => set({ v1: false })}
           onConfirm={(v) => {
@@ -164,6 +165,22 @@ export default (): React.ReactNode => {
           }}
         />
 
+        <Cell
+          title="自定义星期文案/月标题"
+          value={state.t13}
+          isLink
+          onClick={() => set({ v13: true })}
+        />
+        <Calendar
+          formatMonthTitle={(date) => `${date.getFullYear()}🥑${date.getMonth() + 1}🍪`}
+          weekdays={['🌕', '🌖', '🌗', '🌘', '🌑', '🌒', '🌓']}
+          visible={state.v13}
+          onClose={() => set({ v13: false })}
+          onConfirm={(v) => {
+            set({ v13: false, t13: formatDate(v) });
+          }}
+        />
+
         <Cell title="自定义弹出位置" value={state.t10} isLink onClick={() => set({ v10: true })} />
         <Calendar
           round={false}