DayPilot.Scheduler.separators

The separators property (array) defines separators displayed by the JavaScript Scheduler component.

Declaration

DayPilot.Scheduler.separators

Default Value

null

Item Structure

• cssClass (string)

• color (string)

• layer (string) - "AboveEvents" or "BelowEvents"; the default value is "BelowEvents".

• location (DayPilot.Date | string)

• opacity (number) - in percent (0 to 100)

• toolTip (string) - separator tooltip text (available since 2023.3.5731)

• width (number) - default value 1 pixel

Examples

JavaScript

const dp = new DayPilot.Scheduler("dp", {
  separators: [
    {
      color: "red",
      location: "2025-03-29T00:00:00",
      layer: "BelowEvents"
    }
  ],
  // ...
});
dp.init();

Angular

<daypilot-scheduler [config]="config"></daypilot-scheduler>

config: DayPilot.SchedulerConfig = {
  separators: [
    {
      color: "red",
      location: "2025-03-29T00:00:00",
      layer: "BelowEvents"
    }
  ],
  // ...
};

React

<DayPilotScheduler
  separators={[
    { color: "red", location: "2025-03-29T00:00:00", layer: "BelowEvents" }
  ]}
  {/* ... */}
/>

Vue

<DayPilotScheduler
  :separators="[
    { color: 'red', location: '2025-03-29T00:00:00', layer: 'BelowEvents' }
  ]"
  <!-- ... -->
/>

See Also

Separators [doc.daypilot.org]

DayPilot.Scheduler Class