Separators

Separators are vertical lines inserted at specified time points.

You can define separators using the separators property.

Appearance

You can control the appearance using the following properties:

• location (time position)

• color (color)

• width (width in pixels)

• layer (above or below the events)

• for the full list, see the API docs for DayPilot.Scheduler.separators

JavaScript

See DayPilot.Scheduler.separators array.

Examples

Inserting a red separator at the specified date/time position:

<div id="dp"></div>
<script type="text/javascript">
  var dp = new DayPilot.Scheduler("dp");
  dps.separators =  [{color:"red", location:"2019-03-29T00:00:00"}];
  // ...
  dp.init();
</script>

Highlighting the current time:

<div id="dp"></div>
<script type="text/javascript">
  var dp = new DayPilot.Scheduler("dp");
  dps.separators = [{color:"red", location: new DayPilot.Date()}];
  // ...
  dp.init();
</script>

Separator with a custom width:

<div id="dp"></div>
<script type="text/javascript">
  var dp = new DayPilot.Scheduler("dp");
  dps.separators = [{color:"red", location: new DayPilot.Date(), width: 5}];
  // ...
  dp.init();
</script>

Separator displayed above events:

<div id="dp"></div>
<script type="text/javascript">
  var dp = new DayPilot.Scheduler("dp");
  dps.separators = [{color:"red", location: new DayPilot.Date(), layer: "AboveEvents" }];
  // ...
  dp.init();
</script>

Tutorials

• JavaScript Scheduler: Show Separators in the Time Header

<DayPilot:DayPilotScheduler ID="DayPilotScheduler1" runat="server" ... >
  ...
  <Separators>
    <DayPilot:Separator Color="green" Location="02/01/2019 12:00:00" />
    <DayPilot:Separator Color="green" Location="02/03/2019 12:00:00" />
    <DayPilot:Separator Color="red" Location="02/02/2019 00:00:00" />
  </Separators>
</DayPilot:DayPilotScheduler>

// Red separator with 50% opacity placed at the current day with width equal to CellWidth, shown above events
DayPilotScheduler1.Separators.Add(DateTime.Today, Color.Red, SeparatorLayer.AboveEvents, DayPilotScheduler1.CellWidth, 50);

// Red separator with 50% opacity placed at the current day with width equal to CellWidth, shown above events
DayPilotScheduler1.Separators.Add(DateTime.Today, Color.Red, SeparatorLayer.AboveEvents, DayPilotScheduler1.CellWidth, 50);

protected override void OnInit(InitArgs ea)
{
  // ...
  Separators.Clear();
  Separators.Add(DateTime.Now, Color.Red);
}