Calendar2 Demos

按照日历形式展示数据的容器。

何时使用 #

1.22版本增加当前组件

日历组件是一个偏向于展示与受控的基础组件，可用于日程、课表、价格日历、农历展示等。

国际化 #

由于 Calendar 组件内部使用 dayjs 对象来设置日期（请使用最新版 dayjs），部分 Locale 读取自日期库dayjs的国际化。

import { DatePicker2, ConfigProvider } from '@alifd/next';
import 'dayjs/locale/en';
import en from '@alifd/next/lib/locale/en-us';

function App() {
    return (
        <ConfigProvider locale={en}>
            <DatePicker2 />
        </ConfigProvider>
    );
}
ReactDOM.render(<App />, mountNode);

代码演示 #

基础日历 #

最简单的日历用法，用户可以切换年/月。

卡片日历 #

卡片日历通常用来被嵌套在宽高受限的容器中。

面板日历 #

面板日历通常用来被嵌套在弹层容器中。

农历 #

农历

禁用日期 #

可以通过 disabledDate 属性禁止用户选择某些日期。

日历默认展示月份 #

日历组件默认使用当前月作为展示的月份，用户可以可以通过 defaultPanelValue 属性进行定制。并可以通过 onPanelChange 属性监听面板可视月份的变化。

定制日历内容 #

通过 dateCellRender 和 monthCellRender，可以在日历中添加自定义内容。

import ReactDOM from 'react-dom';
import { Calendar2 } from '@alifd/next';
import dayjs from 'dayjs';
const currentDate = dayjs();
const dateCellRender = date => {
  const dateNum = date.date();
  if (currentDate.month() !== date.month()) {
    return dateNum;
  }
  let eventList = [];
  switch (dateNum) {
    case 1:
      eventList = [
        { type: 'primary', content: 'Event 1' },
        { type: 'normal', content: 'Event 2' },
      ];
      break;
    case 10:
      eventList = [
        { type: 'normal', content: 'Event 3' },
        { type: 'normal', content: 'Event 4' },
      ];
      break;
    case 11:
      eventList = [
        { type: 'primary', content: 'Event 5' },
        { type: 'primary', content: 'Event 6' },
      ];
      break;
    default:
      eventList = [];
  }
  return (
    <div className="custom-calendar-cell">
      <div className="custom-calendar-cell-value">{dateNum}</div>
      <div className="custom-calendar-cell-content">
        <ul className="event-list">
          {eventList.map((item, key) => (
            <li className={`${item.type}-event`} key={key}>
              {item.content}
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
};
const monthCellRender = date => {
  if (currentDate.month() === date.month()) {
    return (
      <div>
        <div>{date.month()}</div>
        <div>Events</div>
      </div>
    );
  }
  return date.month();
};
ReactDOM.render(
  <Calendar2 dateCellRender={dateCellRender} monthCellRender={monthCellRender} />,
  mountNode
);

API #

Calendar #

参数	说明	类型	默认值
defaultValue	默认选中的日期（dayjs 对象）	ConfigType	-
value	选中的日期值 (dayjs 对象)	ConfigType	-
defaultPanelValue	面板默认显示的日期	ConfigType	-
panelValue	面板显示的日期（受控）	ConfigType	-
shape	展现形态	'card' \| 'fullscreen' \| 'panel'	'fullscreen'
mode	日期模式	CalendarMode	'month'
panelMode	面板模式，未指定时会根据 mode 自动推断	CalendarPanelMode	-
onSelect	选择日期单元格时的回调	(value: Dayjs, strVal: string) => void	-
onChange	值改变时的回调	(value: Dayjs, strVal: string) => void	-
onPanelChange	日期面板变化回调	(value: Dayjs, mode: string, reason?: string) => void	-
className	自定义样式类	string	-
dateCellRender	自定义日期渲染	CustomCellRender	-
monthCellRender	自定义月份渲染函数	CustomCellRender	-
yearCellRender	自定义年份渲染函数	CustomCellRender	-
quarterCellRender	自定义季度渲染函数	CustomCellRender	-
disabledDate	不可选择的日期	(value: Dayjs, mode: CalendarPanelMode) => boolean	-
onPrev	点击头部左单箭头时触发的回调	OnPrevOrNext	-
onNext	点击头部右单箭头时触发的回调	OnPrevOrNext	-
onSuperPrev	点击头部左双箭头时触发的回调	OnPrevOrNext	-
onSuperNext	点击头部右双箭头时触发的回调	OnPrevOrNext	-
headerRender	头部自定义渲染	(props: HeaderPanelProps) => React.ReactNode	-
validValue	可选择的年份的有效区间	[Dayjs, Dayjs]	-
renderHeaderExtra	渲染头部额外内容	(props: HeaderPanelProps) => React.ReactNode	-
cellClassName	单元格自定义样式	(value: Dayjs) => Record<string, boolean> \| undefined \| null	-
cellProps	单元格自定义属性	{ onMouseEnter?: ( v: Dayjs, e: React.MouseEvent<HTMLElement>, args: Pick<CellData, 'isCurrent' \| 'label'> ) => void; onMouseLeave?: ( v: Dayjs, e: React.MouseEvent<HTMLElement>, args: Pick<CellData, 'isCurrent' \| 'label'> ) => void; }	-

CellData #

参数	说明	类型	默认值	是否必填
value	-	Dayjs	-	是
label	-	number \| string	-	是
isCurrent	-	boolean	-	是
key	-	string \| number	-	是

OnPrevOrNext #

export type OnPrevOrNext = (value: Dayjs, options: { unit: ManipulateType; num: number }) => void;

CalendarMode #

export type CalendarMode = 'month' | 'year';

CalendarPanelMode #

export type CalendarPanelMode = 'date' | 'week' | 'month' | 'quarter' | 'year' | 'decade';

CustomCellRender #

export type CustomCellRender = (value: Dayjs) => React.ReactNode;