# rcm-calendar

**Repository Path**: mzy12/rcm-calendar

## Basic Information

- **Project Name**: rcm-calendar
- **Description**: A react component, including day view, week view and month view.
一个react 组件，包括日视图，周视图和月视图。
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-08-05
- **Last Updated**: 2021-08-05

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# rcm-calendar

A react calendar view with day, week and month

## 📦 Install

```bash
npm install rcm-calendar
```

```bash
yarn add rcm-calendar
```

## 🔨 Usage

```jsx
import Calendar from 'rcm-calendar';

const App = () => (
  <>
    <Calendar 
      date={date}
      viewType={'week'}
      isWhichHour={"24"}
      isVisibleSolar2lunar={true}
      schedules={[]}
    />
  </>
);
```
也可以单独引入日、周、月视图： DayCalendar、WeekCalendar、MonthCalendar,
```jsx
import {WeekCalendar} from 'rcm-calendar';

const App = () => (
  <>
    <WeekCalendar 
      date={date}
      viewType={'week'}
      isWhichHour={"24"}
      isVisibleSolar2lunar={true}
      schedules={[]}
    />
  </>
);
```

## API

日历视图的属性说明如下：

| 属性 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| view | 视图类型,有day/week/month | string | - |
| date | 视图的显示日期 | Dayjs | dayjs() |
| isEnglish | 是否是英语状态 | boolean | false|
| isWhichHour | 时间 日视图或周视图的时刻轴的时间类型：24/12 | string | '24' |
| schedules | 日程的数据 | ISchedules[] | - |
| monthVisibleWeeksCount | 月视图每天显示的日程数 | number | 2 |
| isVisibleSolar2lunar | 是否显示农历 | boolean | false |
| renderHeaderTemplate | 视图头部的自定义 | ReactNode | - |
| alldayName | 全天的名称 | string | 全天 |
| clickSchedule | 单个日程的点击事件 | (e, schedule) => void | - |
| rightMouseClick | 右键日程 | (e, schedule) => void | - |
| clickBlank | 点击空白处 | (e, time) => void | - |
| dbclickBlank | 双击空白处 (单双击只能有一个) | (e, time) => void | - |
| monthClickMore | 月视图点击还有几项按钮事件 | (e, schedules) => void | - |

ISchedules：日程字段说明

| 属性 | 说明 | 类型 |
| --- | --- | --- |
| id | id,可以不用传入 | string |
| calendarId | calendarId,可以不用传入 | string |
| recurrenceId | recurrenceId,可以不用传入 | string |
| title | 日程标题 | string |
| start | 日程开始时间 | number 时间戳（秒） |
| end | 日程结束时间 | number 时间戳（秒） |
| isAllDay | 是否是全天日程 | boolean |
| location | 日程的地点 | string |
| attendees | 日程参与人 | Array |
| color | 日程的title颜色 | string |
| bgColor | 日程的背景颜色 | string |
| borderColor | 日程左边框的颜色 | string |
| customStyle | 自定义css | {} |
| state | 记录日程的状态 | string |
| raw | 用户自定所需要的字段 | {} |