Time Cell Duration

In the Scheduler component, you can customize the time cell duration using the cellDuration property.

By default, the Scheduler generates the timeline using predefined time slots. The scale property supports common time units, such as day, week, month, quarter, year.

If you set the scale property to "CellDuration", the Scheduler will create time slots using the cellDuration property value (in minutes). This mode is especially suitable for small time slot sizes (smaller than one hour). This way you can define custom grid time slot size.

Common values:

• 1 (1 minute)

• 15 (15 minutes)

• 30 (30 minutes)

• 60 (1 hour)

• 720 (half a day)

The time header is defined separately - the time header groups don't have to correspond to the grid slots. If you want to add a time header with a matching unit, add a time header row with groupBy: "Cell" option.

You can also create a custom timeline by defining individual time slots. This mode provides full control over the time cells. In addition to using custom units, it lets you:

• Use custom time slot start (e.g. noon instead of midnight; this approach is used in the Hotel Room Booking tutorial to handle custom checkin/checkout time)

• Skip certain time blocks (see also hiding time columns)

• Use time slots with different duration (the timeline doesn't have to be linear)

JavaScript Scheduler

In the JavaScript Scheduler component, set the scale property to "CellDuration" and specify the minutes using the cellDuration property:

<div id="dp"></div>
<script type="text/javascript">
  const dp = new DayPilot.Scheduler("dp", {
    timeHeaders: [
      {groupBy: "Day", format: "dddd, d MMMM yyyy"},
      {groupBy: "Hour"},
      {groupBy: "Cell", format: "mm"}
    ],
    scale: "CellDuration",
    cellDuration: 15,
    // ...
  });
  dp.init();
</script>

API: cellDuration.

The examples combine 15-minute grid cells with day and hour header groups, plus a Cell header formatted as minutes. The cell duration and header arrangement are configured separately.

The framework examples use DayPilot Pro. For installation, see the Angular, React or Vue Scheduler guide.

Angular

import {Component} from "@angular/core";
import {DayPilot, DayPilotModule} from "daypilot-pro-angular";

@Component({
  selector: "app-scheduler-example",
  standalone: true,
  imports: [DayPilotModule],
  template: `
    
    <daypilot-scheduler [config]="config"></daypilot-scheduler>
  `
})
export class SchedulerExampleComponent {
  config: DayPilot.SchedulerConfig = {
    startDate: "2026-11-03",
    days: 1,
    scale: "CellDuration",
    timeHeaders: [{groupBy: "Day"}, {groupBy: "Hour"}, {groupBy: "Cell", format: "mm"}],
    resources: [{id: "A", name: "Room A"}, {id: "B", name: "Room B"}],
    events: [{id: 1, text: "Planning", resource: "A", start: "2026-11-03T09:00:00", end: "2026-11-03T12:00:00"}],
    cellDuration: 15
  };

}

React

import React from "react";
import {DayPilot, DayPilotScheduler} from "daypilot-pro-react";

export default function SchedulerExample() {

  return <div>

    <DayPilotScheduler
      startDate={"2026-11-03"}
      days={1}
      scale={"CellDuration"}
      timeHeaders={[{groupBy: "Day"}, {groupBy: "Hour"}, {groupBy: "Cell", format: "mm"}]}
      resources={[{id: "A", name: "Room A"}, {id: "B", name: "Room B"}]}
      events={[{id: 1, text: "Planning", resource: "A", start: "2026-11-03T09:00:00", end: "2026-11-03T12:00:00"}]}
      cellDuration={15}
    />
  </div>;
}

Vue

<script setup>
import {DayPilot, DayPilotScheduler} from "daypilot-pro-vue";

const startDate = "2026-11-03";
const days = 1;
const scale = "CellDuration";
const timeHeaders = [{groupBy: "Day"}, {groupBy: "Hour"}, {groupBy: "Cell", format: "mm"}];
const resources = [{id: "A", name: "Room A"}, {id: "B", name: "Room B"}];
const events = [{id: 1, text: "Planning", resource: "A", start: "2026-11-03T09:00:00", end: "2026-11-03T12:00:00"}];
const cellDuration = 15;

</script>

<template>
  <div>

    <DayPilotScheduler
      :startDate="startDate"
      :days="days"
      :scale="scale"
      :timeHeaders="timeHeaders"
      :resources="resources"
      :events="events"
      :cellDuration="cellDuration"
    />
  </div>
</template>

<DayPilot:DayPilotScheduler runat="server" id="DayPilotScheduler1"
  ...
  Scale="CellDuration"
  CellDuration = "30"
/>

@Html.DayPilotScheduler("dps", new DayPilotSchedulerConfig {
  BackendUrl = ResolveUrl("~/Scheduler/Backend"),
  ...
  Scale = TimeScale.CellDuration,
  CellDuration = 30
})

<div ng-app="main" ng-controller="SchedulerCtrl" >
  <daypilot-scheduler id="dp" daypilot-config="config" ></daypilot-scheduler>
</div>

<script>
  var app = angular.module('main', ['daypilot']).controller('SchedulerCtrl', function($scope) {

      $scope.config = {
          scale: "CellDuration",
          cellDuration: 30,
          // ...
      };
  });
</script>