html5 calendar overnight shift scheduling

In the JavaScript Calendar component, it is possible to customize the first and last visible hour using the following properties:

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.

Live Demo

JavaScript

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

<script>
  const dp = new DayPilot.Calendar("dp", {
    dayBeginsHour: 6,
    dayEndsHour: 6,
    // ...
  });
  dp.init();
</script>

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,
  // ...
	
})