[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;
    }
}