2019-12-22に投稿

react-big-calendarの攻略

イベントカレンダー機能

Reactで作ったCMSにカレンダー機能を実装しました。

動作イメージ

使ったライブラリ

アジェンダテーブル

theaderとtbodyが連動していないため、OSSに初めてプルリクを出してみました。
とりあえず応急措置としてスタイルで固定で横幅を指定します。

th.rbc-header:nth-child(1){
  min-width: 77px;
}
th.rbc-header:nth-child(2){
  min-width: 121px;
}
th.rbc-header:nth-child(3){
  width: 100%;
}

表示の日本語化

import globalize from "globalize";
require("./globalize.ja.js");
const localizer = globalizeLocalizer(globalize);

globalize.culture.ja.js

localizerはreact-big-calendarにpropsとして渡します。

ツールバーの日本語化


こちらはglobalizeに対応していないハードコーディングなので、
CSSで元の文字を0pxにし、要素を増やす形で置き換えます。

/*文字置き換え*/
.rbc-btn-group > button{
  font-size: 0px;
}
.rbc-btn-group:nth-child(1) > button:nth-child(1)::before{
  font-size: 14px;
  content: '今日';
}
.rbc-btn-group:nth-child(1) > button:nth-child(2)::before{
  font-size: 14px;
  content: '←';
}
.rbc-btn-group:nth-child(1) > button:nth-child(3)::before{
  font-size: 14px;
  content: '→';
}
.rbc-btn-group:nth-child(3) > button:nth-child(1)::before{
  font-size: 14px;
  content: '月';
}
.rbc-btn-group:nth-child(3) > button:nth-child(2)::before{
  font-size: 14px;
  content: '週';
}
.rbc-btn-group:nth-child(3) > button:nth-child(3)::before{
  font-size: 14px;
  content: '日';
}
.rbc-btn-group:nth-child(3) > button:nth-child(4)::before{
  font-size: 14px;
  content: 'スケジュール';
}

props

components

event(月・週・日で表示されるコンポーネント)とagenda(スケジュールで表示されるイベント)の動作を記述できる。

Event = ({ event }) => {
    return (
      <span>
        {event.title}
      </span>);
  };

  EventAgenda = ({ event }) => {
    return (
      <div
        onClick={()=>{
          this.setState({
            isOpen:true,
            selectEvent:event
          })
        }}
      >
        {event.type}/{event.title}
      </div>
    );
  };


components={{
            event: this.Event,
            agenda: {
              event: this.EventAgenda
            }
          }}

onSelectEvent

agendaで表示されるコンポーネントが選択されたときに発火するイベント
(ここではポップアップモーダルを開く)

onSelectEvent={(event,e)=>{
              this.setState({
                isOpen:true,
                selectEvent:event
              })
          }}

eventPropGetter

event.typeによってスタイルを変える処理
参考:Change color of react-big-calendar events


eventPropGetter={(event, start, end, isSelected) => { let bgColor; let fontColor; switch (event.type) { case "練習会": bgColor = "#BF7A87"; fontColor = "aliceblue"; break; default: bgColor = "#386537"; fontColor = "aliceblue"; break; } let newStyle = { backgroundColor: bgColor, color: fontColor }; return { className: "", style: newStyle }; }}
ツイッターでシェア
みんなに共有、忘れないようにメモ

ckoshien

個人開発4年目。普段はアプリケーションエンジニア。 ReactJS/NodeJS/ReactNative/Java

Crieitは個人で開発中です。 興味がある方は是非記事の投稿をお願いします! どんな軽い内容でも嬉しいです。
なぜCrieitを作ろうと思ったか

また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!

こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください!

ボードとは?

関連記事

コメント