カレンダーに表示される予定のstyleを変更する

課題

react-big-calendarを使ったカレンダーの予定の背景色や文字色を変更したい。
変更するにはCalendarコンポーネントのeventPropGetterプロパティに対して、独自のclassまたはstyleを適用する

デフォルトは下記の通り

See the Pen react-big-calendar: sample1 by UT@python勉強中 (@U2T3) on CodePen.

---

対策

1. javascriptで制御する方法
2. cssを適用する方法

1.javascriptで制御する方法

eventPropGetterプロパティに{ className: "", style: B }のオブジェクトを指定する。
予定の種類などで色分けする場合に向いている。

sample.jsx

// styleを作成する関数
const eventStyle = (event, start, end, isSelected) => {
  let bgColor;
  let fontColor;
  if (event.id === 0) {
    bgColor = "#BF7A87";
    fontColor = "aliceblue";
  } else {
    bgColor = "#386537";
    fontColor = "black";
  }
   return {
     className: "",
     style: {
       backgroundColor: bgColor,
       color: fontColor
     }
   };
};

// eventPropGetterプロパティにセット
const Calendar = () => (
  <ReactBigCalendar.Calendar
    eventPropGetter={(event, start, end, isSelected) => eventStyle(event, start, end, isSelected)}
  />
);

See the Pen react-big-calendar: sample2 by UT@python勉強中 (@U2T3) on CodePen.

---

2.cssを適用する方法

eventPropGetterプロパティに{ className: A }のオブジェクトを指定する。
classNameにはcssに定義したクラス名を指定する

style.css

.eventStyle {
    background-color: #ffdc00;
    color: #0000ff;
}

sample.jsx

const eventStyle = {
  className: "eventStyle"
};

// eventPropGetterプロパティにセット
const Calendar = () => (
  <ReactBigCalendar.Calendar
    eventPropGetter={(event, start, end, isSelected) => eventStyle}
  />
);

See the Pen react-big-calendar: sample1 by UT@python勉強中 (@U2T3) on CodePen.

---

参考

• 公式
• react-big-calendarの攻略
• Change color of react-big-calendar events