README

uxcore-calendar

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-cn` 和 `pl-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>
}]

Usage no npm install needed!