Calendar日历控件
项目运行
-
cnpm install 或 npm install cnpm使用教程
-
npm run dev （开发环境打包 port:8888）
-
npm run test （测试用例）
-
npm run build （生产环境打包）
demo预览地址
注意
日历组件外层需要有具体的宽高才可正常显示，由于其内部时用flexbox布局 例：
<div style={{height:"600px",width:"1000px"}}>
<Calendar {...this.state}/>
</div>
组件调用
- import Calendar from '@beisen/calendar';
常用参数
class block extends Component{
render(){
return <div>头部</div>
}
}
class Event extends Component{
render(){
return (
<span>
<strong>
{events.title}
</strong>
{ events.desc && (': ' + events.desc)}
</span>
)
}
}
class EventAgenda extends Component{
render(){
return <span>
<em style={{ color: 'magenta'}}>{events.title}</em>
<p>{ events.desc }</p>
</span>
}
}
{
// step:5 //在day视图和week视图中每个时间段的间隔，一单位为8分钟，即 step:{5}，每次时间间隔40分钟；默认为1小时
// ,timeslots:2 //每次时间间隔中的分段，默认为2段,一段30分钟
defaultView:'month' //默认视图页
,culture:'zh-CN' //zh-CN 中文 en 英文，默认中文
,date:new Date(2015, 3, 12)
,scrollToTime:new Date(1970, 1, 1, 6)
,rtl:false //日历的格局，默认为false，从左到右
,components:{ // 日期视图头部显示的组件
// day: {header: block},
// week: {header: block},
// month: {header: block},
// event: Event,
// agenda: {
// event: EventAgenda
// },
rightView:RightView,
toolBarRightView:ToolBarRightView
}
,selectable:true // true , false , 'ignoreEvents'
,onSelectEvent:(value,event)=>{
//点击日程事件
console.log(value)
console.log(event.target)
}
,onSelectAttr:(value,event,backEvent)=>{
//点击属性
console.log(value)
console.log(event.target)
console.log(backEvent)
}
,onSelectSlot:(slotInfo)=>{
//点击日期格或选择多日期
// console.log(`selected slot: \n\nstart ${slotInfo.start.toLocaleString()} ` +
// `\nend: ${slotInfo.end.toLocaleString()}`)
// console.log(slotInfo)
console.log(slotInfo)
}
,onSelectView:(value)=>{
//改变视图日期时，如选择周，选择月时
console.log(value)
}
,onDropEvent:(value)=>{
//拖拽Event后抛出的值
console.log(value)
}
,eventPropGetter:(event,start,end,isSelected)=>{return {className:"aaaaaaa",style:{}}} //为event添加className和style
,popup:true //点击日程中的更多是否显示弹窗
,dropable:true //日程是否可拖拽
,showLunarDay:true //显示农历
,showEvents:true //显示所有事件， 默认为true
,showAttrs:true //显示所有属性, 默认为true
,showRightView:true //显示右侧区域，包括日期和自定义组件，默认为false
,toolbar:true //是否显示顶部工具栏
,showToolBarComponent:{
timeTitle:false,
monthBtn:true,
weekBtn:true,
dayBtn:true,
dropYearBtn:true,
dropMonthBtn:true,
todayBtn:true,
showLegend:true //展示头部工具栏的图例，默认为true
}
,showWeekendBgColor:false //是否显示月视图中周六日的默认背景色，默认为true
,clickEnable:{ //是否可点击
monthViewDay:true //月视图中的日期是否可点击（默认为true,点击后会跳转到日视图）
}
,messages:{ //配置汉化
allDay: '全天',
week: '周',
day: '日',
month: '月',
today: '今天',
agenda: '日程',
legend:'图例',
}
,commonStyle:{ //用于渲染属性的颜色和示例,和节日attribute相对应
work:{
'title':"计划",
'font':"#3E4E59",
'backGround':"#41b0d9",
'isShow':true //是否在图例中展示
},
rest:{
'title':"活动",
'font':"#3E4E59",
'backGround':"#ED5858",
'isShow':true
},
festival:{
"title":"节日",
'font':"#ED5858",
'backGround':"#F5D540",
'isShow':false
}
}
,attribute:[
{
"id":"1"
,"title":"公休日"
,"commonStyle":"work" //用于获取公共颜色
,"time":new Date(2015, 2, 29)
,"position": "center-label"
// "top-right-incliend" //上面右侧斜标签
// "top-left-incliend" 上面左侧斜标签（未实现）
// "top-left-label" 上方左侧label，和农历互斥
// "top-right-label" 上方右侧label，和农历互斥
// "center-label" 中层label
,"color":{ //可没有，优先级最高
'font':"#F28D49",
'backGround':"#00000"
}
},
{
"id":"2"
,"title":"清明节"
,"commonStyle":"festival" //为了获取commonStyle
,"position": "top-right-label"
,"time":new Date(2015, 3, 5)
,"color":{ //可没有，优先级最高
'font':"#ED5858",
'backGround':"#00000"
}
},
{
"id":"3"
,"title":"工作日"
,"commonStyle":"work" //为了获取commonStyle
,"position": "center-label"
,"time":new Date(2015, 3, 0)
,"color":{ //可没有，优先级最高
'font':"#38BA72",
'backGround':"#00000"
}
},{
"id":"4"
,"title":"工作日"
,"commonStyle":"work"
,"position": "top-right-label"
,"time":new Date(2015, 3, 1)
,"color":{
'font':"#38BA72",
'backGround':"#00000"
}
},{
"id":"5"
,"title":"休息日"
,"commonStyle":"rest"
,"time":new Date(2015, 3, 2)
,"color":{
'font':"#ED5858",
'backGround':"#00000"
}
},{
"id":"6"
,"title":"工作日"
,"commonStyle":"work"
,"time":new Date(2015, 3, 4)
,"color":{
'font':"#ED5858",
'backGround':"#00000"
}
}
]
,"events":[
{
'id':"1",
'title': 'All Day Event',
'start': new Date(2015, 3, 0), //或者 Tue Mar 31 2015 00:00:00 GMT+0800 (CST)
'end': new Date(2015, 3, 1),
'commonStyle':'rest',
'color' : {
'font':"#3E4E59",
'backGround':"#41b0d9"
},
'desc': 'Big conference for important people'
},
{
'id':"2",
'title': 'Long Event',
'start': new Date(2015, 3, 7),
'end': new Date(2015, 3, 10),
'commonStyle':'rest',
'color' : {
'font':"#3E4E59",
'backGround':"#41b0d9"
}
},
{
'id':"3",
'title': 'DTS STARTS',
'start': new Date(2016, 2, 13, 0, 0, 0),
'end': new Date(2016, 2, 20, 0, 0, 0),
'type':'rest', /// work rest
'color' : {
'font':"#3E4E59",
'backGround':"#ED5858"
},
},
{
'id':"4",
'title': 'DTS ENDS',
'start': new Date(2016, 10, 6, 0, 0, 0),
'end': new Date(2016, 10, 13, 0, 0, 0),
'color' : {
'font':"#3E4E59",
'backGround':"#41b0d9"
},
},
{
'id':"5",
'title': 'Some Event',
'start': new Date(2015, 3, 9, 0, 0, 0),
'end': new Date(2015, 3, 9, 0, 0, 0)
,'color' : {
'font':"#3E4E59",
'backGround':"#ED5858"
}
},
{
'id':"6",
'title': 'Conference',
'start': new Date(2015, 3, 11),
'end': new Date(2015, 3, 13),
desc: 'Big conference for important people'
,'color' : {
'font':"#3E4E59",
'backGround':"#ED5858"
}
},
{
'id':"7",
'title': 'Meeting',
'start': new Date(2015, 3, 12, 10, 30, 0, 0),
'end': new Date(2015, 3, 12, 12, 30, 0, 0),
desc: 'Pre-meeting meeting, to prepare for the meeting',
'color' : {
'font':"#3E4E59",
'backGround':"#ED5858"
},
},
{
'id':"8",
'title': 'Lunch',
'start':new Date(2015, 3, 12, 12, 0, 0, 0),
'end': new Date(2015, 3, 12, 13, 0, 0, 0),
desc: 'Power lunch',
'color' : {
'font':"#3E4E59",
'backGround':"#41b0d9"
},
},
{
'id':"9",
'title': 'Meeting啊啊啊',
'start':new Date(2015, 3, 12,14, 0, 0, 0),
'end': new Date(2015, 3, 12,15, 0, 0, 0),
'color' : {
'font':"#3E4E59",
'backGround':"#41b0d9"
},
},
{
'id':"9",
'title': '科科科科',
'start':new Date(2015, 3, 12, 12, 30, 0, 0),
'end': new Date(2015, 3, 12, 13, 30, 0, 0),
'color' : {
'font':"#3E4E59",
'backGround':"#41b0d9"
},
},
{
'id':"10",
'title': 'Happy Hour',
'start':new Date(2015, 3, 12, 17, 0, 0, 0),
'end': new Date(2015, 3, 12, 17, 30, 0, 0),
desc: 'Most important meal of the day'
,'color' : {
'font':"#3E4E51",
'backGround':"#F5D540"
},
},
{
'id':"11",
'title': 'Dinner',
'start':new Date(2015, 3, 12, 20, 0, 0, 0),
'end': new Date(2015, 3, 12, 21, 0, 0, 0),
'color' : {
'font':"#3E4E59",
'backGround':"#F5D540"
},
},
{
'id':"12",
'title': 'Birthday Party',
'start':new Date(2015, 3, 13, 7, 0, 0),
'end': new Date(2015, 3, 13, 10, 30, 0),
'color' : {
'font':"#3E4E59",
'backGround':"#F5D540"
},
}
] //日历上的日程事务
}
<div style={{height:"600px",width:"1000px"}}>
<Calendar {...this.state}/>
</div>