html5 calendar overnight shift scheduling

It's possible to customize the first and last visible hour using the following properties:

  • DayBeginsHour
  • DayEndsHour

An overnight range is supported (e.g from 6:00 to 6:00). This option can be useful for displaying TV guides and listings or overnight shift schedule.

JavaScript

<div id="dp"></div>

<script type="text/javascript">
  var dp = new DayPilot.Calendar("dp");
  dp.dayBeginsHour = 6;
  dp.dayEndsHour = 6;
  // ...
  dp.init();
</script>

Demo:

ASP.NET WebForms

<DayPilot:DayPilotCalendar runat="server" ID="DayPilotCalendar1"
  DayBeginsHour="6"
  DayEndsHour="6"
  ...
/>

ASP.NET MVC

MVC View

@Html.DayPilotCalendar("dpc", new DayPilotCalendarConfig { 

  // ...
  DayBeginsHour = 6,
  DayEndsHour = 6,
  // ...
	
})