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

# 課題

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

デフォルトは下記の通り
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="eYEZWEo" data-user="U2T3" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/U2T3/pen/eYEZWEo">
  react-big-calendar: sample1</a> by UT@python勉強中 (<a href="https://codepen.io/U2T3">@U2T3</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
---

# 対策

1. javascriptで制御する方法
1. 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)}
  />
);
```
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="MWvymQR" data-user="U2T3" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/U2T3/pen/MWvymQR">
  react-big-calendar: sample2</a> by UT@python勉強中 (<a href="https://codepen.io/U2T3">@U2T3</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
---

## 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}
  />
);

```
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="ZEJWyGY" data-user="U2T3" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/U2T3/pen/ZEJWyGY">
  react-big-calendar: sample1</a> by UT@python勉強中 (<a href="https://codepen.io/U2T3">@U2T3</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

---

# 参考

* [公式](https://jquense.github.io/react-big-calendar/examples/index.html)
* [react-big-calendarの攻略](https://crieit.net/posts/react-big-calendar)
* [Change color of react-big-calendar events](https://stackoverflow.com/questions/34587067/change-color-of-react-big-calendar-events)