事件对话框

DayFlow 自带的事件对话框涵盖了大多数团队需要的 CRUD 流程：创建/编辑/删除、全天与定时切换、日历颜色选择、备注输入等，都在同一个模态中完成。

使用方法

当您使用 DayFlowCalendar 组件时，默认事件对话框会自动可用。只需点击任何事件即可打开对话框，或使用日历的 API 创建新事件。

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 适配器。