# Glide Calendar collection - custom timeframe

**URL:** <https://community.glideapps.com/t/glide-calendar-collection-custom-timeframe/75146>\
**Category:** Ask for Help\
**Created:** [July 24, 2024, 7:51pm UTC](https://community.glideapps.com/t/glide-calendar-collection-custom-timeframe/75146 "2024-07-24T19:51:50Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Louis\_Adam](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/louis_adam/32/76429_2.png) [@Louis\_Adam](https://community.glideapps.com/u/Louis_Adam)\
**Post date:** [July 24, 2024, 7:51pm UTC](https://community.glideapps.com/t/glide-calendar-collection-custom-timeframe/75146/1 "2024-07-24T19:51:50Z")

</div>

Hey team,

I’m wondering if you know any possibility to automatically hide the time from 12AM to 9AM, and after 8PM. Right now the calendar is not very readable because it’s on a full day timeframe (see attached)

 ![Screenshot 2024-07-24 at 21.48.43](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/e/e/eec03603d34b541754508fef6e16dd33bc6ac4fb.png)

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [July 24, 2024, 11:58pm UTC](https://community.glideapps.com/t/glide-calendar-collection-custom-timeframe/75146/2 "2024-07-24T23:58:08Z")

</div>

There was a discussion in this thread.

> [@Customize time slots in the calendar component](https://community.glideapps.com/t/customize-time-slots-in-the-calendar-component/73302/4):
>
> 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: hidde…

---

<div class="post-metadata">

**Author:** ![Louis\_Adam](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/louis_adam/32/76429_2.png) [@Louis\_Adam](https://community.glideapps.com/u/Louis_Adam)\
**Post date:** [July 25, 2024, 8:03am UTC](https://community.glideapps.com/t/glide-calendar-collection-custom-timeframe/75146/3 "2024-07-25T08:03:21Z")

</div>

Hey ThingDinh, thanks but I’ve already tried this solution and I get basically this which is not optimal :

 ![Screenshot 2024-07-25 at 09.57.07](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/b/8/b8f2a1ae1c9232e44fdc22642cbe5b48ce68d1cd.png)

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [July 25, 2024, 11:34pm UTC](https://community.glideapps.com/t/glide-calendar-collection-custom-timeframe/75146/4 "2024-07-25T23:34:29Z")

</div>

Sorry, then we don’t have a way to do it better as of now. I wonder if the new custom component can help you with that. It’s a long shot.

> [@new Custom Component (AI Generated)](https://community.glideapps.com/t/custom-component-ai-generated/74533):
>
> We’ve created a preview of a new Custom Component. Take a look at this demo, try it for yourself, and share what you’ve built here!