Time Cell Duration

The default duration of the time cells in the Calendar component is 30 minutes.

In the Pro version, you can customize the cell duration using cellDuration property (in minutes).

• The minimum value is 1 (minute).
• The maximum value is 60 (1 hour).

The time header displayed on the left side of the calendar uses 1-hour slots. You can use define custom time header cell duration using the timeHeaderCellDuration property.

When changing the time cell duration, you may also want to adjust the cell height in pixels.

JavaScript Calendar

In the JavaScript Calendar component, set the cellDuration property to the desired number of minutes:

<div id="dp"></div>

<script type="text/javascript">
  var dp = new DayPilot.Calendar("dp");
  dp.cellDuration = 15;
  // ...
  dp.init();
</script>

You can also use the options object to initialize the Calendar:

<div id="dp"></div>

<script type="text/javascript">
  var dp = new DayPilot.Calendar("dp". {
    cellDuration: 15,
    // ...
  });
  dp.init();
</script>

Angular Calendar

The following Angular Calendar example sets the calendar slot size to 15 minutes:

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

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

  @ViewChild("calendar")
  calendar!: DayPilotCalendarComponent;

  events: any[] = [];

  config: DayPilot.CalendarConfig = {
    viewType: "Week",
    cellDuration: 15,
    // ...
  };

}

React Calendar

In the React Calendar component, use the cellDuration attribute of the <DayPilotCalendar> tag:

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

class Calendar extends Component {

  constructor(props) {
    super(props);
    this.state = {
      // ...
    };
  }

  render() {
    return (
      <div>
        <DayPilotCalendar
          viewType={"Week"}
          cellDuration={15}
        />
      </div>
    );
  }
}

export default Calendar;

Vue Calendar

The Vue Calendar component defines the properties using the :config attribute:

<template>
  <DayPilotCalendar id="dp" :config="config" ref="calendar" />
</template>

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

export default {
  name: 'Calendar',
  data: function() {
    return {
      config: {
        viewType: "Week",
        cellDuration: 15,
        // ...
      },
    }
  },
  components: {
    DayPilotCalendar
  },
}
</script>

ASP.NET WebForms

<DayPilot:DayPilotCalendar runat="server" ID="DayPilotCalendar1"
  CellDuration="15"
  ...
/>

ASP.NET MVC

MVC View

@Html.DayPilotCalendar("dpc", new DayPilotCalendarConfig { 

  // ...
  CellDuration = 15,
  // ...
	
})