react-drag-calendar v0.0.1

react-calendar

项目介绍

具有拖拽功能的react日历插件

背景

因为项目中用到日历插件， 即使有团队已开发出相应组件，但使用下来并不能满足项目的需求， 有以下几点原因： 1、原有组件样式较为复杂，难以实现跨日期活动连接起来的样式，如果改动，对组件修改较大； 2、原有组件显示月份前后几日，即使设置不可选，还是会出发点击切换月份的行为，与预期交互不符，只能让其显示本月月份，略显单调； 基于这些原因，考虑之后更新组件。刚好前不久看到一篇文章《如何写一个拖拽日历组件》，使人耳目一新，感觉使交互上了N个层次。所以动起了重写一份符合项目需求、附带拖拽功能的日历组件的念头。

由于该拖拽组件附带源码，所以先对比一下既有组件和该拖拽日历组件,按照优良中差四个级别分别从功能、样式、交互、可复用几个方面对比如下：

接下来就很明显了，当然是综合两者， 以达到满足需求、又满足良好交互的目的。

需求

基本

1. 根据日期正确展示月份日历
2. 年月可切换
3. 支持添加活动，可以跨天展示

4. 支持拖拽，具体为：

   #1. 空白地方拖拽： 添加新活动

   #2. 具体活动条左边头部拖拽： 开始日期增大或减小

   #3. 具体活动条右边头部拖拽： 结束日期增大或减小

   #4. 具体活动条中间拖拽： 活动开始日期和结束日期整体增大或减小

5. 支持点击, 具体为：

   #1. 空白区域单击，弹出新建活动的弹窗，日期范围为当前全天

   #2. 具体活动单击， 展示活动详情，并包含删除操作

6. 支持自定义活动背景颜色加以区分

高级

1. 支持周视图、日视图

2. 支持主题切换

设计

设计设计

使用说明

1. git clone
2. npm install
3. npm start
4. 浏览器打开localhost:8000查看效果