イベントダイアログ

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

使い方

DayFlowCalendar を描画すれば、イベントクリック時にダイアログが自動で開きます。新規作成は空きスロットのダブルクリックやドラッグ（ドラッグプラグイン有効時）から呼び出せます。

import { DayFlowCalendar } from '@dayflow/core';

<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 の各アダプターで利用できます。