@rax-ui/calendar NPM

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`	日期单元格当天时文字样式