DayPilot.Calendar.onBeforeGridLineRender

Customizes timeline break lines displayed between non-contiguous Calendar time cells.

Available in DayPilot Pro for JavaScript since 2026.4.7150.

Declaration

DayPilot.Calendar.onBeforeGridLineRender(args)

Parameters

• args.type (read-only): "HorizontalBreak".
• args.start (DayPilot.Date, read-only): end of the preceding visible interval.
• args.end (DayPilot.Date, read-only): start of the following visible interval.
• args.hidden (boolean): false by default; set true to omit the line.
• args.color (string or null): optional line color.
• args.cssClass (string or null): optional CSS class.

Behavior

The callback customizes horizontal gap markers, including gaps produced by manual cells or generated-cell filtering. It does not customize ordinary grid lines or create a break where cells are continuous. Hiding a line leaves the omitted time and cell geometry unchanged.

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}
  ],
  onBeforeGridLineRender: args => {
    if (args.type === "HorizontalBreak") {
      args.hidden = true;
    }
  }
});
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}
  ],
  onBeforeGridLineRender: args => {
    if (args.type === "HorizontalBreak") {
      args.hidden = true;
    }
  }
};

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}
  ]}
  onBeforeGridLineRender={args => {
    if (args.type === "HorizontalBreak") {
      args.hidden = true;
    }
  }}
/>

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}
  ];
const onBeforeGridLineRender: NonNullable<DayPilot.CalendarConfig["onBeforeGridLineRender"]> = args => {
    if (args.type === "HorizontalBreak") {
      args.hidden = true;
    }
  };
</script>

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

See Also

Nonlinear Timeline · DayPilot.Calendar Class