# @beisen/m-m-calendar

> Calendar! with events

Latest version **0.0.1-alpha.8** (published 2019-09-02) · MIT license · 0 weekly downloads

## Install

```sh
npm install @beisen/m-m-calendar
pnpm add @beisen/m-m-calendar
yarn add @beisen/m-m-calendar
bun add @beisen/m-m-calendar
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 0.0.1-alpha.8 |
| Published | 2019-09-02 |
| First published | 2019-08-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 14 |
| Unpacked size | 3.7 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 8766 |
| Author | liuqichao |
| Maintainers | beisencorp, lgm, neozw |
| Keywords | scheduler, react-component, react, calendar, events, full calendar |

## Links

- npm: https://www.npmjs.com/package/@beisen/m-m-calendar
- Repository: https://github.com/intljusticemission/react-big-calendar
- Homepage: https://github.com/intljusticemission/react-big-calendar#readme
- Issues: https://github.com/intljusticemission/react-big-calendar/issues
- npm.io page: https://npm.io/package/@beisen/m-m-calendar

## Dependencies (14)

- [react](https://npm.io/package/react.md) ^0.14.8
- [lodash](https://npm.io/package/lodash.md) ^4.17.4
- [warning](https://npm.io/package/warning.md) ^2.0.0
- [globalize](https://npm.io/package/globalize.md) ^0.1.1
- [invariant](https://npm.io/package/invariant.md) ^2.1.0
- [react-dom](https://npm.io/package/react-dom.md) ^0.14.8
- [classnames](https://npm.io/package/classnames.md) ^2.1.3
- [dom-helpers](https://npm.io/package/dom-helpers.md) ^2.3.0 || ^3.0.0
- [@beisen/babel](https://npm.io/package/@beisen/babel.md) ^6.0.2-rc.1
- [react-overlays](https://npm.io/package/react-overlays.md) ^0.6.0
- [uncontrollable](https://npm.io/package/uncontrollable.md) ^3.3.1 || ^4.0.0
- [date-arithmetic](https://npm.io/package/date-arithmetic.md) ^3.0.0
- [react-prop-types](https://npm.io/package/react-prop-types.md) ^0.4.0
- [html-webpack-plugin](https://npm.io/package/html-webpack-plugin.md) ^3.2.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.0.1-alpha.8 (latest) — 2019-09-02
- 0.0.1-alpha.7 — 2019-09-02
- 0.0.1-alpha.6 — 2019-08-14
- 0.0.1-alpha.5 — 2019-08-14
- 0.0.1-alpha.4 — 2019-08-14
- 0.0.1-alpha.3 — 2019-08-14

## README

# 等待替换后废弃，请勿使用，不做任何支持。

@beisen/m-calendar
========================

## 参数

### 1. 参数events
> events传入的必须是一个数组，数组的每个元素的格式 如下

```
{
  title: "时间1"   //事件名称
  ,start: new Date()  //事件开始时间
  ,end: new Date() //事件结束时间
}
```

### 2. 参数attribute
> attribute传入的必须是一个数组，数组的每个元素的格式 如下

```
{
  title: "时间1"
  ,time: new Date()  //绑定事件的属性
  ,color: {
    titleColor: "#dddddd" ／／
    ,dateColor: "#333"  //日期数字颜色
    ,eventColor: "#333"  //事件颜色
  }
}
```

### 3. 参数onSelectEvent
> 点击某一天时，调用这个方法,方法的参数如下：

```
/*
date  //点击的日期
event //点击当天要进行的事件
attribute  //当天的属性
*/
（date,event，attribute)=>{   // 日期选择事件
  	
 }
```

<Calendar
  {...this.props}
  events={events}
  date={ this.state.date }
  defaultDate={ this.state.date }
  onSelectEvent={(date,event,attribute)=>{   // 日期选择事件
  	this.setState({date:date})
  }}
  onSwipeLeft = {
  this.onChange.bind(this,1)
  } 
  onSwipeRight = {
     this.onChange.bind(this, -1)
  } 
  components={{
    header : WeekHeader  //自定义日历头部
    ,dateCell : DateCell //自定义每个日历单元格
  }}
/>
```

## 使用
```
import Calendar from '@beisen/m-calendar';
require('@beisen/m-calendar/lib/css/m-calendar.css');

<Calendar
  events={events}
  date={ this.state.date }
  defaultDate={ this.state.date }
  onSelectEvent={(date,event)=>{   // 日期选择事件
  	this.setState({date:date})
  }}
  onSwipeLeft = {
  this.onChange.bind(this,1)
  } 
  onSwipeRight = {
     this.onChange.bind(this, -1)
  } 
  components={{
    header : WeekHeader  //自定义日历头部
    ,dateCell : DateCell //自定义每个日历单元格
  }}
/>
```
## 运行

 ```
git clone git@gitlab.beisencorp.com:ux-cnpm/ux-m-calendar.git

npm install 

npm run start   
 
//访问 http://localhost:8080/app/
 ```

---
_Source: https://npm.io/package/@beisen/m-m-calendar · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._