Customize time slots in the calendar component

[Fabien_Vermot]

Hello,

I’d like to know how to hide with CSS custom code the slot of times in a calendar component, for example displaying only from 8AM to 6PM only instead of showing all of the hours in the DAY mode.

Thanks for your help, your support and your ideas

Best regards,
Fabien

[Himaladin]

Please give it a try.
Class name: task-Calendar

.task-Calendar .rbc-timeslot-group:nth-child(-n+8),
.task-Calendar .rbc-timeslot-group:nth-child(n+20) {
  display: none;
}

[Fabien_Vermot]

Thanks @Himaladin

It almost works. The time slots are updated, but the appointment slots displayed in the schedule aren’t aligned with the hours anymore (cf. attachment below)

Any idea how to fix it ?

Thanks for your help

[Himaladin]

This HTML structure has events outside the time container, where the height position is calculated by JavaScript and will vary depending on the number of events. The maximum achievement that can be achieved is to maintain the existing space through visibility: hidden. Using display: none will change the calculation of the event’s position.

.task-Calendar .rbc-time-gutter.rbc-time-column > div:nth-child(-n+8), 
.task-Calendar .rbc-day-slot.rbc-time-column > div:nth-child(-n+8){
visibility: hidden;
}

.task-Calendar .rbc-time-gutter.rbc-time-column > div:nth-child(n+20):nth-child(-n+24), 
.task-Calendar .rbc-day-slot.rbc-time-column > div:nth-child(n+20):nth-child(-n+24) {
visibility: hidden;
}

.rbc-time-content > div:not(:nth-child(-n+8)):not(:nth-child(n+20)):not(:last-child) {
    pointer-events: none;
}