react 日历组件拖拽部分逻辑/元素

目标

我们在上半部分实现了一个可以渲染年月的月视图的日历组件。其中有一个api是cellAppend，可以往日历内容区域写内容。

 

代码示例如下：

<Calendar
        cellAppend={(cellData) =>
         判断在某这个日期展示 && (
            <div className="cell-append-demo-outer">
                今天
            </div>
          )
        }
      />

好了，我们这里的目标是

• 实现渲染一段日期，比如11号到20号，然后这个日期是可以拖拽的。
• 这段日期的开始位置，可以往左右拉伸，目的让时间段可以增加或者减少
• 同理日期的末尾也是可以拉伸的
• 新建日期：在日历每一天的空白处开始拖拽，拖拽出的一片空白区域可以新建日期。

我们只实现基本的情况，因为这里面会涉及不少的判断，比如多个任务重叠，如何重排序的问题。

渲染时间段

这个很简单，我们渲染的数据必然是一个数组，类似:

const eventList = [
  {
    id: 12, // 这段日期的唯一标识id
    startTime: "2018-04-4", // 日期起始
    e