Is there a way to configure the Calendar component so that it only shows specific working hours of the day? In my case, the app is for a gym, and sessions only happen between certain hours (e.g. 08:00–23:00). Right now, the Calendar displays the full 24 hours, which means the night-time (00:00–07:00) takes up unnecessary space. Users have to scroll down every time to see the actual hours where bookings are available. Is there a way to hide or limit the display to just the relevant hours? [Screenshot 2025-08-31 at 14.14.20]

Please check this implementation with CSS. [image] Customize time slots in the calendar component Ask for Help 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…

Is there a way to limit the hours displayed on calendar's layout?

Ask for Help

ThinhDinh September 1, 2025, 12:09am 2

Please check this implementation with CSS.

Topic		Replies	Views
Calendar - Reduce for visibility Ask for Help	1	35	March 4, 2026
Glide Calendar collection - custom timeframe Ask for Help	3	115	July 25, 2024
Customize time slots in the calendar component Ask for Help custom-css	3	414	May 13, 2024
Calendar Component Display Ask for Help	5	436	April 4, 2024
Customize the calendar by CSS In Pages Ask for Help	0	286	September 23, 2022

Is there a way to limit the hours displayed on calendar's layout?

Related topics