rm-calendar v0.1.3

日历组件 📅

$ git clone git@github.com:qiujie8092916/react.calendar.git
$ cd react.calendar && yarn install
$ yarn start

import { Calendar } from 'react-calendar'

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;
}

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

<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})}
/>