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

ホーム
BLOG
【React】, 【TypeScript】
【React】FullCalendarのヘッダーツールバ…

【TypeScript】
2022.12.03

【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?