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