# react-calendar

**Repository Path**: salesforce/react-calendar

## Basic Information

- **Project Name**: react-calendar
- **Description**: 具有拖拽功能的日历插件， 支持新建事件
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: https://www.garygao.cn/calendar
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2021-04-01
- **Last Updated**: 2021-04-01

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# react-calendar

### 项目介绍
 具有拖拽功能的react日历插件

### 背景
 因为项目中用到日历插件， 即使有团队已开发出相应组件，但使用下来并不能满足项目的需求， 有以下几点原因：
  1、原有组件样式较为复杂，难以实现跨日期活动连接起来的样式，如果改动，对组件修改较大；
  2、原有组件显示月份前后几日，即使设置不可选，还是会出发点击切换月份的行为，与预期交互不符，只能让其显示本月月份，略显单调；
基于这些原因，考虑之后更新组件。刚好前不久看到一篇文章[《如何写一个拖拽日历组件》](https://juejin.im/post/5ac322876fb9a028c71ea27e)，使人耳目一新，感觉使交互上了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查看效果