html5-scheduler-separators.png

Separators are vertical lines inserted at specified time points.

You can manage separators using 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)
  • opacity (opacity in percent)

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>

ASP.NET WebForms

ASPX

<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>

Custom Separator

calendar-separator-241x181.png

// 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);

calendar-separator-241x181.png

Example above:

// 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);

ASP.NET MVC

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