display: Calendar family: data-display

Calendar

按照日历形式展示数据

API

Props

|名称 | 说明 | 类型 | 默认值 | |:---------------|:--------|:----|:----------| | shape | 日历类型 可选值： normal, picker | enum | normal | | mode | 显示面板模式 可选值： date, week | enum | date | | selectType | 选择类型: 可选值： single， multiple， range， week | enum | single | | defaultValue | 默认选择日期 | Date / Date[] | new Date() | | value | 选择日期 | Date / Date[] | | | visibleDate | 默认显示日期 | Date | new Date() | | hideHeader | 是否隐藏日历头 | boolean | false | | rowHeight | 日期行高，单位：rpx | number | 80 | | disabledDate | 禁用日期 | (date: Date, viewType: ViewType) => boolean | () => false | | renderTitle | 渲染标题内容 | (props: TitleProps) => RaxNode | | | renderDateCell | 渲染日期单元格 | ({ date: Date, status: StatusType }) => RaxNode | | | onChange | 选择日期改变时触发 | (value: Date | Date[], selectDate: Date) => void | | | onVisibleDateChange | 展示面板日期改变时回调 | (date: Date) => void | |

Interface

export interface type ViewType = 'year' | 'month' | 'date';
export interface StatusType = 'normal' | 'disabled' | 'selected' | 'current';
export interface TitleProps {
  date: Date,
  mode: 'year' | 'month' | 'date' | 'week',
  locale: LocaleType,
  styles: { title: CSSProperties }
}

LocaleType

export interface LocaleType {
  /**
   * 哪一天作为一个星期的开始
   */
  firstDayOfWeek?: number;
  /**
   * 月份再年份前面
   */
  monthBeforeYear?: boolean;
  /**
   * 周列表
   */
  weekdays?: string[];
  /**
   * 月列表
   */
  months?: string[];
  /**
   * 年
   */
  year?: string;
  /**
   * 月
   */
  month?: string;
  /**
   * 日
   */
  day?: string;
}

CSS API

| 名称 | 说明 | |:---------------|:--------| | calendar | 日历容器样式 | | calendar__header | 日历头样式 | | calendar__header__action | 日历头部切换按钮样式 | | calendar__header__action-icon | 日历头部切换按钮图标样式 | | calendar__header__title | 日期标题样式 | | calendar__week | 周行样式 | | calendar__week-cell | 周单元格样式 | | calendar__week-cell__text | 周单元格文字样式 | | calendar__body | 日历体样式 | | calendar__sub-header | 日历子标题样式 | | calendar__sub-header__text | 日历子标题文字样式 | | calendar__date-table | 日历表格样式 | | calendar__date-table-tr | 日历表格行样式 | | calendar__date-table-td | 日历单元格格样式 | | calendar__date-table-td--inrange | 在选择区间内样式 | | calendar__date-table__cell | 日期单元格样式 | | calendar__date-table__cell__text | 日期单元格文字样式 | | calendar__date-table__cell--disabled | 日期单元格禁用样式 | | calendar__date-table__cell--disabled__text | 日期单元格禁用时文字样式 | | calendar__date-table__cell--selected | 日期单元格选择样式 | | calendar__date-table__cell--selected__text | 日期单元格选择时文字样式 | | calendar__date-table__cell--current | 日期单元格当天样式 | | calendar__date-table__cell--current__text | 日期单元格当天时文字样式 |