react-big-calendar

公式

Is 何

以下のようなイベントカレンダーを作れる。
fullcalendarに影響を受けている。つまりこれの後発。

月

週

work 週

日

一覧

アーキテクチャ

Calendar

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

Event

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

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

Resource

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

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

Localization and Date Formatting

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

カスタマイズ性

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

• 渡し方

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から抜いた）

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

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>;
}