calendar componment for react


Keywords
react, react-calendar, react-uxcore-calendar, uxcore-calendar
License
MIT
Install
npm install uxcore-calendar@0.9.21

Documentation

uxcore-calendar


NPM version build status Test Coverage Dependency Status devDependency Status NPM downloads

Sauce Test Status

TL;DR

transfer ui component for react

setup develop environment

$ git clone https://github.com/uxcore/uxcore-calendar
$ cd uxcore-calendar
$ npm install
$ npm start

Usage

var Calendar = require('uxcore-calendar');
const {
  MonthCalendar, YearCalendar, RangeCalendar, CalendarFull, MiniWeek
} = Calendar;
React.render(
  (<Calendar />),
  document.getElementById('target')
);

demo

http://uxco.re/components/calendar/

API

  • onSelect(date, formatDateString)
    • date date
    • formatDateString string

Attention

0.8.0 之后,我们使用 moment 替代了 gregorianCalendar,在一些格式上和用法上有了一些变化。

共通 Props

参数 说明 类型 默认值
placeholder 占位符 string 请选择日期
locale en-us,zh-cnpl-pl string zh-cn
disabledDate 不可选择的日期 (currentDate) => boolean
onSelect 当日期被选中时触发 function(date)
disabled 禁用 boolean false
getPopupContainer 弹出的菜单渲染在哪个容器中 function(trigger:Node):Node () => document.body
size 尺寸,支持 large/middle/small string large
allowClear 是否支持清空 boolean true
onOpenChange 在下拉面板展开、收起时调用 function(open) noop
defaultOpenValue 在值为空的情况下,日历面板默认展示的值 boolean

props

参数 说明 类型 默认值
value 日期 string/number
defaultValue 日期 string/number
format 展示的日期格式 string 'YYYY-MM-DD'
disabledTime 不可选择的时间,返回格式见下文 function(date)
showTime 是否显示时间选择面板 boolean false
showHour 时间选择面板是否显示小时 boolean true
showSecond 时间选择面板是否显示秒 boolean true
timePicker 自己传入定制的 timePicker React Element -
yearSelectOffset 年选择器中第一个年份与当前选中值之间的距离,例如当前为 1997 年,距离为 50,则最早可选择年份为 1947 年 number 50
yearSelectTotal 年选择器中年份的总数,如最早可选为 1947 年,总数为 100,则可选年份范围为 1947 - 2047 number 100
renderSidebar sidebar React Element () => React.Node
renderFooter extra foot React Element () => React.Node

disabledTime 例子

function range(start, end) {
  const result = [];
  for (let i = start; i < end; i++) {
    result.push(i);
  }
  return result;
}

function disabledTime() {
  return {
    disabledHours: () => range(0, 24).splice(4, 20),
    disabledMinutes: () => range(30, 60),
    disabledSeconds: () => [55, 56],
  };
}

MonthCalendar Props

参数 说明 类型 默认值
value 日期 string/number
defaultValue 日期 string/number
format 展示的日期格式 string 'yyyy-MM'
allowedMonthRange 允许的月份范围,与disableDate互斥 object

YearCalendar Props

参数 说明 类型 默认值
value 日期 string/number
defaultValue 日期 string/number
format 展示的日期格式 string 'yyyy'

RangeCalendar Props

参数基本与 Calendar 相同

参数 说明 类型 默认值
value 日期 array
defaultValue 日期 array
quickSelectRanges 快捷日期选择 array

RangeCalendar 例子

<RangeCalendar
    size="large"
    value={rangeValue}
    quickSelectRanges={[
        {
            text: '19年1、2月份',
            value: {
                start: '2019-01',
                end: '2019-02'
            }
        },
        {
            text: '18年S2',
            value: {
                start: '2018-09',
                end: '2019-03'
            }
        }
    ]}
    onSelect={(v, formatted) => {
      this.onRangeSelect(v, formatted);
    }}
/>

CalendarFull props

参数 说明 类型 可选值 默认值
value 日期 string/number
defaultValue 默认日期 string/number
type 类型 string time/week/month 'time'
startHour 面板开始时间(小时) number 9
endHour 面板结束时间(小时) number 23
step 面板间隔时间(分钟) number 60
format 展示的日期格式 string 'YYYY-MM-DD'
disabledTime 不可选择的时间段,返回格式见下文 function(date)
disabledDate 不可选择的时间日期 function(date)
showHeader 是否显示头部 boolean true
onSelect 当面板日期被选中时触发 function(date)
onTypeChange 当切换面板类型时触发 function()
weekRender 周视图面板中每个格子的渲染函数 function(current,formatDate)
dateRender 月视图面板中每个格子的渲染函数 function(current,formatDate)
timeRender 日视图面板中每个格子的渲染函数 function(current,formatDate)
headerComponent 头部自定义组件 React Element
headerRender 头部自定义渲染函数 function(current,type)
scheduleRender 渲染面板中的函数,可以跨日程显示详情 Calendar.util.generateScheduleContent(events)
getPopupContainer 指定渲染日程的容器 function

�MiniWeek props

参数 说明 类型 可选值 默认值
locale 中英文 string zh-cn/en zh-cn
events 渲染的日程事件 array []
scheduleRender 用来�渲染具体日程下的事件 function(dateInfo)

CalendarFull 例子

//events.js
const events =  [
  {
    start: '2018-10-24 13:00', // 事件开始时间
    end: '2018-10-31 23:00', // 事件结束时间
    // 事件的回调函数
    render: ({current,startHour,endHour,step,type}) => {}
  },
];
<CalendarFull
  value={this.state.value}
  onSelect={this.onSelect}
  type="month"
  locale="zh-cn"
  format="yyyy/MM/dd"
  scheduleRender={Calendar.util.generateScheduleContent(events)}
  startHour={12}
  endHour={18}
  step={40}
  />

�MiniWeek 例子

miniWeekRender(dateInfo){
  /**
   * 返回的�dateInfo结构如下
   * {
   *   events: [],当前时间下的日程事件
   *   label: 当前时间是星期几
   *   value: 当前日期
   * }
  */
}

<MiniWeek
  locale="zh-cn"
  events={events}
  scheduleRender={this.miniWeekRender}
  >
  <div className="schedule-container">
    <h3>这是日程渲染事件</h3>
  </div
</MiniWeek>
 <MiniWeek
  value="2018-12-24"
  locale="en-us"
  events={events}
  scheduleRender={this.miniWeekRender}
  getPopupContainer={() => this.miniRender}
/>
<div className="miniweek-container" ref={(c) => { this.miniRender = c; }} />

util

一些辅助函数,用于某些套餐化定制

  • Calendar.util.generateContentRender(code, locale): 用于在日历上标注非常规的休假、上班以及日程。

    • code should be an object like this {'xxxx-xx-xx': ['work/leave/schedule']}
    • locale should be zh-cn or en-us
  • Calendar.util.generateScheduleContent(events):用于在日历中展示跨日程详情

Tips:当不确定日程详情中是否有跨日程事件时,推荐使用scheduleRender events 为对象数组,格式如下:

[{
    start: '2018-10-16 13:00',//事件开始时间
    end: '2018-10-16 14:00',//事件结束时间
    //事件的回调函数
    render: () => <div>10-10 </div>
}]