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

Hours

html5 scheduler scale hours

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

Days

html5 scheduler scale days

dp.scale = "Day";
dp.timeHeaders = [
  { groupBy: "Month", format: "MMMM yyyy"},
  { groupBy: "Week"},
  { groupBy: "Day" }
];

Weeks

html5 scheduler scale weeks

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

Months

html5 scheduler scale months

dp.scale = "Month";
dp.timeHeaders = [
  { groupBy: "Year"},
  { groupBy: "Month" }
];

Years

html5 scheduler scale years

dp.scale = "Year";
dp.timeHeaders = [
  { groupBy: "None"},
  { 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,
  ...
})