@beisen-platform/calendar
平台ethos中的日历组件
Last updated a year ago by beisencorp .
ISC · Repository · Original npm · Tarball · package.json
$ cnpm install @beisen-platform/calendar 
SYNC missed versions from official npm registry.

等待替换后废弃,请勿使用,不做任何支持。

Calendar日历控件

项目运行

  1. npm install

  2. npm run examples (测试用例)

注意

日历组件外层需要有具体的宽高才可正常显示,由于其内部时用flexbox布局 例:

  <div style={{height:"600px",width:"1000px"}}>
    <Calendar {...this.state}/>
  </div>

组件调用

  • import Calendar from '@beisen-platform/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, //工具栏右侧自定义组件
        dateCellAttr:dateCellAttr,  //月视图下,日期格子中 自定义属性组件
      }
      ,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>

参考地址

react-big-calendar官网

react-big-calendar GitHub

Current Tags

  • 2.0.3-alpha.3                                ...           latest (a year ago)

7 Versions

  • 2.0.3-alpha.3                                ...           a year ago
  • 2.0.3-alpha.2                                ...           a year ago
  • 2.0.3-alpha.1                                ...           a year ago
  • 2.0.3                                ...           a year ago
  • 2.0.2-rc.1                                ...           a year ago
  • 2.0.1                                ...           a year ago
  • 2.0.0                                ...           a year ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 0

Copyright 2014 - 2016 © taobao.org |