Business DAYS

Asked by Chris Tate-Davies
2 years 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,

Chris

Answer posted by Dan Letecky [DayPilot]
2 years 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())) {
          args.cell.properties.business = 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
2 years 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]
2 years ago.

Great, thanks for the update!

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