[FullCalendar + React] eventBackgroundColor, eventBorderColorを指定しても反映されない時の解決方法

FullCalendar + Reactで、eventBackgroundColor, eventBorderColorを指定しても反映されない時の解決方法について説明します。

解決方法

FullCalendarコンポーネントの引数に、eventDisplay="block" を付け足してください。

<FullCalendar
    // ...
    eventBackgroundColor={"#fffccf"}
    eventBorderColor={"#fffccf"}
    eventTextColor={"#37362f"}
    eventDisplay="block"
/>

ただ、FullCalendarコンポーネントの引数からfocusなどの設定ができない（多分）ので、結局CSSで書くことになると思います。

SCSS

.fc-event {
    background-color: #fffccf;

    &:focus {
        background-color: #fffccf !important;
    }
}