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

Change Time Header Vertical Grid lines style

Asked by Anonymous
19 days 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]
19 days ago.

You can use the following CSS:

.scheduler_default_timeheadercol_inner {
  border-right-width: 4px;
}
Comment posted by Anonymous
19 days 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]
19 days 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
18 days ago.

Hi,

I followed your instructions and it worked perfectly.

Thanks for your help!

New Reply
This reply is
Attachments:
or drop files here
Your name (optional):