rm-calendar
``` import Calendar from 'react-calendar' ```
Last updated 8 months ago by qiujieee_empty .
ISC · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install rm-calendar 
SYNC missed versions from official npm registry.

日历组件 ????

Demo:

$ git clone git@github.com: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

Current Tags

  • 0.1.3                                ...           latest (8 months ago)

5 Versions

  • 0.1.3                                ...           8 months ago
  • 0.1.2                                ...           10 months ago
  • 0.1.1                                ...           10 months ago
  • 0.1.0                                ...           10 months ago
  • 1.0.1                                ...           10 months ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 5
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |