1 Star 4 Fork 1

ChiGao / react-calendar

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README
MIT

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查看效果
The MIT License (MIT) Copyright (c) 2018 garygao12580 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

简介

具有拖拽功能的日历插件, 支持新建事件 展开 收起
JavaScript
MIT
取消

发行版

暂无发行版

贡献者

全部

近期动态

加载更多
不能加载更多了
JavaScript
1
https://gitee.com/chi-gao/react-calendar.git
git@gitee.com:chi-gao/react-calendar.git
chi-gao
react-calendar
react-calendar
master

搜索帮助