DayPilot.Scheduler.onBeforeGridLineRender

The onBeforeGridLineRender event is fired before each grid line is rendered. You can use this event to hide the line or add custom CSS.

There are three types of grid lines. The type is stored in the args.type property:

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

Available since version 2020.3.4629.

Declaration

DayPilot.Scheduler.onBeforeGridLine(args)

Parameters

• args.color (string) - custom color set using an inline style
• args.cssClass (string) - custom CSS class that will be added to the line
• args.end (DayPilot.Date) - end of the time column (vertical lines), end of the time break (vertical breaks)
• args.hidden (boolean) - set to true if you want to hide the grid line
• args.row (DayPilot.Row) - Scheduler row (horizontal lines)
• args.start (DayPilot.Date) - start of the time column (vertical lines), start of the time break (vertical breaks)
• args.type ("HorizontalLine" | "VerticalLine" | "VerticalBreak") - line type

Examples

Hide vertical grid lines:

dp.onBeforeGridLineRender = function(args) {
  if (args.type === "VerticalLine") {
    args.hidden = true;
  }
};

Hide horizontal grid lines:

dp.onBeforeGridLineRender = function(args) {
  if (args.type === "HorizontalLine") {
    args.hidden = true;
  }
};

Add custom CSS class to vertical lines separating days:

dp.onBeforeGridLineRender = function(args) {
  if (args.type === "VerticalLine") {
    if (args.end.getTimePart() === 0) {
       args.cssClass = "midnight-line";
    }
  }
};