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

The default event dialog is automatically available when you use the DayFlowCalendar component. Simply click on any event to open the dialog, or use the calendar's API to create new events.

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

<DayFlowCalendar calendar={calendar} useEventDetailDialog={true} />;

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.