search envelope-o feed check
Home Unanswered Active Tags New Question
user comment-o

Change Time Header Vertical Grid lines style

Asked by Anonymous
7 months ago.

Hello,

Could you please advise me on how to modify the style of the vertical grid lines in the Time Header area outlined in blue in the screenshot below (e.g. changing the line thickness to 4px)?

Thanks in advance.

Product Name: DayPilot Pro React
Version: 2024.1.5890
Device: MacBook Pro 2023
OS: macOS 14.4.1
Browser: Google Chrome (latest version)

Answer posted by Dan Letecky [DayPilot]
7 months ago.

You can use the following CSS:

.scheduler_default_timeheadercol_inner {
  border-right-width: 4px;
}
Comment posted by Anonymous
7 months ago.

Thanks for your reply!

Is it possible to change the style for only specific dates? For instance, I'm considering displaying a thicker border when the date falls on the last day of the month.

Comment posted by Dan Letecky [DayPilot]
7 months ago.

Yes. Using the onBeforeTimeHeaderRender event, you can add a custom CSS class to selected time header cells:

onBeforeTimeHeaderRender: args => {
  if (args.header.start.getMonth() !== args.header.end.getMonth()) {
    args.header.cssClass = "last";
  }
}

Your CSS woud look like this:

.scheduler_default_timeheader_cell.last .scheduler_default_timeheader_cell_inner {
  border-right-width: 4px;
}
Comment posted by Anonymous
7 months ago.

Hi,

I followed your instructions and it worked perfectly.

Thanks for your help!

This question is more than 1 months old and has been closed. Please create a new question if you have anything to add.