react-big-calendar

# 公式
http://jquense.github.io/react-big-calendar/examples/index.html

# Is 何
以下のようなイベントカレンダーを作れる。
[fullcalendar](https://fullcalendar.io/)に影響を受けている。つまりこれの後発。

## 月
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/87538/50e3bcbf-9b74-8d87-4bee-f16df3f81cdc.png)

## 週
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/87538/0f7ec73a-3de9-4efe-354e-6c87ec499785.png)


## work 週
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/87538/37905fd5-6da1-895a-24fc-9f3f9d014627.png)

## 日
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/87538/138de6f4-a72a-8054-21b7-1a689419ba93.png)

## 一覧
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/87538/20a0554c-3bbd-1fa2-7994-1d38f0add6bc.png)

# アーキテクチャ
## Calendar
カレンダー本体。
Calendarタグのプロパティで諸々の設定を行う。

## Event
カレンダー内の予定をEventと呼んでいる。
以下の定義をデフォルトとしている。
デフォルトと書いたのは、APIからアクセスする際のキーを上書き指定できるため。
これにより、Eventのプロパティ名も自在（合わせてアクセスキーを指定する必要はある）。

```javascript
Event {
  title: string,
  start: Date,
  end: Date,
  allDay?: boolean
  resource?: any,
}
```

## Resource
スケジュールを持つ主体。ユーザーだったり、施設だったり。
公式Documentに説明はない。が、触発されたと記載があるfullcalendar.ioのドキュメントのResourceを読むと概念的に整合する。（怒
EventにはResourceを紐付けることができる。
リソース特定方法は、[resourceAccessor](http://jquense.github.io/react-big-calendar/examples/index.html#prop-resourceAccessor)がある。
デフォルトはDocumentのとおり、resourceId。
EventにresourceIdプロパティを加えればすぐ使える。

Resourceを定義すると、この画面のように上部にResource.titleが表示される。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/87538/4c196d7e-a571-5c1c-1ade-10170afb1edd.png)


## Localization and Date Formatting
日付のフォーマットとローカライゼーションが外部化されている。
momentが利用できる。

## カスタマイズ性
Documentにも説明はあるが、Calendarのプロパティ「component」にカスタマイズした描画コンポーネント（jsx）を渡せる。

* 渡し方

```javascript
let components = {
  event: MyEvent, // used by each view (Month, Day, Week)
  toolbar: MyToolbar,
  agenda: {
       event: MyAgendaEvent // with the agenda view use a different component to render events
  }
}
<Calendar components={components} />
```

* 再定義可能なものの全量（@typesから抜いた）

どこまでカスタマイズできるかは見ていない。

```typescript

export interface Components<TEvent extends object = Event> {
    event?: React.ComponentType<EventProps<TEvent>>;
    eventWrapper?: React.ComponentType<EventWrapperProps<TEvent>>;
    eventContainerWrapper?: React.SFC | React.Component | React.ComponentClass | JSX.Element;
    dateCellWrapper?: React.SFC | React.Component | React.ComponentClass | JSX.Element;
    timeSlotWrapper?: React.SFC | React.Component | React.ComponentClass | JSX.Element;
    timeGutterHeader?: React.SFC | React.Component | React.ComponentClass | JSX.Element;
    timeGutterWrapper?: React.SFC | React.Component | React.ComponentClass | JSX.Element;
    toolbar?: React.ComponentType<ToolbarProps>;
    agenda?: {
        date?: React.SFC | React.Component | React.ComponentClass | JSX.Element;
        time?: React.SFC | React.Component | React.ComponentClass | JSX.Element;
        event?: React.SFC | React.Component | React.ComponentClass | JSX.Element;
    };
    day?: {
        header?: React.SFC | React.Component | React.ComponentClass | JSX.Element;
        event?: React.SFC | React.Component | React.ComponentClass | JSX.Element;
    };
    week?: {
        header?: React.SFC | React.Component | React.ComponentClass | JSX.Element;
        event?: React.SFC | React.Component | React.ComponentClass | JSX.Element;
    };
    month?: {
        header?: React.SFC | React.Component | React.ComponentClass | JSX.Element;
        dateHeader?: React.SFC | React.Component | React.ComponentClass | JSX.Element;
        event?: React.SFC | React.Component | React.ComponentClass | JSX.Element;
    };
    /**
     * component used as a header for each column in the TimeGridHeader
     */
    header?: React.ComponentType<HeaderProps>;
    resourceHeader?: React.ComponentType<ResourceHeaderProps>;
}
```