イベントダイアログ

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

組み込みの繰り返し設定

イベントを編集できる場合、デフォルトのフローティング詳細パネルとモーダルダイアログの両方に同じ繰り返し設定が表示されます。

• 繰り返し：繰り返さない、毎日、毎週、毎月、毎年、カスタムから選択できます。
• カスタム：専用ダイアログで頻度と間隔を指定でき、毎週の場合は複数の曜日も選択できます。
• 繰り返しの終了：なし、指定日、指定回数から選択できます。

設定内容はイベントの meta.recurring と meta.recurrenceRule に保存されます。月ビューは対応するルールを表示用のイベントへ展開し、時刻付きイベントをカレンダーの設定タイムゾーンにおける開始時刻順で並べます。現在、生成された繰り返しイベントの編集や削除はシリーズ全体に適用され、1 回分だけの編集には対応していません。

import { Temporal } from 'temporal-polyfill';

const weeklyReview = {
  id: 'review',
  title: 'デザインレビュー',
  start: Temporal.PlainDateTime.from('2026-08-26T09:30'),
  end: Temporal.PlainDateTime.from('2026-08-26T10:30'),
  meta: {
    recurring: true,
    recurrenceRule: 'FREQ=WEEKLY;INTERVAL=2;BYDAY=MO,WE;COUNT=10',
  },
};

使い方

DayFlow のデフォルト動作では、イベント詳細を開くと組み込みのフローティング詳細パネルが表示されます。デスクトップではデフォルトでダブルクリック（eventDetailTrigger: 'dbClick'）で開き、eventDetailTrigger: 'click' を設定するとシングルクリックで開きます。組み込みモーダルダイアログを使いたい場合は、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 の各アダプターで利用できます。