FullCalendarのレスポンシブヘッダーの実装方法

1. デフォルトのヘッダーの代替手段: FullCalendarのデフォルトのヘッダーは非常に使いやすいですが、レスポンシブデザインには適していません。代わりに、独自のカスタムヘッダーを作成することができます。以下は、独自のカスタムヘッダーを実装するための基本的な手順です。

var calendar = new FullCalendar.Calendar(calendarEl, {
  headerToolbar: {
    left: 'prev,next today',
    center: 'title',
    right: 'dayGridMonth,timeGridWeek,timeGridDay'
  },
  // ここでデフォルトのヘッダーを非表示にする
  // header: false,
});

2. メディアクエリを使用したヘッダーの表示/非表示の制御: FullCalendarのレスポンシブヘッダーを実現するもう一つの方法は、CSSのメディアクエリを使用してヘッダーの表示/非表示を制御することです。以下の例では、画面幅が600px未満の場合にヘッダーを非表示にし、それ以外の場合は表示する方法を示しています。

@media (max-width: 600px) {
  .fc-header-toolbar {
    display: none;
  }
}

3. ボタンのカスタマイズ: FullCalendarのボタンをカスタマイズすることもできます。以下の例では、ボタンのテキストを日本語に設定し、アイコンを追加しています。

var calendar = new FullCalendar.Calendar(calendarEl, {
  headerToolbar: {
    left: 'prev,next today',
    center: 'title',
    right: 'dayGridMonth,timeGridWeek,timeGridDay'
  },
  buttonText: {
    prev: '前へ',
    next: '次へ',
    today: '今日'
  },
  // ここでアイコンを追加する
  customButtons: {
    myButton: {
      text: 'カスタムボタン',
      click: function() {
        // ボタンがクリックされたときの処理を記述する
      }
    }
  },
  // ヘッダーにカスタムボタンを追加する
  // headerToolbar: {
  //   left: 'prev,next today myButton',
  //   center: 'title',
  //   right: 'dayGridMonth,timeGridWeek,timeGridDay'
  // },
});

FullCalendarのレスポンシブヘッダーを実装するためのさまざまな方法を紹介しました。これらの方法を組み合わせて、自分の要件に合わせたヘッダーを作成してください。