react-big-calendarでカレンダーが表示されない時の対処法

カレンダーの便利なReactコンポーネントがあります。

https://github.com/intljusticemission/react-big-calendar

これをこのまま読み込んでもカレンダーが表示されないんです。

 

実はこのカレンダーheightが100%なので明示的に高さを設定する必要がありました。

ここに書いてあって。

https://github.com/intljusticemission/react-big-calendar/issues/748

 

実はちゃんとドキュメントにも書いてました、、、

note: The default styles use height: 100% which means your container must set an explicit height (feel free to adjust the styles to suit your specific needs).

 

設定してあげるとこのようにちゃんと表示されます。