DayflowScheduler Component

DayflowScheduler is the primary top-level component that renders the timeline interface. It reads state from the SchedulerApp instance, renders virtualized resource rows and event pills, synchronizes scroll offsets, and manages detail panels and context menus.

The component is stateless; all operational state and event data are driven by the app instance passed into it (see useSchedulerApp).

Basic Usage

import {
  DayflowScheduler,
  useSchedulerApp,
  createWeekView,
} from '@dayflow-scheduler/react';
import '@dayflow-scheduler/core/dist/styles.css';

export function SchedulerDemo() {
  const app = useSchedulerApp({
    resources: [{ id: 'design-team', name: 'Design Studio', color: '#0ea5e9' }],
    events: [],
    views: [createWeekView()],
    defaultView: 'week',
  });

  return <DayflowScheduler app={app} />;
}

<template>
  <DayflowScheduler :app="app" />
</template>

<script setup lang="ts">
import {
  DayflowScheduler,
  useSchedulerApp,
  createWeekView,
} from '@dayflow-scheduler/vue';
import '@dayflow-scheduler/core/dist/styles.css';

const app = useSchedulerApp({
  resources: [{ id: 'design-team', name: 'Design Studio', color: '#0ea5e9' }],
  events: [],
  views: [createWeekView()],
  defaultView: 'week',
});
</script>

import { Component, OnDestroy } from '@angular/core';
import {
  DayflowSchedulerComponent,
  SchedulerApp,
  createWeekView,
} from '@dayflow-scheduler/angular';
import '@dayflow-scheduler/core/dist/styles.css';

@Component({
  selector: 'app-scheduler-root',
  standalone: true,
  imports: [DayflowSchedulerComponent],
  template: `<dayflow-scheduler [app]="app" />`,
})
export class AppComponent implements OnDestroy {
  app = new SchedulerApp({
    resources: [{ id: 'design-team', name: 'Design Studio', color: '#0ea5e9' }],
    events: [],
    views: [createWeekView()],
    defaultView: 'week',
  });

  ngOnDestroy() {
    this.app.destroy();
  }
}

<script lang="ts">
  import { onDestroy } from 'svelte';
  import {
    DayflowScheduler,
    createSchedulerApp,
    createWeekView,
  } from '@dayflow-scheduler/svelte';
  import '@dayflow-scheduler/core/dist/styles.css';

  const app = createSchedulerApp({
    resources: [{ id: 'design-team', name: 'Design Studio', color: '#0ea5e9' }],
    events: [],
    views: [createWeekView()],
    defaultView: 'week',
  });

  onDestroy(() => app.destroy());
</script>

<DayflowScheduler {app} />

Component Props Reference

Prop	Type	Required	Description
`app`	`SchedulerApp`	Required	The scheduler application instance managing state, views, resources, and events.
`config`	`Partial<SchedulerViewConfig>`	Optional	Per-render layout overrides (`height`, `rowHeight`, `resourcePanelWidth`, etc.).
`sidebar`	`SchedulerSidebarProps`	Optional	Callbacks and renderers for the resource sidebar.
`slots`	`SchedulerSlots`	Optional	Framework component templates replacing built-in toolbar or context menu regions.
`customDetailPanelContent`	`SchedulerDetailPanelRenderer`	Optional	Replaces the body of the floating event detail side panel.
`customEventDetailDialog`	`SchedulerDetailDialogRenderer`	Optional	Replaces the modal event detail dialog.
`selectedEventId`	`string \| null`	Optional	Controlled event selection ID from outside the app instance.
`detailPanelEventId`	`string \| null`	Optional	Controlled ID of the event whose detail panel is currently open.
`focusRequest`	`FocusRequest \| null`	Optional	Object instructing the scheduler to scroll to and highlight a target event.
`license`	`PackageLicenseConfig`	Optional	Runtime license configuration. Omit when registered globally via `registerDayflowProLicense()`.

Config vs Prop Priority

Layout settings like height and rowHeight can be defined in both useSchedulerApp(config) and the <DayflowScheduler config={...} /> prop. The prop value takes precedence over app-level config.

Layout, Virtualization & Sizing

