DayPilot.Calendar.timeline

Defines the ordered cells of a manual vertical Calendar timeline. Cells can have different durations and pixel heights, and gaps between cells occupy no vertical space.

Available in DayPilot Pro for JavaScript since 2026.4.7150.

Declaration

DayPilot.Calendar.timeline

Default Value

null

Cell Properties

• start: required DayPilot.Date or ISO date/time string.
• end: required DayPilot.Date or ISO date/time string, later than start.
• height: optional positive pixel height. Omit it to use cellHeight.

Behavior

Set scale to "Manual" to use this array. Cells must be in chronological order and must not overlap. They may touch or leave gaps; an empty array displays an empty time axis.

Day and week views repeat the reference pattern for each date. Resource views can display several days on one shared vertical axis; column start dates shift the reference pattern. An explicit timeline is not filtered by showNonBusiness and does not invoke onIncludeTimeCell.

Set heightSpec to "Full" to display the complete timeline, or use a fixed viewport for scrolling. Configure timeHeaders independently. Timeline breaks can be customized using onBeforeGridLineRender.

These examples configure an existing DayPilot Pro Calendar. Keep its event data and other options.

JavaScript

const calendar = new DayPilot.Calendar("dp", {
  startDate: "2028-04-03",
  viewType: "Day",
  scale: "Manual",
  heightSpec: "Full",
  timeline: [
    {start: "2028-04-03T08:00:00", end: "2028-04-03T09:00:00", height: 40},
    {start: "2028-04-03T10:00:00", end: "2028-04-03T11:30:00", height: 90},
    {start: "2028-04-03T11:30:00", end: "2028-04-03T12:00:00", height: 30}
  ]
});
calendar.init();

Angular

Add the configuration to an existing Calendar component.

<daypilot-calendar [config]="config"></daypilot-calendar>

import {DayPilot} from "daypilot-pro-angular";

config: DayPilot.CalendarConfig = {
  startDate: "2028-04-03",
  viewType: "Day",
  scale: "Manual",
  heightSpec: "Full",
  timeline: [
    {start: "2028-04-03T08:00:00", end: "2028-04-03T09:00:00", height: 40},
    {start: "2028-04-03T10:00:00", end: "2028-04-03T11:30:00", height: 90},
    {start: "2028-04-03T11:30:00", end: "2028-04-03T12:00:00", height: 30}
  ]
};

React

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

<DayPilotCalendar
  startDate="2028-04-03"
  viewType="Day"
  scale="Manual"
  heightSpec="Full"
  timeline={[
    {start: "2028-04-03T08:00:00", end: "2028-04-03T09:00:00", height: 40},
    {start: "2028-04-03T10:00:00", end: "2028-04-03T11:30:00", height: 90},
    {start: "2028-04-03T11:30:00", end: "2028-04-03T12:00:00", height: 30}
  ]}
/>

Vue

<script setup lang="ts">
import {DayPilot, DayPilotCalendar} from "daypilot-pro-vue";
const timeline: NonNullable<DayPilot.CalendarConfig["timeline"]> = [
    {start: "2028-04-03T08:00:00", end: "2028-04-03T09:00:00", height: 40},
    {start: "2028-04-03T10:00:00", end: "2028-04-03T11:30:00", height: 90},
    {start: "2028-04-03T11:30:00", end: "2028-04-03T12:00:00", height: 30}
  ];
</script>

<template>
  <DayPilotCalendar
    startDate="2028-04-03"
    viewType="Day"
    scale="Manual"
    heightSpec="Full"
    :timeline="timeline"
  />
</template>

See Also

Nonlinear Timeline · DayPilot.Calendar Class