DayFlowCalendar

DayFlowCalendar は現在のビューを描画し、サイドバーやイベント詳細ダイアログなどの UI をひとまとめに扱うコンポーネントです。useCalendarApp から返される calendar オブジェクトを渡すだけで、選択中のビューが自動的に切り替わります。

基本的な使い方

import {
  DayFlowCalendar,
  useCalendarApp,
  createWeekView,
  ViewType,
} from '@dayflow/react'; // or '@dayflow/vue', '@dayflow/svelte', '@dayflow/angular'
import { createSidebarPlugin } from '@dayflow/plugin-sidebar';
import '@dayflow/core/dist/styles.css';

export function CalendarDemo() {
  const calendar = useCalendarApp({
    views: [createWeekView()],
    defaultView: ViewType.WEEK,
    initialDate: new Date(),
    events: [],
    plugins: [createSidebarPlugin()],
  });

  return <DayFlowCalendar calendar={calendar} />;
}

このコンポーネントが担うのは以下のような処理です。

サイドバーの表示・折りたたみ（createSidebarPlugin を追加した場合）
イベント詳細パネル/ダイアログの切り替え
ビュー変更やカレンダーの可視状態に合わせたレイアウト更新

Props

Prop	型	必須	説明
`calendar`	`UseCalendarAppReturn`	必須	`useCalendarApp` の戻り値。状態やビュー、アクションを内包。
`collapsedSafeAreaLeft`	`number`	任意	サイドバー折りたたみ時の左パディング（px）。Mac のトラフィックライト領域の考慮に使用。
`search`	`CalendarSearchProps`	任意	組み込み検索機能の設定。

検索設定

search プロップを使用すると、組み込みの検索動作をカスタマイズできます。デフォルトでは、イベントのタイトルと説明をローカルで検索します。

<DayFlowCalendar
  calendar={calendar}
  search={{
    debounceDelay: 500,
    emptyText: 'イベントが見つかりませんでした',
    onSearch: async keyword => {
      // カスタム非同期検索（例：APIから取得）
      return fetch(`/api/search?q=${keyword}`).then(res => res.json());
    },
  }}
/>

検索の設定 (Search Props)

オプション	説明
`debounceDelay`	検索を実行するまでのデバウンス時間 (ミリ秒)。
`onSearch`	キーワードに基づいて結果を取得する非同期関数。
`customSearch`	カスタムロジックを使用してローカルでイベントをフィルタリングする同期関数。
`onResultClick`	検索結果をクリックした際の設定可能なコールバック。組み込みの遷移ロジック（イベントの日付への移動、イベントのハイライト、モバイル版での検索UIのクローズ）を実行するための `defaultAction` コールバックが含まれます。`defaultAction()` を呼び出さない場合は、遷移やUIの状態管理を独自に実装する必要があります。
`emptyText`	結果が見つからない場合に表示されるテキスト。

サイドバー連携

サイドバーを表示するには、@dayflow/plugin-sidebar プラグインをインストールして plugins に追加します。

import { createSidebarPlugin } from '@dayflow/plugin-sidebar';

const calendar = useCalendarApp({
  views: [createWeekView()],
  plugins: [
    createSidebarPlugin({
      width: 280,
      initialCollapsed: false,
      createCalendarMode: 'modal', // 'inline' または 'modal'
    }),
  ],
});

return <DayFlowCalendar calendar={calendar} />;

createSidebarPlugin() を追加すると、デフォルトのサイドバーが描画されます。
幅や折りたたみ状態のほか、render または renderSidebarHeader による UI のカスタマイズも可能です。renderSidebarHeader を使用すると、サイドバー全体のレイアウトを維持したままヘッダー部分（タイトルや折りたたみボタン）のみを置き換えることができます。

イベント詳細 UI

DayFlow には 3 つのイベント詳細表示オプションがあります。

デフォルトパネルモード — useEventDetailDialog が false（デフォルト）の場合、イベントをクリックすると組み込みのフローティングパネル DefaultEventDetailPanel が開きます。eventDetailContent スロットを使用すると、パネルの外枠を維持しながら中身だけを置き換えられます。
ダイアログモード — useCalendarApp で useEventDetailDialog: true を設定すると組み込みのモーダルが有効になります。eventDetailDialog スロットで独自のダイアログ UI に置き換えられます。
完全に無効化 — アプリ側のコールバックで独自のモーダルを管理している場合は、useCalendarApp で useEventDetailPanel: false を設定するとフローティングパネルを完全に非表示にできます。

// 組み込みパネルを非表示にする — 別の場所でモーダルを管理
const calendar = useCalendarApp({
  ...
  useEventDetailPanel: false,
});

return <DayFlowCalendar calendar={calendar} />;

// カスタムパネルコンテンツ（デフォルトのパネル外枠を維持）
<DayFlowCalendar
  calendar={calendar}
  eventDetailContent={({ event, onClose }) => (
    <div className='p-4'>
      <h2>{event.title}</h2>
      <button onClick={onClose}>閉じる</button>
    </div>
  )}
/>

// カスタムダイアログ（useCalendarApp で useEventDetailDialog: true が必要）
<DayFlowCalendar
  calendar={calendar}
  eventDetailDialog={({ event, isOpen, onClose }) => (
    <MyDialog isOpen={isOpen} onClose={onClose}>
      <EventForm event={event} />
    </MyDialog>
  )}
/>

つまり DayFlowCalendar は「レイアウトと補助 UI の制御」を一手に引き受け、開発者は useCalendarApp の設定や周辺 UI に集中できるようになっています。