日历组件 📅

Demo:

$ git clone [email protected]:qiujie8092916/react.calendar.git
$ cd react.calendar && yarn install
$ yarn start

Import:

import { Calendar } from 'react-calendar'

CalendarProps:

CalendarPropTypes {
  calendarType: 1 | 2;
  visible: boolean;
  startDate: Date;
  endDate: Date;
  selectedDate: [Date] | [Date, null | Date];
  selectType: 1 | 2;
  toRoof: string;
  fullScreen: boolean;
  isBareShell: boolean;
  festivalCover: boolean;
  showToday: boolean;
  showFestival: boolean;
  showHolidayInfo: boolean;
  dayStyle: React.CSSProperties;
  festivalStyle: React.CSSProperties;
  title: string;
  tip: string;
  dayConfig: DayConfig;
  onSelect?: (dateObj: { date: Date | null, std: string }) => void;
  onConfirm?: (dateStart: { date: Date | null, std: string }, dateEnd?: { date: Date | null, std: string }) => void;
  onCancel?: () => void;
}

DayConfig:

interface DayConfig {
  title?: string;
  titleStyle?: React.CSSProperties;
  disable?: boolean;
}

Example:

<Calendar
  calendarType={2}
  visible={this.state.toggleCalender}
  startDate={new Date(2018, 5, 2)} /** 6月2日 */
  endDate={new Date(2019, 1, 10)} /** 12月10日 */
  selectedDate={
    this.selectedType === 1 ? [singleDate] : [minDate, maxDate]
  }
  selectType={2}
  toRoof={"3rem"}
  fullScreen={false}
  isBareShell
  festivalCover
  title="请选择日期test"
  tip="价格变动频繁，以实际成交价为准"
  dayConfig={{
    20180601: {
      title: "¥1262"
    },
    20180602: {
      title: "¥99"
    },
    20180604: {
      title: "¥888"
    },
    20180605: {
      disable: true,
      title: "¥998"
    },
    20180618: {
      title: "¥123"
    },
    20180903: {
      title: "¥228"
    },
    20180910: {
      title: "¥998"
    }
  }}
  onSelect={({std}) => console.log(std)}
  onConfirm={(...selected) => {
    console.log(`confirm: ${selected[0].std}${selected[1] ? ` - ${selected[1].std}` : ""}`)
  }}
  onCancel={() => this.setState({toggleCalender: false})}
/>

API:

参数	说明	类型	必传	缺省
calendarType	横屏滚动还是竖屏滚动	Integer	F	1
visible	是否可见	Boolean	T
startDate	开始时间	Date	T
endDate	结束时间	Date	T
selectedDate	选中的日期(取决于单选还是多选 selectType)	Null | Undefined | Array[Date] | Array[Date, Date]	F
selectType	单选或多选	Integer	F	1
toRoof	浮层离顶距离(支持 px rem)(仅当 fullScreen 为 false 时有效)	String	F	3rem
fullScreen	全屏日历 or 浮层日历	Boolean	F	false
isBareShell	是否需要外壳(横向滚动时可以不需要外壳, 不需要外壳时没有 header 和 tip)	Boolean	F	true
festivalCover	节假日是否遮挡日期	Boolean	F	true
showToday	是否显示今天	Boolean	F	true
showFestival	是否显示节假日	Boolean	F	true
showHolidayInfo	是否显示调休信息	Boolean	F	true
dayStyle	日期样式	Object	F	{}
festivalStyle	节假日样式	Object	F	{}
title	标题	String	F	'请选择日期'
tip	横条提示语	String	F	''
dayConfig	日期配置	Object	F	(见DayConfig)
onSelect	选择后的回调	Function	F
onConfirm	确定后的回调	Function	F
onCancel	取消(关闭)后的回调	Function	F