DayPilot.Scheduler.separators

The separators property defines vertical separators displayed by the JavaScript Scheduler. Each item marks a date and time across the grid or within a specific resource row.

Declaration

DayPilot.Scheduler.separators

Type: array of DayPilot.SchedulerSeparatorData objects.

Default Value

[]

Item Structure

• location (DayPilot.Date | string, required): the date and time of the separator.

• resource (string | number | null, optional): a resource ID that limits the line to matching resource rows. Omitted, undefined, or null means a global separator. Available since DayPilot Pro 2026.4.7101.

• color (string, optional): the line color.

• cssClass (string, optional): an additional CSS class applied to the separator.

• layer (string, optional): "AboveEvents" or "BelowEvents". The default is "BelowEvents".

• opacity (number, optional): opacity in percent (0 to 100).

• toolTip (string, optional): separator tooltip text. Available since DayPilot Pro 2023.3.5731.

• width (number, optional): line width in pixels. The default is 1.

Resource Selection

The resource option requires viewType set to "Resources". Its value must match an ID in resources, including the ID type. If multiple rows share that ID, the separator is displayed in each matching row. Unmatched resource IDs produce no separator.

A separator assigned to a tree parent covers only the parent's own row, not its children. A hidden or collapsed child has no visible line. The line follows the row when its position or height changes. For split resources, use a split child ID.

Global separators keep their existing behavior in all view types. Entries with a non-null resource are not displayed in Days view. Gantt separators use their existing global API. Resource selection does not change the separator's width, layer, or other appearance settings.

Examples

These examples mark a global review time at 9 a.m. and a red checkpoint at noon in Room A.

JavaScript

The example assumes that the DayPilot library is loaded and a <div id="dp"></div> element is available.

const dp = new DayPilot.Scheduler("dp", {
  startDate: "2026-11-02",
  days: 1,
  scale: "Hour",
  timeHeaders: [{groupBy: "Day"}, {groupBy: "Hour"}],
  resources: [
    {id: "A", name: "Room A"},
    {id: "B", name: "Room B"}
  ],
  separators: [
    {location: "2026-11-02T09:00:00", color: "#888888"},
    {
      location: "2026-11-02T12:00:00",
      resource: "A",
      color: "#dc2626",
      width: 2,
      layer: "AboveEvents"
    }
  ]
});
dp.init();

Angular

This standalone component uses a typed DayPilot.SchedulerConfig to define its timeline, rooms, and separator positions.

import {Component} from "@angular/core";
import {DayPilot, DayPilotModule} from "daypilot-pro-angular";

@Component({
  selector: "app-room-scheduler",
  standalone: true,
  imports: [DayPilotModule],
  template: '<daypilot-scheduler [config]="config"></daypilot-scheduler>'
})
export class RoomSchedulerComponent {
  config: DayPilot.SchedulerConfig = {
    startDate: "2026-11-02",
    days: 1,
    scale: "Hour",
    timeHeaders: [{groupBy: "Day"}, {groupBy: "Hour"}],
    resources: [
      {id: "A", name: "Room A"},
      {id: "B", name: "Room B"}
    ],
    separators: [
      {location: "2026-11-02T09:00:00", color: "#888888"},
      {
        location: "2026-11-02T12:00:00",
        resource: "A",
        color: "#dc2626",
        width: 2,
        layer: "AboveEvents"
      }
    ]
  };
}

React

Pass the timeline, resource list, and separator array directly as component props:

import {DayPilotScheduler} from "daypilot-pro-react";

export default function RoomScheduler() {
  return (
    <DayPilotScheduler
      startDate="2026-11-02"
      days={1}
      scale="Hour"
      timeHeaders={[{groupBy: "Day"}, {groupBy: "Hour"}]}
      resources={[
        {id: "A", name: "Room A"},
        {id: "B", name: "Room B"}
      ]}
      separators={[
        {location: "2026-11-02T09:00:00", color: "#888888"},
        {
          location: "2026-11-02T12:00:00",
          resource: "A",
          color: "#dc2626",
          width: 2,
          layer: "AboveEvents"
        }
      ]}
    />
  );
}

Vue

This single-file component passes each setting as a separate prop:

<script setup>
import {DayPilotScheduler} from "daypilot-pro-vue";
</script>

<template>
  <DayPilotScheduler
    startDate="2026-11-02"
    :days="1"
    scale="Hour"
    :timeHeaders="[{groupBy: 'Day'}, {groupBy: 'Hour'}]"
    :resources="[
      {id: 'A', name: 'Room A'},
      {id: 'B', name: 'Room B'}
    ]"
    :separators="[
      {location: '2026-11-02T09:00:00', color: '#888888'},
      {
        location: '2026-11-02T12:00:00',
        resource: 'A',
        color: '#dc2626',
        width: 2,
        layer: 'AboveEvents'
      }
    ]"
  />
</template>

Updating the Array

Use update() to replace the separators after initialization. An empty array removes all separators:

dp.update({separators: []});

See Also

• Separators

• Separators Demo

• DayPilot.Scheduler Class