DayFlowCalendar Component

DayFlowCalendar is the high-level component that renders the currently selected view, handles layout, and wires optional UI like the sidebar or event detail dialog. Pair it with useCalendarApp and the view factory helpers to get a fully functioning calendar with minimal code.

Basic Usage


import {
  DayFlowCalendar,
  useCalendarApp,
  createWeekView,
  ViewType,
} from '@dayflow/react'; // or '@dayflow/vue', '@dayflow/svelte', '@dayflow/angular'
import { createSidebarPlugin } from '@dayflow/plugin-sidebar';
import '@dayflow/core/dist/styles.css';
 
export function CalendarDemo() {
  const calendar = useCalendarApp({
    views: [createWeekView()],
    defaultView: ViewType.WEEK,
    initialDate: new Date(),
    events: [],
    plugins: [createSidebarPlugin()],
  });
 
  return <DayFlowCalendar calendar={calendar} />;
}

The component receives the calendar object from useCalendarApp, reads the active view, and renders the corresponding view component. Any toolbar or custom UI can live beside DayFlowCalendar, but it already includes:

An optional calendar sidebar (added through createSidebarPlugin).
Event detail dialog support (driven by useEventDetailDialog or a custom renderer).
Automatic layout updates when calendars are toggled or views change.

Props

Prop	Type	Required	Description
`calendar`	`UseCalendarAppReturn`	Required	Result of `useCalendarApp`. Provides state, registered views, sidebar config, and calendar actions.
`className`	`string`	Optional	Additional class names appended to the root container (base class: `df-calendar-container`).
`style`	`React.CSSProperties`	Optional	Inline styles for the root container. Default height is `800px`, which can be overridden.
`customDetailPanelContent`	`EventDetailContentRenderer`	Optional	Replaces the default detail panel body when the built-in panel is used.
`customEventDetailDialog`	`EventDetailDialogRenderer`	Optional	Full override for the event detail dialog UI. Takes precedence over `useEventDetailDialog`.
`meta`	`Record<string, any>`	Optional	Arbitrary metadata forwarded to every view component (helpful for feature flags or layout hints).
`search`	`CalendarSearchProps`	Optional	Configuration for the built-in search functionality.

Search Configuration

The search prop allows you to customize the built-in search behavior. By default, it searches event titles and descriptions locally.


<DayFlowCalendar
  calendar={calendar}
  search={{
    debounceDelay: 500,
    emptyText: 'No events found',
    onSearch: async keyword => {
      // Custom async search (e.g., from an API)
      return fetch(`/api/search?q=${keyword}`).then(res => res.json());
    },
  }}
/>

Search Props

Option	Description
`debounceDelay`	Time in milliseconds to wait before triggering a search.
`onSearch`	Async function to fetch results based on a keyword.
`customSearch`	Synchronous function to filter events locally with custom logic.
`emptyText`	Text to display when no results are found.

Customizing Container Styles

The root container has a default height of 800px to ensure proper functioning of virtual scrolling in month view. You can customize this using the style prop:


// Custom height
<DayFlowCalendar
  calendar={calendar}
  style={{ height: 600 }}
/>
 
// Full viewport height
<DayFlowCalendar
  calendar={calendar}
  style={{ height: '100vh' }}
/>
 
// Additional styles
<DayFlowCalendar
  calendar={calendar}
  style={{ height: 1000, backgroundColor: '#f5f5f5' }}
/>

You can also add custom CSS classes via className, which will be appended to the base df-calendar-container class:


<DayFlowCalendar calendar={calendar} className='my-custom-calendar shadow-lg' />

Sidebar Behavior

The sidebar is added by installing the @dayflow/plugin-sidebar plugin:


import { createSidebarPlugin } from '@dayflow/plugin-sidebar';
 
const calendar = useCalendarApp({
  views: [createWeekView()],
  plugins: [
    createSidebarPlugin({
      width: 280,
      initialCollapsed: false,
      createCalendarMode: 'modal', // 'inline' or 'modal'
    }),
  ],
});
 
return <DayFlowCalendar calendar={calendar} />;

When createSidebarPlugin() is added to plugins, the default sidebar (DefaultCalendarSidebar) is rendered with calendar filters and toggle-all controls.
You can customize width, default collapsed state, creation mode (createCalendarMode), or supply your own renderer via render. Your renderer receives CalendarSidebarRenderProps, so you can reuse its helper callbacks and data.

Event Detail Experiences

DayFlow ships with two options for event details:

Default panel mode – when useEventDetailDialog is false, each view may render DefaultEventDetailPanel. Pass customDetailPanelContent to replace the panel body while keeping the default chrome.
Dialog mode – set useEventDetailDialog: true in useCalendarApp to enable the built-in modal (DefaultEventDetailDialog). You can fully replace it by passing customEventDetailDialog. The hook will still manage open/close state and scroll locking; you just render the dialog.


<DayFlowCalendar
  calendar={calendar}
  customEventDetailDialog={({ event, close }) => (
    <MyDialog isOpen={!!event} onClose={close}>
      <EventForm event={event} onSubmit={handleSave} />
    </MyDialog>
  )}
/>

Passing Metadata to Views

Some teams need to share contextual data with every registered view (e.g., feature flags, analytics handlers, or layout hints). Use the meta prop and read it inside your custom view components:


<DayFlowCalendar calendar={calendar} meta={{ featureFlags: ['split-pane'] }} />

Inside a view component, the metadata is available through props.meta and can be forwarded to child components as needed.

In short, DayFlowCalendar handles the orchestration layer—layout, sidebar wiring, and event detail plumbing—so you can focus on configuring useCalendarApp and building the surrounding product experience.