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

Business DAYS

Asked by Chris Tate-Davies
28 days ago.

Hi there. I attach my various code attempts, but I cannot get this to work.

I want the business hours/days to be 8am - 4pm Mon-Wednesday - so Thursdays, Fridays and the weekend all grayed out.

I don’t mind using onBeforeCellRender, or the businessDayBegins properties, I just want it to work.

I’ve changed the server side, so a client cannot book outside these hours, but I’d prefer it to be visually obvious these days/times are outside business hours.

Thanks for ANY help,


Answer posted by Dan Letecky [DayPilot]
28 days ago.

You can use someting like this (using the options syntax):

const calendar = new DayPilot.Calendar("dp", {
  onBeforeCellRender: args => {
      const nonBusinessDays = [4, 5, 6, 0];

      if (nonBusinessDays.includes(args.cell.start.getDayOfWeek())) {
 = false;
  businessBeginsHour: 8,
  businessEndsHour: 16,
  // ...

This marks the listed days (nonBusinessDays) as non-business.

In the default CSS theme, the styles are defined as follows:

1. All cells use the non-busines background by default:

.calendar_default_cell_inner {
    /* ... */
    background: #f9f9f9;

2. It’s overriden for the business cells like this:

.calendar_default_cell_business .calendar_default_cell_inner {
    background: #ffffff;

If you want to change the background color for the non-business cells, you need to use a more specific selector in your CSS:

body .calendar_default_cell_inner {
    background: #e9e9e9;  /* darker gray */
Comment posted by Chris Tate-Davies
27 days ago.

Great, thanks. Pretty sure I tried that method, but cut it all out and started again and its working grand now.

Appreciate the help, thank you.

Comment posted by Dan Letecky [DayPilot]
27 days ago.

Great, thanks for the update!

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