useSchedulerApp / SchedulerApp

useSchedulerApp (or SchedulerApp in Angular/Vanilla JS) is the state engine of Dayflow Scheduler. It manages resources, event collections, active view modes, date navigation, plugin lifecycles, and event callbacks.

The instance returned by useSchedulerApp is passed directly to the <DayflowScheduler app={app} /> component.

Basic Framework Usage

import {
  useSchedulerApp,
  DayflowScheduler,
  createWeekView,
  createMonthView,
} from '@dayflow-scheduler/react';
import { Temporal } from 'temporal-polyfill';

export function SchedulerAppDemo() {
  const app = useSchedulerApp({
    resources: [
      { id: 'res-1', name: 'Frontend Team', color: '#0ea5e9' },
      { id: 'res-2', name: 'Backend Team', color: '#8b5cf6' },
    ],
    events: [
      {
        id: 'evt-1',
        title: 'Release Review',
        resourceId: 'res-1',
        start: Temporal.PlainDateTime.from('2026-09-15T09:00:00'),
        end: Temporal.PlainDateTime.from('2026-09-15T11:00:00'),
      },
    ],
    views: [createWeekView(), createMonthView()],
    defaultView: 'week',
    timeZone: 'America/New_York',
  });

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

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

<script setup lang="ts">
import {
  useSchedulerApp,
  DayflowScheduler,
  createWeekView,
  createMonthView,
} from '@dayflow-scheduler/vue';
import { Temporal } from 'temporal-polyfill';

const app = useSchedulerApp({
  resources: [
    { id: 'res-1', name: 'Frontend Team', color: '#0ea5e9' },
    { id: 'res-2', name: 'Backend Team', color: '#8b5cf6' },
  ],
  events: [
    {
      id: 'evt-1',
      title: 'Release Review',
      resourceId: 'res-1',
      start: Temporal.PlainDateTime.from('2026-09-15T09:00:00'),
      end: Temporal.PlainDateTime.from('2026-09-15T11:00:00'),
    },
  ],
  views: [createWeekView(), createMonthView()],
  defaultView: 'week',
  timeZone: 'America/New_York',
});
</script>

import { Component, OnDestroy } from '@angular/core';
import {
  SchedulerApp,
  DayflowSchedulerComponent,
  createWeekView,
  createMonthView,
} from '@dayflow-scheduler/angular';
import { Temporal } from 'temporal-polyfill';

@Component({
  selector: 'app-scheduler-demo',
  standalone: true,
  imports: [DayflowSchedulerComponent],
  template: `<dayflow-scheduler [app]="app" />`,
})
export class SchedulerDemoComponent implements OnDestroy {
  app = new SchedulerApp({
    resources: [
      { id: 'res-1', name: 'Frontend Team', color: '#0ea5e9' },
    ],
    events: [
      {
        id: 'evt-1',
        title: 'Release Review',
        resourceId: 'res-1',
        start: Temporal.PlainDateTime.from('2026-09-15T09:00:00'),
        end: Temporal.PlainDateTime.from('2026-09-15T11:00:00'),
      },
    ],
    views: [createWeekView(), createMonthView()],
    defaultView: 'week',
    timeZone: 'America/New_York',
  });

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

<script lang="ts">
  import { onDestroy } from 'svelte';
  import {
    createSchedulerApp,
    DayflowScheduler,
    createWeekView,
    createMonthView,
  } from '@dayflow-scheduler/svelte';
  import { Temporal } from 'temporal-polyfill';

  const app = createSchedulerApp({
    resources: [
      { id: 'res-1', name: 'Frontend Team', color: '#0ea5e9' },
    ],
    events: [
      {
        id: 'evt-1',
        title: 'Release Review',
        resourceId: 'res-1',
        start: Temporal.PlainDateTime.from('2026-09-15T09:00:00'),
        end: Temporal.PlainDateTime.from('2026-09-15T11:00:00'),
      },
    ],
    views: [createWeekView(), createMonthView()],
    defaultView: 'week',
    timeZone: 'America/New_York',
  });

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

<DayflowScheduler {app} />

Options Reference

Data & Core Options

Option	Type	Default	Description
`resources`	`SchedulerResource[]`	`[]`	Array of resource objects representing rows on the timeline.
`events`	`SchedulerEvent[]`	`[]`	Array of scheduled event objects.
`views`	`SchedulerViewDescriptor[]`	All 5 registered	Array of view descriptors created via `createDayView()`, `createWeekView()`, etc.
`defaultView`	`SchedulerTimelineMode`	`'week'`	The view mode loaded initially (`'day'`, `'week'`, `'month'`, `'quarter'`, `'year'`).
`initialDate`	`Temporal.PlainDate \| string`	Current date	Initial anchor date for the timeline navigator.
`timeZone`	`string`	Local timezone	Timezone identifier (e.g. `'UTC'`, `'America/New_York'`).
`plugins`	`SchedulerPlugin[]`	`[]`	Plugins for features like drag & drop, keyboard shortcuts, or localization.
`callbacks`	`SchedulerCallbacks`	`{}`	Interaction handlers (`onEventClick`, `onEventDrop`, `onVisibleRangeChange`, etc.).

Layout & Sizing Options

Option	Type	Default	Description
`height`	`number \| string`	`720`	Container height in pixels or CSS length string.
`rowHeight`	`number`	`60`	Height in pixels for resource rows.
`headerHeight`	`number`	`64`	Height in pixels for the timeline time axis header.
`resourcePanelWidth`	`number`	`280`	Initial width in pixels for the resource sidebar.
`resourcePanelMinWidth`	`number`	`220`	Minimum sidebar width during drag resizing.
`resourcePanelMaxWidth`	`number`	`420`	Maximum sidebar width during drag resizing.
`viewSwitcherMode`	`'buttons' \| 'select' \| 'filter'`	`'buttons'`	Render style for the header view switcher control.
`readOnly`	`boolean`	`false`	Global read-only toggle disabling event editing and drag operations.

Detail Panels & Modals

Option	Type	Default	Description
`useEventDetailDialog`	`boolean`	`false`	When `true`, clicking an event opens a modal dialog instead of a side panel.
`selectedEventId`	`string \| null`	`null`	Initial selected event ID.
`detailPanelEventId`	`string \| null`	`null`	Initial event ID with detail panel open.

Imperative Instance Methods

The SchedulerApp instance exposes methods for imperative state mutation and navigation:

Event Mutation API

// Add a single new event
app.addEvent(newEvent);

// Update an existing event by ID
app.updateEvent('evt-101', {
  title: 'Updated Title',
  backgroundColor: '#10b981',
});

// Remove an event by ID
app.removeEvent('evt-101');

// Replace all events atomically
app.setEvents(nextEventsArray);

Resource Mutation API

// Add a new resource row
app.addResource({ id: 'res-3', name: 'QA Team', color: '#f59e0b' });

// Update resource properties
app.updateResource('res-3', { name: 'Quality Assurance' });

// Remove a resource row
app.removeResource('res-3');

// Replace all resource rows
app.setResources(nextResourcesArray);

// Switch active timeline mode
app.setCurrentTimelineMode('month');

// Query active view mode
const currentMode = app.getCurrentTimelineMode(); // 'month'

// Step forward / backward
app.goToNext();
app.goToPrevious();

// Return to today
app.goToToday();

// Jump to a specific date
import { Temporal } from 'temporal-polyfill';
app.setCurrentDate(Temporal.PlainDate.from('2026-10-01'));

Lifecycle

// Clean up internal listeners and subscriptions (automatically called in framework adapters)
app.destroy();

DayflowScheduler: Main component props and layout slot rendering.
Views: Configuring day, week, month, quarter, and year timeline views.
Events: Event specifications, Temporal dates, and interaction callbacks.
Plugins Overview: Extending app functionality with plugins.