【React】FullCalendarのヘッダーツールバーを整えるためのTips

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が非表示となります。

設定可能なオブジェクトの名前については以下を参照してください。

headerToolbar

3-2. headerToolbarのレイアウト修正

npm i @emotion/styled @emotion/react
import 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 Customization

CSSの記述については以下を参考にさせていただきました。

is it possible Customise FullCalendar with css in react?

4. まとめ

ヘッダー部分だけですがかなりNotionのカレンダーに近づいたのではないでしょうか!
次回はカレンダーの日付や各セルをカスタマイズしていきます。

参考になれば幸いです。

5. 参考情報

headerToolbar

CSS Customization

is it possible Customise FullCalendar with css in react?

関連記事

  1. TypeScript

    【TypeScript】TypeScriptで変数の型を宣言する

  2. 【React】FullCalendarのカレンダーにイベントを表示する…

  3. TypeScript

    【TypeScript】触ってみる

  4. 【React】FullCalendarを使用してカレンダーを表示するた…

  5. Firebase

    【Firebase】Firestore Security Rulesを…

  6. 【React×TypeScript】環境構築メモ

最近の記事

  1. AWS
  2. AWS
  3. AWS
  4. AWS
  5. AWS
  6. AWS
  7. AWS
  8. AWS

制作実績一覧

  1. Checkeys