Scheduler Views

A view defines the timeline mode and time axis structure for Dayflow Scheduler: how wide each cell is, what step interval is used, and how far the timeline spans. Because resource rows remain persistent across views, switching views seamlessly scales the schedule rather than re-rendering a completely different UI.

Available Views Summary

Dayflow Scheduler supports five built-in timeline views:

View	View Type ID	Factory	Time Step	Primary Cell Width Config	Default Width	Best For
Day	`'day'`	`createDayView()`	Hour	`hourWidth`	`72px`	Dispatch, intra-day appointment scheduling, hourly shifts
Week	`'week'`	`createWeekView()`	Day	`weekDayWidth`	`96px`	Team planning, weekly resource allocation
Month	`'month'`	`createMonthView()`	Day	`monthDayWidth`	`56px`	Monthly project coordination & workload balancing
Quarter	`'quarter'`	`createQuarterView()`	Month	`quarterMonthWidth`	`96px`	Quarter roadmaps & release milestone tracking
Year	`'year'`	`createYearView()`	Year	`yearCellWidth`	`88px`	Long-range portfolio & multi-year project overview

Detailed View Specifications

1. Day View (`createDayView`)

The Day view displays a high-resolution hourly time grid for a single date, ideal for intra-day scheduling, appointments, and dispatch.

Configuration Options

Property	Type	Default	Description
`hourWidth`	`number`	`72`	Width in pixels for each 1-hour column on the timeline.
`showCurrentTimeLine`	`boolean`	`true`	Whether to render the dynamic indicator line for the current time.
`rowHeight`	`number`	`60`	Height in pixels for each resource row in Day view.

Usage Example

import {
  useSchedulerApp,
  DayflowScheduler,
  createDayView,
} from '@dayflow-scheduler/react';

