Getting Started with Dayflow Scheduler

Dayflow Scheduler is a high-performance, resource-first scheduling component suite. You provide resources (the rows), events (tasks or bookings placed on those rows), and views (the timeline mode), and Dayflow Scheduler renders a fast, virtualized, editable planning interface.

This guide takes you step-by-step from package installation to rendering a fully working scheduler.

1. Credentials & Registry Access

Dayflow Scheduler packages are distributed via a private npm registry. Before installing, configure your registry access in .npmrc with DAYFLOW_SCHEDULER_NPM_TOKEN:

.npmrc

@dayflow-scheduler:registry=https://gitlab.com/api/v4/projects/81887987/packages/npm/
//gitlab.com/api/v4/projects/81887987/packages/npm/:_authToken=${DAYFLOW_SCHEDULER_NPM_TOKEN}

For full step-by-step registry and runtime license token setup, see Registry Access & License.

2. Package Installation

Install the core engine package along with the adapter for your framework:

bash npm install @dayflow-scheduler/core @dayflow-scheduler/react

bash npm install @dayflow-scheduler/core @dayflow-scheduler/vue

bash npm install @dayflow-scheduler/core @dayflow-scheduler/angular

bash npm install @dayflow-scheduler/core @dayflow-scheduler/svelte

3. Import Stylesheet

Import the core stylesheet near your application entry point (e.g. main.tsx, main.ts, App.vue):

import '@dayflow-scheduler/core/dist/styles.css';

4. Render Your First Scheduler

Here is a complete, working example rendering a resource scheduler with a 7-day week view:

src/App.tsx

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

export default function App() {
  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: 'Sprint Planning',
        resourceId: 'res-1',
        start: Temporal.PlainDateTime.from('2026-09-14T09:00:00'),
        end: Temporal.PlainDateTime.from('2026-09-14T11:00:00'),
      },
    ],
    views: [createWeekView()],
    defaultView: 'week',
  });

  return (
    <div style={{ height: '100vh', padding: '16px' }}>
      <DayflowScheduler app={app} />
    </div>
  );
}

src/App.vue

<template>
  <div style="height: 100vh; padding: 16px;">
    <DayflowScheduler :app="app" />
  </div>
</template>

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

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: 'Sprint Planning',
      resourceId: 'res-1',
      start: Temporal.PlainDateTime.from('2026-09-14T09:00:00'),
      end: Temporal.PlainDateTime.from('2026-09-14T11:00:00'),
    },
  ],
  views: [createWeekView()],
  defaultView: 'week',
});
</script>

src/app/app.component.ts

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

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [DayflowSchedulerComponent],
  template: `
    <div style="height: 100vh; padding: 16px;">
      <dayflow-scheduler [app]="app" />
    </div>
  `,
})
export class AppComponent implements OnDestroy {
  app = new SchedulerApp({
    resources: [
      { id: 'res-1', name: 'Frontend Team', color: '#0ea5e9' },
      { id: 'res-2', name: 'Backend Team', color: '#8b5cf6' },
    ],
    events: [
      {
        id: 'evt-1',
        title: 'Sprint Planning',
        resourceId: 'res-1',
        start: Temporal.PlainDateTime.from('2026-09-14T09:00:00'),
        end: Temporal.PlainDateTime.from('2026-09-14T11:00:00'),
      },
    ],
    views: [createWeekView()],
    defaultView: 'week',
  });

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

src/App.svelte

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

  const app = createSchedulerApp({
    resources: [
      { id: 'res-1', name: 'Frontend Team', color: '#0ea5e9' },
      { id: 'res-2', name: 'Backend Team', color: '#8b5cf6' },
    ],
    events: [
      {
        id: 'evt-1',
        title: 'Sprint Planning',
        resourceId: 'res-1',
        start: Temporal.PlainDateTime.from('2026-09-14T09:00:00'),
        end: Temporal.PlainDateTime.from('2026-09-14T11:00:00'),
      },
    ],
    views: [createWeekView()],
    defaultView: 'week',
  });

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

<div style="height: 100vh; padding: 16px;">
  <DayflowScheduler {app} />
</div>

5. Next Steps

Explore the detailed documentation guides:

useSchedulerApp Reference: State management, options dictionary, and imperative method APIs.
DayflowScheduler Component: Layout customization, virtualized sizing, and sidebar callbacks.
Scheduler Views: Day, week, month, quarter, and year timeline specifications.
Events Specification: Event properties, Temporal API date types, and CRUD operations.
Plugins Guide: Extending your scheduler with drag & drop, keyboard shortcuts, and localization.