@beisen/calendar

    0.0.55-alpha.55 • Public • Published

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

    Calendar日历控件

    项目运行

    1. cnpm install 或 npm install cnpm使用教程

    2. npm run dev (开发环境打包 port:8888)

    3. npm run test (测试用例)

    4. npm run build (生产环境打包)

    demo预览地址

    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, //工具栏右侧自定义组件
            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

    Install

    npm i @beisen/calendar

    DownloadsWeekly Downloads

    34

    Version

    0.0.55-alpha.55

    License

    ISC

    Unpacked Size

    3.85 MB

    Total Files

    213

    Last publish

    Collaborators

    • beisencorp