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

Possible values:

  • Minute
  • Hour
  • Day
  • Week
  • Month
  • Year
  • CellDuration - custom number of minutes specified using CellDuration
  • Manual - custom timeline created by specifying the individual cells

The default value is "CellDuration".

You will also want to adjust the time header rows when changing the default scale.

JavaScript

Hours

html5-scheduler-scale-hours.png

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

Days

html5-scheduler-scale-days.png

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

Weeks

html5-scheduler-scale-weeks.png

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

Months

html5-scheduler-scale-months.png

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

Years

html5-scheduler-scale-years.png

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

ASP.NET WebForms

Hours

html5-scheduler-scale-hours.png

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

Days

html5-scheduler-scale-days.png

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

Weeks

html5-scheduler-scale-weeks.png

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

Months

html5-scheduler-scale-months.png

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

Years

html5-scheduler-scale-years.png

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

ASP.NET MVC

Hours

html5-scheduler-scale-hours.png

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

Days

html5-scheduler-scale-days.png

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

Weeks

html5-scheduler-scale-weeks.png

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

Months

html5-scheduler-scale-months.png

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

Years

html5-scheduler-scale-years.png

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