Working with Events

Events are the primary data elements rendered on the Dayflow Scheduler timeline. Each event represents a scheduled task, booking, or assignment bound to one or more resource rows over a specified time interval.

Dayflow Scheduler uses the modern Temporal API (via temporal-polyfill) for precise, timezone-safe date and time handling.

Event Interface Specification

The SchedulerEvent object supports full typing across all framework adapters:

Property	Type	Required	Description
`id`	`string`	Required	Unique identifier for the event.
`title`	`string`	Required	Title text displayed on the event pill.
`start`	`Temporal.PlainDate \| Temporal.PlainDateTime \| Temporal.ZonedDateTime`	Required	Event start value.
`end`	`Temporal.PlainDate \| Temporal.PlainDateTime \| Temporal.ZonedDateTime`	Required	Event end value.
`resourceId`	`string`	Optional	ID of the resource row this event belongs to.
`allDay`	`boolean`	Optional	Set `true` for all-day events (Default: `false`).
`description`	`string`	Optional	Additional notes or description shown in the event detail panel.
`progress`	`number`	Optional	Runtime progress value from `0` to `100`.
`color`	`ColorValue`	Optional	Shorthand primary color used when `style` is not set.
`variant`	`EventVariant`	Optional	Shorthand event structure used with `color`.
`styleId`	`string`	Optional	Key of a reusable style in the scheduler's `styleRegistry`.
`style`	`EventStyleSpec`	Optional	Complete inline visual style; takes priority over `color` and `variant`.
`type`	`string`	Optional	App-defined event category.
`displayMode`	`string`	Optional	Explicit rendering mode such as `'milestone'`, `'all-day'`, or `'event'`.
`readOnly`	`boolean`	Optional	Set `true` to make this specific event non-draggable and non-resizable.
`meta`	`Record<string, unknown>`	Optional	Custom payload dictionary (e.g. `assigneeId`, `status`, `location`).

Event Appearance

This page focuses on the event data model, dates, resource assignment, and lifecycle. For variants, milestone markers, progress bars, gradients, patterns, and reusable style registries, see Event & Milestone Styles.

Keeping the visual API on its own page makes it easier to compare the live demos without interrupting the event data workflow described here.

Date & Time Formats (Temporal API)

Dayflow Scheduler supports three Temporal date types based on your precision needs:

1. PlainDateTime (Recommended for Local Events)

Use Temporal.PlainDateTime when events occur at a specific date and time without timezone conversion complexity.

import { Temporal } from 'temporal-polyfill';

const meetingEvent = {
  id: 'event-101',
  title: 'Architecture Sync',
  resourceId: 'dev-team',
  start: Temporal.PlainDateTime.from('2026-09-15T10:00:00'),
  end: Temporal.PlainDateTime.from('2026-09-15T11:30:00'),
};

2. PlainDate (All-Day Events)

Use Temporal.PlainDate for full-day events spanning whole calendar days.

const holidayEvent = {
  id: 'event-102',
  title: 'Company Hackathon',
  resourceId: 'all-hands',
  allDay: true,
  start: Temporal.PlainDate.from('2026-10-01'),
  end: Temporal.PlainDate.from('2026-10-03'),
};

3. ZonedDateTime (Timezone-Aware Meetings)

Use Temporal.ZonedDateTime when scheduling cross-timezone events or video conferences:

const globalSync = {
  id: 'event-103',
  title: 'Global All-Hands',
  resourceId: 'exec-room',
  start: Temporal.ZonedDateTime.from('2026-09-15T14:00:00[America/New_York]'),
  end: Temporal.ZonedDateTime.from('2026-09-15T15:00:00[America/New_York]'),
};

Basic Framework Usage

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

export function EventsDemo() {
  const resources = useMemo(
    () => [
      { id: 'res-1', name: 'Frontend Team', color: '#0ea5e9' },
      { id: 'res-2', name: 'Backend Team', color: '#8b5cf6' },
    ],
    []
  );

  const events = useMemo(
    () => [
      {
        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'),
        color: '#38bdf8',
      },
      {
        id: 'evt-2',
        title: 'API Integration',
        resourceId: 'res-2',
        start: Temporal.PlainDateTime.from('2026-09-15T13:00:00'),
        end: Temporal.PlainDateTime.from('2026-09-15T17:00:00'),
      },
    ],
    []
  );

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

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

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

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

const resources = [
  { id: 'res-1', name: 'Frontend Team', color: '#0ea5e9' },
  { id: 'res-2', name: 'Backend Team', color: '#8b5cf6' },
];

const 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'),
    color: '#38bdf8',
  },
];

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

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

@Component({
  selector: 'app-events-scheduler',
  standalone: true,
  imports: [DayflowSchedulerComponent],
  template: `<dayflow-scheduler [app]="app" />`,
})
export class EventsSchedulerComponent implements OnDestroy {
  app = new SchedulerApp({
    resources: [{ id: 'res-1', name: 'Frontend Team', color: '#0ea5e9' }],
    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();
  }
}

<script lang="ts">
  import { onDestroy } from 'svelte';
  import {
    createSchedulerApp,
    DayflowScheduler,
    createWeekView,
  } 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: '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>

<DayflowScheduler {app} />

Dynamic Event CRUD Operations

You can modify events dynamically via the SchedulerApp instance methods:

// 1. Add a single new event
app.addEvent({
  id: 'evt-3',
  title: 'Client Demo',
  resourceId: 'res-1',
  start: Temporal.PlainDateTime.from('2026-09-16T14:00:00'),
  end: Temporal.PlainDateTime.from('2026-09-16T15:00:00'),
});

// 2. Update an existing event
app.updateEvent('evt-3', {
  title: 'Client Demo (Confirmed)',
  color: '#10b981',
});

// 3. Remove an event by ID
app.deleteEvent('evt-3');

// 4. Batch replace all events
app.setEvents(newEventsArray);

Resource Assignment (`resourceId`)

Set resourceId to place an event on a resource row. Keep the assignment explicit when persisting or moving events so the event remains attached to the intended row.

const workshop = {
  id: 'workshop-1',
  title: 'Design Workshop',
  resourceId: 'design-team',
  start: Temporal.PlainDateTime.from('2026-09-18T10:00:00'),
  end: Temporal.PlainDateTime.from('2026-09-18T12:00:00'),
};

Event Interaction Callbacks

Use app callbacks to synchronize event lifecycle changes with your data source:

const app = useSchedulerApp({
  resources,
  events,
  callbacks: {
    onEventSelect: eventId => {
      console.log('Selected event:', eventId);
    },
    onEventCreate: event => {
      api.createEvent(event);
    },
    onEventUpdate: (event, source) => {
      api.updateEvent(event, { source });
    },
    onEventDelete: eventId => {
      api.deleteEvent(eventId);
    },
  },
});

The source passed to onEventUpdate identifies drag, resize, and progress-resize updates. For pointer-specific onEventDrop and onEventResize handlers, configure the Drag & Drop Plugin.

useSchedulerApp: Complete app configuration reference.
DayflowScheduler: Component props, sidebar, and detail panel renderers.
Event & Milestone Styles: Variants, milestones, progress, and decoration demos.
Drag & Drop Plugin: Enabling interactive drag, drop, and resize capabilities.
Read-Only Mode: Disabling event mutations globally or per resource row.

On this page