Calendar Overnight Scheduling

In the JavaScript Calendar component, it is 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.

Live Demo

• JavaScript Calendar Overnight Scheduling Demo

JavaScript

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

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

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

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

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