html5-scheduler-separators.png

Separators are vertical lines inserted at specified time points.

You can manage separators using Separators property.

Appearance

  • Location (time position)
  • Color (color)
  • Width (width in pixels)
  • Layer (above or below the events)
  • Opacity (opacity in percent)

JavaScript

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:"2012-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>

ASP.NET WebForms

ASPX

<DayPilot:DayPilotScheduler ID="DayPilotScheduler1" runat="server" ... >
  ...
  <Separators>
    <DayPilot:Separator Color="green" Location="02/01/2008 12:00:00" />
    <DayPilot:Separator Color="green" Location="02/03/2008 12:00:00" />
    <DayPilot:Separator Color="red" Location="02/02/2008 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);
}