1. 概要
前回の続き。
FullCalendarで作ったカレンダーをみんな大好きNotion風の見た目に変更していきます。
2. 環境
CodeSandbox（React, TypeScriptテンプレート使用）
React v18.0.0
FullCalendar v5.11.3
3. 実装
3-1. headerToolbarに設置したボタン配置を変更する
export const Calendar = (): JSX.Element => {
// ・・・ 省略
return (
<FullCalendar
// ・・・ 省略
headerToolbar={{ left: 'title', center: '', right: 'prev today next' }}
/>
)
}headerToolbarというプロパティを使用してボタン配置を変更していきます。
left、center、rightに設定可能なオブジェクトの名前を渡してあげることで配置を変更できます。
また、falseを指定するとheaderToolbarが非表示となります。
設定可能なオブジェクトの名前については以下を参照してください。
3-2. headerToolbarのレイアウト修正
npm i @emotion/styled @emotion/reactimport styled from '@emotion/styled'
// ・・・ 省略
const StyleWrapper = styled.div`
.fc .fc-toolbar.fc-header-toolbar {
margin-bottom: 0;
}
.fc .fc-toolbar-title {
font-size: 1rem;
color: #37362f;
}
.fc .fc-button-primary {
font-size: 0.75rem;
background-color: #ffffff00;
color: #acaba9;
border: none;
outline: none;
}
.fc .fc-today-button {
background-color: #ffffff00;
color: #37362f;
border: none;
outline: none;
}
.fc .fc-button-primary:not(:disabled):active,
.fc .fc-button-primary:not(:disabled).fc-button-active {
background-color: #ffffff00;
color: #acaba9;
box-shadow: none;
}
.fc .fc-button-primary:not(:disabled):focus,
.fc .fc-button-primary:not(:disabled).fc-button-focus {
background-color: #ffffff00;
color: #acaba9;
box-shadow: none;
}
.fc .fc-today-button:disabled {
opacity: 1;
}
`
export const Calendar = (): JSX.Element => {
// ・・・ 省略
return (
<StyleWrapper>
<FullCalendar
// ・・・ 省略
/>
</StyleWrapper>
)
}デザインを細かく変更するためのプロパティは用意されていないため、上記のようにCSSプロパティを上書きする必要があります。
CSSの記述については以下を参考にさせていただきました。
is it possible Customise FullCalendar with css in react?
4. まとめ
ヘッダー部分だけですがかなりNotionのカレンダーに近づいたのではないでしょうか！
次回はカレンダーの日付や各セルをカスタマイズしていきます。
参考になれば幸いです。
5. 参考情報
is it possible Customise FullCalendar with css in react?
投稿者プロフィール
