html5 scheduler separators grid

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

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

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

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