カレンダーヘッダー

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

ヘッダーを非表示にする

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

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

カスタムヘッダー

Breaking change from v3.4.1

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

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

React

DayFlowCalendar に calendarHeader レンダープロップを渡します：

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

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

Vue

名前付きスロット calendarHeader を使用します：

<DayFlowCalendar :calendar="calendar">
  <template #calendarHeader="{ calendar, switcherMode, onSearchChange }">
    <div class="custom-header">
      <button @click="calendar.goToPrevious()">‹</button>
      <button @click="calendar.goToToday()">今日</button>
      <button @click="calendar.goToNext()">›</button>
    </div>
  </template>
</DayFlowCalendar>

スロット引数

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

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

サイドバープラグイン

Previous Page

コンテンツスロット

Next Page