イベントダイアログ

DayFlow には、イベントの作成・編集・削除をまとめて行えるダイアログが標準で組み込まれています。モーダルはポータル経由で描画されるため、他の UI と干渉せずに使えます。

使い方

DayFlow のデフォルト動作では、イベントをクリックすると組み込みのフローティング詳細パネルが開きます。組み込みモーダルダイアログを使いたい場合は、useCalendarApp で useEventDetailDialog を有効にしてから DayFlowCalendar を描画します。

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

const calendar = useCalendarApp({
  views: [...],
  useEventDetailDialog: true,
});

<DayFlowCalendar calendar={calendar} />;

カスタマイズ

ダイアログ UI を置き換える

eventDetailDialog スロットを使用すると、DayFlow の開閉状態管理はそのままに、独自のダイアログコンポーネントに差し替えられます。この機能を使用するには、useCalendarApp の設定で useEventDetailDialog: true を設定する必要があります。

// 1. カレンダー設定でダイアログモードを有効にする
const calendar = useCalendarApp({
  views: [...],
  useEventDetailDialog: true,
});

// 2. スロット経由で独自のダイアログを提供する
<DayFlowCalendar
  calendar={calendar}
  eventDetailDialog={({ event, isOpen, onClose }) => (
    <MyDialog isOpen={isOpen} onClose={onClose}>
      <EventForm event={event} />
    </MyDialog>
  )}
/>

組み込みパネルを無効にする

アプリケーション側でコールバックやグローバルな状態からイベント詳細を管理している場合は、useCalendarApp の設定で useEventDetailPanel: false を設定することで、組み込みのフローティングパネルを完全に非表示にできます。

const calendar = useCalendarApp({
  // ...
  useEventDetailPanel: false,
});

<DayFlowCalendar calendar={calendar} />;

React、Vue、Svelte、Angular の各アダプターで利用できます。