drag-calendar

A draggable calendar

Usage no npm install needed!

<script type="module">
  import dragCalendar from 'https://cdn.skypack.dev/drag-calendar';
</script>

README

drag-calendar

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

项目效果:

image

运行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'

tip

0.0.4升级功能:

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