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 */
}