📝 [RFC] Calendar support customize select label

[kiner-tang]

Summary

At present, in the calendar component, select the year and month using the Select component, and the options of select are internal logic, users can not customize their own options, for some high degree of freedom demand can not be met, such as: display lunar calendar information and so on. Therefore, the calendar component needs to be reformed.

Motivation

As mentioned above, We need to accomplish the following tasks:

• Support customize the select option of year select
• Support customize the select option of month select

API

export interface CalendarProps<DateType> {
  // oriLabel: Default label
  // year: The year of year select option
  getYearLabel?: (oriLabel: string, year: number) => string;
  // oriLabel: Default label
  // month: The year of month select option
  // value: The option DayJs instance
  getMonthLabel?: (oriLabel: string, month: number, value: DateType) => string;
}

Or

export interface CalendarProps<DateType> {
  // oriLabel: Default label
  // cur: The year of year/month select option
  // value: The option DayJs instance
  getSelectLabel?: (type: "year" | "month", oriLabel: string, cur: number, value: DateType) => string;
}

Or

export interface CalendarProps<DateType> {
  // oriLabel: Default label
  // cur: The year of year/month select option
  // value: The option DayJs instance
  optionLabelRender?: (type: "year" | "month", oriLabel: string, cur: number, value: DateType) => ReactNode;
}

Basic Example

import type { Dayjs } from 'dayjs';
import dayjs from 'dayjs';
import React from 'react';
import type { CellRenderInfo } from 'rc-picker/lib/interface';
import lunisolar from 'lunisolar';
import zhCn from 'lunisolar/locale/zh-cn';
import { Calendar, theme } from 'antd';
import type { CalendarMode } from 'antd/es/calendar/generateCalendar';

lunisolar.locale(zhCn);

const App: React.FC = () => {
  const { token } = theme.useToken();

  const [selectDate, setSelectDate] = React.useState<Dayjs>(dayjs());

  const onPanelChange = (value: Dayjs, mode: CalendarMode) => {
    console.log(value.format('YYYY-MM-DD'), mode);
    setSelectDate(value);
  };

  const wrapperStyle: React.CSSProperties = {
    width: 500,
    border: `1px solid ${token.colorBorderSecondary}`,
    borderRadius: token.borderRadiusLG,
  };

  const lunarStyle: React.CSSProperties = {
    color: token.colorTextTertiary,
  };
  const monthCurrentStyle: React.CSSProperties = {
    color: token.colorTextLightSolid,
  };
  const monthStyle: React.CSSProperties = {
    color: token.colorTextBase,
  };
  const monthCellStyle: React.CSSProperties = {
    width: 120,
  };

  const cellRender = (date: Dayjs, info: CellRenderInfo<Dayjs>) => {
    const d = lunisolar(date.toDate());
    const lunar = d.lunar.getDayName();
    const solarTerm = d.solarTerm?.name;
    if (info.type === 'date') {
      return (
        <div>
          {info.originNode}
          {info.type === 'date' && <div style={lunarStyle}>{solarTerm || lunar}</div>}
        </div>
      );
    }

    if (info.type === 'month') {
      const month = d.lunar.getMonthName();
      return React.cloneElement(info.originNode, {
        style: monthCellStyle,
        children: [
          ...info.originNode.props.children,
          <span key="m" style={selectDate?.isSame(date, 'month') ? monthCurrentStyle : monthStyle}>
            （{month}）
          </span>,
        ],
      });
    }
  };

  const getYearLabel = (oriLabel: string, year: number) => {
    const d = lunisolar(new Date(year, 0));
    return `${oriLabel}（${d.format('cYcZ年')}）`;
  };

  const getMonthLabel = (oriLabel: string, month: number, value: Dayjs) => {
    const d = lunisolar(new Date(value.year(), month));
    const lunar = d.lunar.getMonthName();
    return `${oriLabel}（${lunar}）`;
  };

  return (
    <div style={wrapperStyle}>
      <Calendar
        getYearLabel={getYearLabel}
        getMonthLabel={getMonthLabel}
        fullCellRender={cellRender}
        fullscreen={false}
        onPanelChange={onPanelChange}
      />
    </div>
  );
};

export default App;

[Yuiai01]

Look great.

[afc163]

getXxx 在 antd 中应该都没有出现过这个命名方式。

[kiner-tang]

那要不改成：optionLabelRender 怎么样，然后 options 的 label 的类型也从 string 改成 ReactNode

[zombieJ]

https://ant-design.antgroup.com/components/calendar-cn#components-calendar-demo-customize-header 这个看看能不能使用~

[kiner-tang]

可以用，这个 RFC 就先关了