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: "Cells" option.

You can also create a custom timeline by defining individual time slots. This is 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, use 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>

Angular Scheduler

The Angular Scheduler supports setting custom grid time slot duration using cellDuration property of the config object.

import {Component, ViewChild, AfterViewInit} from '@angular/core';
import {DayPilot, DayPilotSchedulerComponent} from 'daypilot-pro-angular';
import {DataService} from './data.service';

@Component({
  selector: 'scheduler-component',
  template: `<daypilot-scheduler [config]="config" [events]="events" #scheduler></daypilot-scheduler>`,
  styles: [``]
})
export class SchedulerComponent implements AfterViewInit {

  @ViewChild('scheduler')
  scheduler!: DayPilotSchedulerComponent;

  events: DayPilot.EventData[] = [];

  config: DayPilot.SchedulerConfig = {
    timeHeaders: [{groupBy: "Day", format: "dddd, d MMMM yyyy"},{groupBy: "Hour"},{groupBy: "Cell", format: "mm"}],
    scale: "CellDuration",
    cellDuration: 15,
    // ...
  };

  constructor(private ds: DataService) {
  }

  ngAfterViewInit(): void {
    this.ds.getResources().subscribe(result => this.config.resources = result);

    const from = this.scheduler.control.visibleStart();
    const to = this.scheduler.control.visibleEnd();
    this.ds.getEvents(from, to).subscribe(result => {
      this.events = result;
    });
  }

}

React Scheduler

You can configure the grid cell duration using cellDuration and scale attributes of the React Scheduler component:

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

class Scheduler extends Component {

  constructor(props) {
    super(props);
  }

  componentDidMount() {
    // ...
  }

  render() {
    return (
      <div>
        <DayPilotScheduler
          scale={"CellDuration"}
          cellDuration={15},
          timeHeaders={[{groupBy: "Day", format: "dddd, d MMMM yyyy"},{groupBy: "Hour"},{groupBy: "Cell", format: "mm"}]}
          ref={component => {
            this.scheduler = component && component.control;
          }}
        />
      </div>
    );
  }
}

export default Scheduler;

Vue Scheduler

The Vue Scheduler component loads the configuration settings for the config object defined using the :config attribute. To use a small time cell duration, set add a cellDuration property to the config object.

<template>
  <DayPilotScheduler id="dp" :config="config" ref="scheduler" />
</template>

<script>
import {DayPilot, DayPilotScheduler} from 'daypilot-pro-vue'

export default {
  name: 'Scheduler',
  data: function() {
    return {
      config: {
        timeHeaders: [{groupBy: "Day", format: "dddd, d MMMM yyyy"},{groupBy: "Hour"},{groupBy: "Cell", format: "mm"}],
        scale: "CellDuration",
        cellDuration: 15,
        // ...
      },
    }
  },
  components: {
    DayPilotScheduler
  },
  computed: {
    // DayPilot.Scheduler object - https://api.daypilot.org/daypilot-scheduler-class/
    scheduler: function () {
      return this.$refs.scheduler.control;
    }
  },
}
</script>

<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>