DayPilot.Scheduler.onBeforeGridLineRender

The onBeforeGridLineRender event handler fires before each grid line is rendered. You can use it to hide the line or apply custom styling.

Available since version 2020.3.4629.

Declaration

DayPilot.Scheduler.onBeforeGridLineRender(args)

Parameters

• args.color (string) - custom color applied using an inline style

• args.cssClass (string) - custom CSS class added to the line

• args.end (DayPilot.Date) - end of the time column for vertical lines, or the end of the time break for vertical breaks

• args.hidden (boolean) - set to true to hide the grid line

• args.row (DayPilot.Row) - Scheduler row for horizontal lines

• args.start (DayPilot.Date) - start of the time column for vertical lines, or the start of the time break for vertical breaks

• args.type ("HorizontalLine" | "VerticalLine" | "VerticalBreak") - grid line type

Notes

There are three types of grid lines:

• "HorizontalLine" - standard horizontal line displayed below every row

• "VerticalLine" - standard vertical line displayed at the end of every time column

• "VerticalBreak" - indicator of a break in a non-continuous timeline

Examples

JavaScript

Hide vertical grid lines:

const dp = new DayPilot.Scheduler("dp", {
  onBeforeGridLineRender: (args) => {
    if (args.type === "VerticalLine") {
      args.hidden = true;
    }
  },
  // ...
});
dp.init();

Hide horizontal grid lines:

const dp = new DayPilot.Scheduler("dp", {
  onBeforeGridLineRender: (args) => {
    if (args.type === "HorizontalLine") {
      args.hidden = true;
    }
  },
  // ...
});
dp.init();

Add a custom CSS class to vertical lines separating days:

const dp = new DayPilot.Scheduler("dp", {
  onBeforeGridLineRender: (args) => {
    if (args.type === "VerticalLine" && args.end.getTimePart() === 0) {
      args.cssClass = "midnight-line";
    }
  },
  // ...
});
dp.init();

Angular

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

config: DayPilot.SchedulerConfig = {
  onBeforeGridLineRender: (args) => {
    if (args.type === "VerticalLine") {
      args.hidden = true;
    }
  },
  // ...
};

React

<DayPilotScheduler
  onBeforeGridLineRender={onBeforeGridLineRender}
  {/* ... */}
/>

const onBeforeGridLineRender = (args) => {
  if (args.type === "VerticalLine") {
    args.hidden = true;
  }
};

Vue

<DayPilotScheduler
  @beforeGridLineRender="onBeforeGridLineRender"
  <!-- ... -->
/>

const onBeforeGridLineRender = (args) => {
  if (args.type === "VerticalLine") {
    args.hidden = true;
  }
};

See Also

Timeline [doc.daypilot.org]

DayPilot.Scheduler Class