代码拉取完成,页面将自动刷新
具有拖拽功能的react日历插件
因为项目中用到日历插件, 即使有团队已开发出相应组件,但使用下来并不能满足项目的需求, 有以下几点原因: 1、原有组件样式较为复杂,难以实现跨日期活动连接起来的样式,如果改动,对组件修改较大; 2、原有组件显示月份前后几日,即使设置不可选,还是会出发点击切换月份的行为,与预期交互不符,只能让其显示本月月份,略显单调; 基于这些原因,考虑之后更新组件。刚好前不久看到一篇文章《如何写一个拖拽日历组件》,使人耳目一新,感觉使交互上了N个层次。所以动起了重写一份符合项目需求、附带拖拽功能的日历组件的念头。
由于该拖拽组件附带源码,所以先对比一下既有组件和该拖拽日历组件,按照优良中差四个级别分别从功能、样式、交互、可复用几个方面对比如下:
既有组件 | 拖拽组件 | |
---|---|---|
功能 | 良 | 差(缺少年月切换,放开的接口很少,很难直接应用于项目) |
样式 | 良 | 中(写死的背景,很难满足自定义背景和主题切换) |
交互 | 中 | 优(添加拖拽交互,并且实现较为完整) |
可复用 | 优(接口很多,基本可以满足日常开发) | 差(接口很少,应用单一) |
接下来就很明显了,当然是综合两者, 以达到满足需求、又满足良好交互的目的。
根据日期正确展示月份日历
年月可切换
支持添加活动,可以跨天展示
支持拖拽,具体为:
#1. 空白地方拖拽: 添加新活动
#2. 具体活动条左边头部拖拽: 开始日期增大或减小
#3. 具体活动条右边头部拖拽: 结束日期增大或减小
#4. 具体活动条中间拖拽: 活动开始日期和结束日期整体增大或减小
支持点击, 具体为:
#1. 空白区域单击,弹出新建活动的弹窗,日期范围为当前全天
#2. 具体活动单击, 展示活动详情,并包含删除操作
支持自定义活动背景颜色加以区分
支持周视图、日视图
支持主题切换
设计设计
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。