You can set the scheduler cell duration using the scale property.

Possible values:

  • "Minute"

  • "Hour"

  • "Day"

  • "Week"

  • "Month"

  • "Quarter"

  • "Year"

  • "CellDuration" - a custom number of minutes (cell duration)

  • "Manual" - a custom timeline created by specifying the individual cells

The default value is "CellDuration".

Remember to set the time header rows accordingly when changing the Scheduler grid scale.

JavaScript Scheduler

15-Minute Blocks

JavaScript Scheduler Scale 15 Minute Blocks

Scheduler config:

{
  scale: "CellDuration",
  cellDuration: 15,
  timeHeaders: [
    { groupBy: "Day", format: "M/d/yyyy"},
    { groupBy: "Hour" },
    { groupBy: "Cell", format: "mm" }
  ],
  // ...
}

Hours

JavaScript Scheduler Scale Hours

Scheduler configuration:

{
  scale: "Hour",
  timeHeaders: [
    { groupBy: "Day", format: "M/d/yyyy"},
    { groupBy: "Hour" }
  ],
  // ...
}

Days

JavaScript Scheduler Scale Days

Scheduler configuration:

{
  scale: "Day",
  timeHeaders: [
    { groupBy: "Month", format: "MMMM yyyy"},
    { groupBy: "Week"},
    { groupBy: "Day", format: "d" }
  ],
  // ...
}

Weeks

JavaScript Scheduler Scale Weeks

Scheduler configuration:

{
  scale: "Week",
  timeHeaders: [
    { groupBy: "Month", format: "MMMM yyyy"},
    { groupBy: "Week" }
  ],
  // ...
}

Months

JavaScript Scheduler Scale Months

Scheduler configuration:

{
  scale: "Month",
  timeHeaders: [
    { groupBy: "Year"},
    { groupBy: "Month" }
  ],
  // ...
}

Years

JavaScript Scheduler Scale Years

{
  scale: "Year",
  timeHeaders: [
    { groupBy: "Year"},
  ],
  // ...
}

Tutorials

ASP.NET WebForms

Hours

html5 scheduler scale hours

<DayPilot:DayPilotScheduler 
  ID="DayPilotScheduler1" 
  runat="server" 
  ...
  Scale="Hour" 
  />

Days

html5 scheduler scale days

<DayPilot:DayPilotScheduler 
  ID="DayPilotScheduler1" 
  runat="server" 
  ...
  Scale="Day" 
  />

Weeks

html5 scheduler scale weeks

<DayPilot:DayPilotScheduler 
  ID="DayPilotScheduler1" 
  runat="server" 
  ...
  Scale="Week" 
  />

Months

html5 scheduler scale months

<DayPilot:DayPilotScheduler 
  ID="DayPilotScheduler1" 
  runat="server" 
  ...
  Scale="Month" 
  />

Years

html5 scheduler scale years

<DayPilot:DayPilotScheduler 
  ID="DayPilotScheduler1" 
  runat="server" 
  ...
  Scale="Year" 
  />

ASP.NET MVC

Hours

html5 scheduler scale hours

@Html.DayPilotScheduler("dps", new DayPilotSchedulerConfig {
  BackendUrl = Url.Action("Backend", "Scheduler"),
  Scale = TimeScale.Hour,
  ...
})

Days

html5 scheduler scale days

@Html.DayPilotScheduler("dps", new DayPilotSchedulerConfig {
  BackendUrl = Url.Action("Backend", "Scheduler"),
  Scale = TimeScale.Day,
  ...
})

Weeks

html5 scheduler scale weeks

@Html.DayPilotScheduler("dps", new DayPilotSchedulerConfig {
  BackendUrl = Url.Action("Backend", "Scheduler"),
  Scale = TimeScale.Week,
  ...
})

Months

html5 scheduler scale months

@Html.DayPilotScheduler("dps", new DayPilotSchedulerConfig {
  BackendUrl = Url.Action("Backend", "Scheduler"),
  Scale = TimeScale.Month,
  ...
})

Years

html5 scheduler scale years

@Html.DayPilotScheduler("dps", new DayPilotSchedulerConfig {
  BackendUrl = Url.Action("Backend", "Scheduler"),
  Scale = TimeScale.Year,
  ...
})