# Customize time slots in the calendar component

**URL:** https://community.glideapps.com/t/customize-time-slots-in-the-calendar-component/73302
**Category:** Ask for Help
**Tags:** custom-css
**Created:** [May 12, 2024, 9:54pm UTC](https://community.glideapps.com/t/customize-time-slots-in-the-calendar-component/73302 "2024-05-12T21:54:23Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![Fabien\_Vermot](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/fabien_vermot/32/5955_2.png) [@Fabien\_Vermot](https://community.glideapps.com/u/Fabien_Vermot)
#### Post date: [May 12, 2024, 9:54pm UTC](https://community.glideapps.com/t/customize-time-slots-in-the-calendar-component/73302/1 "2024-05-12T21:54:23Z")

</div>

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

---

<div class="post-metadata">

### Author: ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)
#### Post date: [May 12, 2024, 11:51pm UTC](https://community.glideapps.com/t/customize-time-slots-in-the-calendar-component/73302/2 "2024-05-12T23:51:20Z")

</div>

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

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

```

---

<div class="post-metadata">

### Author: ![Fabien\_Vermot](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/fabien_vermot/32/5955_2.png) [@Fabien\_Vermot](https://community.glideapps.com/u/Fabien_Vermot)
#### Post date: [May 13, 2024, 10:18am UTC](https://community.glideapps.com/t/customize-time-slots-in-the-calendar-component/73302/3 "2024-05-13T10:18:23Z")

</div>

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

 ![Capture d’écran 2024-05-13 à 12.18.02](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/7/f/7f30398b68b6903cf92332647229ccc4cda52ea3.jpeg)

---

<div class="post-metadata">

### Author: ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)
#### Post date: [May 13, 2024, 4:32pm UTC](https://community.glideapps.com/t/customize-time-slots-in-the-calendar-component/73302/4 "2024-05-13T16:32:20Z")

</div>

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.

```auto
.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;
}

```

---

<div class="post-metadata">

### Author: ![system](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/system/32/53398_2.png) [@system](https://community.glideapps.com/u/system)
#### Post date: [May 20, 2024, 4:32pm UTC](https://community.glideapps.com/t/customize-time-slots-in-the-calendar-component/73302/5 "2024-05-20T16:32:58Z")

</div>

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.