function DayScheduler() {
  const app = useSchedulerApp({
    resources: [{ id: 'room-1', name: 'Studio A', color: '#0ea5e9' }],
    events: [],
    views: [createDayView({ hourWidth: 96, showCurrentTimeLine: true })],
    defaultView: 'day',
  });

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

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

<script setup lang="ts">
import {
  useSchedulerApp,
  DayflowScheduler,
  createDayView,
} from '@dayflow-scheduler/vue';

const app = useSchedulerApp({
  resources: [{ id: 'room-1', name: 'Studio A', color: '#0ea5e9' }],
  events: [],
  views: [createDayView({ hourWidth: 96, showCurrentTimeLine: true })],
  defaultView: 'day',
});
</script>

import { Component, OnDestroy } from '@angular/core';
import {
  SchedulerApp,
  DayflowSchedulerComponent,
  createDayView,
} from '@dayflow-scheduler/angular';

@Component({
  selector: 'app-day-scheduler',
  standalone: true,
  imports: [DayflowSchedulerComponent],
  template: `<dayflow-scheduler [app]="app" />`,
})
export class DaySchedulerComponent implements OnDestroy {
  app = new SchedulerApp({
    resources: [{ id: 'room-1', name: 'Studio A', color: '#0ea5e9' }],
    events: [],
    views: [createDayView({ hourWidth: 96, showCurrentTimeLine: true })],
    defaultView: 'day',
  });

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

<script lang="ts">
  import { onDestroy } from 'svelte';
  import {
    createSchedulerApp,
    DayflowScheduler,
    createDayView,
  } from '@dayflow-scheduler/svelte';

  const app = createSchedulerApp({
    resources: [{ id: 'room-1', name: 'Studio A', color: '#0ea5e9' }],
    events: [],
    views: [createDayView({ hourWidth: 96, showCurrentTimeLine: true })],
    defaultView: 'day',
  });

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

<DayflowScheduler {app} />

2. Week View (`createWeekView`)

The Week view displays 7 daily columns, providing an operational overview for team assignments and weekly task planning.

Configuration Options

Property	Type	Default	Description
`weekDayWidth`	`number`	`96`	Width in pixels for each day column in Week view.
`dayWidth`	`number`	`96`	Shared fallback column width if `weekDayWidth` is omitted.
`rowHeight`	`number`	`60`	Height in pixels for each resource row.

Usage Example

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

function WeekScheduler() {
  const app = useSchedulerApp({
    resources: [{ id: 'dev-1', name: 'Alice Smith', color: '#10b981' }],
    events: [],
    views: [createWeekView({ weekDayWidth: 120 })],
    defaultView: 'week',
  });

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

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

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

const app = useSchedulerApp({
  resources: [{ id: 'dev-1', name: 'Alice Smith', color: '#10b981' }],
  events: [],
  views: [createWeekView({ weekDayWidth: 120 })],
  defaultView: 'week',
});
</script>

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

@Component({
  selector: 'app-week-scheduler',
  standalone: true,
  imports: [DayflowSchedulerComponent],
  template: `<dayflow-scheduler [app]="app" />`,
})
export class WeekSchedulerComponent implements OnDestroy {
  app = new SchedulerApp({
    resources: [{ id: 'dev-1', name: 'Alice Smith', color: '#10b981' }],
    events: [],
    views: [createWeekView({ weekDayWidth: 120 })],
    defaultView: 'week',
  });

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

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

  const app = createSchedulerApp({
    resources: [{ id: 'dev-1', name: 'Alice Smith', color: '#10b981' }],
    events: [],
    views: [createWeekView({ weekDayWidth: 120 })],
    defaultView: 'week',
  });

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

<DayflowScheduler {app} />

3. Month View (`createMonthView`)

The Month view displays all days within the current calendar month, suitable for medium-range resource coordination.

Configuration Options

Property	Type	Default	Description
`monthDayWidth`	`number`	`56`	Width in pixels for each day column in Month view.
`dayWidth`	`number`	`56`	Shared fallback column width if `monthDayWidth` is omitted.
`rowHeight`	`number`	`48`	Height in pixels for each resource row in Month view.

4. Quarter View (`createQuarterView`)

The Quarter view groups time into monthly segments across a 3-month block, ideal for roadmap and delivery milestone planning.

Configuration Options

Property	Type	Default	Description
`quarterMonthWidth`	`number`	`96`	Width in pixels for each month column in Quarter view.
`rowHeight`	`number`	`52`	Height in pixels for each resource row.

5. Year View (`createYearView`)

The Year view displays long-range timeline columns across years, designed for high-level portfolio oversight.

Configuration Options

Property	Type	Default	Description
`yearCellWidth`	`number`	`88`	Width in pixels for each month/quarter cell in Year view.
`yearRangePast`	`number`	`1`	Number of past years accessible via scrolling.
`yearRangeFuture`	`number`	`3`	Number of future years accessible via scrolling.

Registering and Customizing Views

Default View Registration

If views is omitted, all five views are registered automatically in standard order (day, week, month, quarter, year).

To constrain the view switcher UI to a subset of views:

const app = useSchedulerApp({
  resources,
  events,
  views: [createWeekView(), createMonthView()],
  defaultView: 'week',
});

Custom View Labels

Override the display title shown in the view switcher button group or dropdown:

const customQuarter = {
  ...createQuarterView(),
  label: 'Q3 Roadmap',
};

Switching Timeline Mode

Use setCurrentTimelineMode() to change the active view at runtime:

// Switch active mode to Month view
app.setCurrentTimelineMode('month');

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

Navigation methods dynamically adjust step size based on the active view (e.g. 1 day in Day view, 7 days in Week view, 1 month in Month view):

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

// Jump to today
app.goToToday();

// Jump to an explicit date
import { Temporal } from 'temporal-polyfill';
app.setCurrentDate(Temporal.PlainDate.from('2026-09-01'));

Listening to Range Changes

Listen to visible range shifts to implement server-side prefetching or lazy data loading:

const app = useSchedulerApp({
  resources,
  events,
  callbacks: {
    onVisibleRangeChange: (start, end, reason) => {
      console.log(`Timeline span: ${start.toString()} to ${end.toString()}`);
      console.log(`Trigger reason: ${reason}`); // 'viewChange' | 'navigation' | 'initial'
    },
  },
});

View Switcher UI Modes

Control how the toolbar renders the view switcher with viewSwitcherMode:

Mode	Rendered UI	Best Used When
`'buttons'`	Horizontal button group	2–4 views are registered (Default)
`'select'`	Compact dropdown select menu	Dense toolbar or 4+ registered views
`'filter'`	Segmented filter pill control	Mobile or space-constrained header layouts

const app = useSchedulerApp({
  resources,
  events,
  views: [createDayView(), createWeekView(), createMonthView()],
  defaultView: 'week',
  viewSwitcherMode: 'select',
});

To fully replace the view switcher UI, pass a custom renderer to the resourceToolbar slot; see Content Slots.

useSchedulerApp: Complete scheduler application configuration reference.
DayflowScheduler: Component props, layout options, and slot integration.
Events: Working with event data models and temporal dates.
Content Slots: Building custom toolbars and view switcher UIs.

Scheduler Views

Available Views Summary

Detailed View Specifications

1. Day View (`createDayView`)

Configuration Options

Usage Example

2. Week View (`createWeekView`)

Configuration Options

Usage Example

3. Month View (`createMonthView`)

Configuration Options

4. Quarter View (`createQuarterView`)

Configuration Options

5. Year View (`createYearView`)

Configuration Options

Registering and Customizing Views

Default View Registration

Custom View Labels

Programmatic Navigation & View Switching

Switching Timeline Mode

Date Navigation

Listening to Range Changes

View Switcher UI Modes

On this page