Dayflow Scheduler virtualizes resource rows and timeline cells for smooth rendering performance with thousands of events. Therefore, it requires a defined container height:

<DayflowScheduler
  app={app}
  config={{
    height: 'calc(100vh - 80px)',
    rowHeight: 64,
    headerHeight: 56,
    resourcePanelWidth: 280,
  }}
/>

Layout Option	Type	Default	Description
`height`	`number \| string`	`720`	Total container height. Numbers are treated as pixels (`px`).
`rowHeight`	`number`	`60`	Height in pixels for each resource row.
`headerHeight`	`number`	`64`	Height in pixels for the timeline header time axis.
`resourcePanelWidth`	`number`	`280`	Initial width in pixels for the resource sidebar column.
`resourcePanelMinWidth`	`number`	`220`	Minimum allowed sidebar width during user drag resizing.
`resourcePanelMaxWidth`	`number`	`420`	Maximum allowed sidebar width during user drag resizing.

Each framework adapter attaches a distinctive root CSS class (df-scheduler-react, df-scheduler-vue, df-scheduler-angular, or df-scheduler-svelte). Use this class to scope theme overrides, as detailed in Theme Customization.

The sidebar prop configures header labels, resource actions, and custom row renderers:

<DayflowScheduler
  app={app}
  sidebar={{
    headerLabel: 'Engineering Teams',
    onResourceColorChange: (id, color) => updateResourceColor(id, color),
    onResourceDelete: id => confirmDeleteResource(id),
    onResourceMerge: (sourceId, targetId) => mergeResources(sourceId, targetId),
  }}
/>

Property	Type	Description
`headerLabel`	`string`	Text label displayed at the top of the resource column header.
`onResourceDelete`	`(resourceId: string) => void`	Callback triggered when a resource is deleted via the row menu.
`onResourceMerge`	`(sourceId: string, targetId: string) => void`	Callback triggered when a resource row is merged into another.
`onResourceColorChange`	`(resourceId: string, color: string) => void`	Callback triggered when a resource color picker selection changes.
`renderResourceRow`	`(params: ResourceRowRenderParams) => JSX.Element`	Custom render function for resource row content.
`renderResourceContextMenu`	`(resource, onClose) => JSX.Element \| null`	Custom render function replacing the default right-click menu.

Content Slots Integration

Slots allow you to inject custom framework components into built-in layout regions:

<DayflowScheduler
  app={app}
  slots={{
    resourceToolbar: ({ currentDate, onNavigate }) => (
      <CustomToolbar date={currentDate} onNavigate={onNavigate} />
    ),
  }}
/>

<DayflowScheduler :app="app">
  <template #resourceToolbar="{ currentDate, onNavigate }">
    <CustomToolbar :date="currentDate" @navigate="onNavigate" />
  </template>
</DayflowScheduler>

<dayflow-scheduler [app]="app">
  <ng-template dfSlot="resourceToolbar"
               let-currentDate="currentDate"
               let-onNavigate="onNavigate">
    <custom-toolbar [date]="currentDate" (navigate)="onNavigate($event)" />
  </ng-template>
</dayflow-scheduler>

<script lang="ts">
  import type { SchedulerSlots } from '@dayflow-scheduler/svelte';

  const slots: SchedulerSlots = { resourceToolbar: resourceToolbarSnippet };
</script>

<DayflowScheduler {app} {slots} />

{#snippet resourceToolbarSnippet({ currentDate, onNavigate })}
  <CustomToolbar date={currentDate} {onNavigate} />
{/snippet}

For full argument types and slot options, see Content Slots.

Programmatic Event Focus (`focusRequest`)

Scroll the timeline to automatically center and highlight a specific event:

function SearchResultFocus({ selectedId }: { selectedId: string }) {
  return (
    <DayflowScheduler
      app={app}
      focusRequest={{
        requestId: Date.now(), // Unique ID re-triggers focus
        eventId: selectedId,
        mode: 'week', // Optional view switch before focusing
      }}
    />
  );
}

useSchedulerApp: Detailed configuration object and method APIs.
Views: Day, week, month, quarter, and year timeline modes.
Events: Event models, Temporal API dates, and CRUD operations.
Content Slots: Deep dive into slot renderers.