@rax-ui/calendar

---

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