uxcore-calendar v0.10.45

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

props

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

YearCalendar Props

RangeCalendar Props

参数基本与 Calendar 相同

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

MiniWeek props

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