Event Dialog

DayFlow comes with a powerful built-in event dialog that provides a complete event management experience out of the box. The dialog supports creating, editing, and deleting events with an intuitive interface.

Usage

DayFlow renders the built-in floating detail panel by default. To use the built-in modal dialog instead, enable useEventDetailDialog in useCalendarApp, then render DayFlowCalendar as usual.

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

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

<DayFlowCalendar calendar={calendar} />;

Customization

Replace the dialog UI

Use the eventDetailDialog slot to swap in your own dialog component while keeping DayFlow's open/close state management. This requires useEventDetailDialog: true in your useCalendarApp config.

// 1. Enable dialog mode in the calendar config
const calendar = useCalendarApp({
  views: [...],
  useEventDetailDialog: true,
});

// 2. Provide your own dialog via the slot
<DayFlowCalendar
  calendar={calendar}
  eventDetailDialog={({ event, isOpen, onClose }) => (
    <MyDialog isOpen={isOpen} onClose={onClose}>
      <EventForm event={event} />
    </MyDialog>
  )}
/>

Opt out of the built-in panel

If your application manages event detail in its own modals (driven by callbacks or global state), you can suppress the built-in floating panel entirely by setting useEventDetailPanel: false in your useCalendarApp configuration:

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

<DayFlowCalendar calendar={calendar} />;

This works across React, Vue, Svelte, and Angular adapters.