等待替换后废弃,请勿使用,不做任何支持。
@beisen/m-calendar
参数
1. 参数events
events传入的必须是一个数组,数组的每个元素的格式 如下
{
title: "时间1" //事件名称
,start: new Date() //事件开始时间
,end: new Date() //事件结束时间
}
2. 参数attribute
attribute传入的必须是一个数组,数组的每个元素的格式 如下
{
title: "时间1"
,time: new Date() //绑定事件的属性
,color: {
titleColor: "#dddddd" //
,dateColor: "#333" //日期数字颜色
,eventColor: "#333" //事件颜色
}
}
3. 参数onSelectEvent
点击某一天时,调用这个方法,方法的参数如下:
/*
date //点击的日期
event //点击当天要进行的事件
attribute //当天的属性
*/
(date,event,attribute)=>{ // 日期选择事件
}
<Calendar {...this.props} events={events} date={ this.state.date } defaultDate={ this.state.date } onSelectEvent={(date,event,attribute)=>{ // 日期选择事件 this.setState({date:date}) }} onSwipeLeft = { this.onChange.bind(this,1) } onSwipeRight = { this.onChange.bind(this, -1) } components={{ header : WeekHeader //自定义日历头部 ,dateCell : DateCell //自定义每个日历单元格 }} />
## 使用
import Calendar from '@beisen/m-calendar'; require('@beisen/m-calendar/lib/css/m-calendar.css');
<Calendar events={events} date={ this.state.date } defaultDate={ this.state.date } onSelectEvent={(date,event)=>{ // 日期选择事件 this.setState({date:date}) }} onSwipeLeft = { this.onChange.bind(this,1) } onSwipeRight = { this.onChange.bind(this, -1) } components={{ header : WeekHeader //自定义日历头部 ,dateCell : DateCell //自定义每个日历单元格 }} />
## 运行
git clone git@gitlab.beisencorp.com:ux-cnpm/ux-m-calendar.git
npm install
npm run start
//访问 http://localhost:8080/app/