drag-calendar

一个可拖拽的日历组件，开发介绍

项目效果：

运行demo

运行demo请clone项目并进入项目的demo目录

tnpm install

tnpm start

然后访问 localhost:8000/ 就能看到。

使用

npm install calendar --save

然后在你的项目里

import Calendar from 'drag-calendar';

然后在render的时候传入一些参数，例如

<Calendar
    monthStr="2018-04"
    eventList={eventList}
    eventForm={(event, closePopover) => {
    return <CustomForm
      event={event}
      closePopover={closePopover}
      onChangeTime={this.onChangeTime}
      deleteEvent={this.deleteEvent}
    />
    }}
    onChangeTime={this.onChangeTime}
    deleteEvent={this.deleteEvent}
    createNewEvent={this.createNewEvent}
/>

参数列表

draggable(可选)

是否有拖动的效果，默认为true

popoverControl(可选)

是否需要页面点击清理popover，默认为true，这个设置为false之后，eventForm的第二个参数会失效哈。

monthStr

当前展示几月份的，格式"YYYY-MM"

eventList

已经定义的事件列表，数组格式，具体格式如下，会根据userId来随机渲染一种颜色

  const eventList = [{
    id: 12,
    startTime: "2018-04-4",
    endTime: "2018-04-15",
    displayName: "（主）小鹿",
    userId: 1,
  }];

eventForm

一个函数，支持传入自定义的form，自定义form写法参照我的demo

函数有两个参数，event为点击的时间，closePopover为清理这个popover的callback

onChangeTime

改变事件的函数

函数有3个参数，分别为事件id，事件startTime，事件endTime

deleteEvent

删除事件的函数

函数有1个参数，为事件id

createNewEvent

创建事件的函数，函数有2个参数，分别为开始时间和结束时间

changeMonth

点击左右切换日期，我会将新的monthStr传出来，让外部传入，这个接口主要是外部可能需要重新请求数据

children(可选)

组件可以传入children传入渲染

dateType(可选)

日历支持粒度切换，默认为'YYYY-MM-DD'，支持传入'YYYY-MM-DD HH:mm:ss'或者'YYYY-MM-DD HH:mm'

tip

0.0.4升级功能：

支持配置draggable,popoverControl,children以及dateType。各参数功能查看以上文档
拖拽速度调优了

ProtoTeam/drag-calendar

ProtoTeam

Reviews

Repository Details