カレンダーヘッダー

カレンダーヘッダーは、ナビゲーションコントロール、表示切り替え、検索機能を提供します。その動作をカスタマイズしたり、完全に置き換えたりすることができます。

ヘッダーを非表示にする

独自のナビゲーションを構築したい場合や、デフォルトのヘッダーが不要な場合は、無効にすることができます。

const calendar = useCalendarApp({
  views: [createMonthView()],
  useCalendarHeader: false, // デフォルトのヘッダーを非表示にする
});

カスタムヘッダー

Breaking change from v3.4.1

useCalendarHeader への関数の渡しは非対応になりました。以下のように、カスタムヘッダーを DayFlowCalendar の calendarHeader スロットに移行してください。

calendarHeader コンテンツスロットを使用して、デフォルトのヘッダーを独自のコンポーネントに置き換えることができます。レンダラーはカレンダーの状態とヘルパーメソッドを受け取るため、独自の UI からナビゲーションや検索を制御できます。

import { useCalendarApp, DayFlowCalendar, createMonthView } from '@dayflow/react';

function MyCalendar() {
  const calendar = useCalendarApp({
    views: [createMonthView()],
  });

  return (
    <DayFlowCalendar
      calendar={calendar}
      calendarHeader={() => (
        <div className='custom-header'>
          <button onClick={() => calendar.goToPrevious()}>‹</button>
          <button onClick={() => calendar.goToToday()}>今日</button>
          <button onClick={() => calendar.goToNext()}>›</button>
        </div>
      )}
    />
  );
}

スロット引数

スロットレンダラーは以下の引数を受け取ります：

引数	説明
`calendar`	`CalendarApp` インスタンス。
`switcherMode`	現在の表示切り替えモード（`buttons` または `select`）。
`onAddCalendar`	新しいカレンダーを追加するためのハンドラー。
`onSearchChange`	検索クエリを更新するためのハンドラー。
`onSearchClick`	検索アイコンがクリックされた時のハンドラー。
`searchValue`	現在の検索文字列。
`isSearchOpen`	検索 UI が現在開いているかどうか。
`isEditable`	カレンダーが現在編集可能な状態かどうか。
`safeAreaLeft`	macOS モードでトラフィックライトボタンと重ならないための左余白（px）。