only show a time range - example 6:00 am until 8:00 PM.
1 Like
Just to make things clear, you’d like to remove the time zone and the event name, right?
No I would like to only show a certain range of time on the calendar.
Currently it shows 1am to 7 pm
1 Like
Oh, sorry for misunderstanding!
This is a really cool suggestion and we’ll try to think it over in one of our future updates 
Thanks a lot for sharing your feedback with us!
Bro I was facing the same problem I got Chat GPT to create me a solution
/* Hide and collapse time slots from 00:00 to 07:30 */
.fc-timegrid-slot[data-time=“00:00:00”],
.fc-timegrid-slot[data-time=“00:30:00”],
.fc-timegrid-slot[data-time=“01:00:00”],
.fc-timegrid-slot[data-time=“01:30:00”],
.fc-timegrid-slot[data-time=“02:00:00”],
.fc-timegrid-slot[data-time=“02:30:00”],
.fc-timegrid-slot[data-time=“03:00:00”],
.fc-timegrid-slot[data-time=“03:30:00”],
.fc-timegrid-slot[data-time=“04:00:00”],
.fc-timegrid-slot[data-time=“04:30:00”],
.fc-timegrid-slot[data-time=“05:00:00”],
.fc-timegrid-slot[data-time=“05:30:00”],
.fc-timegrid-slot[data-time=“06:00:00”],
.fc-timegrid-slot[data-time=“06:30:00”],
.fc-timegrid-slot[data-time=“07:00:00”],
.fc-timegrid-slot[data-time=“07:30:00”] {
height: 0 !important;
width: 0 !important;
display: none !important;
overflow: hidden !important;
font-size: 0px !important;
line-height: 0 !important;
}
/* Unset font styles for the calendar component if needed */
.eapp-events-calendar-events-calendar-component {
font: inherit !important;
}
/* Ensure the label for the time slots is also hidden */
.fc-timegrid-slot-label[data-time=“00:00:00”],
.fc-timegrid-slot-label[data-time=“00:30:00”],
.fc-timegrid-slot-label[data-time=“01:00:00”],
.fc-timegrid-slot-label[data-time=“01:30:00”],
.fc-timegrid-slot-label[data-time=“02:00:00”],
.fc-timegrid-slot-label[data-time=“02:30:00”],
.fc-timegrid-slot-label[data-time=“03:00:00”],
.fc-timegrid-slot-label[data-time=“03:30:00”],
.fc-timegrid-slot-label[data-time=“04:00:00”],
.fc-timegrid-slot-label[data-time=“04:30:00”],
.fc-timegrid-slot-label[data-time=“05:00:00”],
.fc-timegrid-slot-label[data-time=“05:30:00”],
.fc-timegrid-slot-label[data-time=“06:00:00”],
.fc-timegrid-slot-label[data-time=“06:30:00”],
.fc-timegrid-slot-label[data-time=“07:00:00”],
.fc-timegrid-slot-label[data-time=“07:30:00”] {
display: none !important;
overflow: hidden !important;
}
/* Reset the height for all slot times to allow for dynamic resizing */
.fc .fc-timegrid-slot {
height: auto !important;
}
If you copy this to the custom css you can add to the widget under apperance it hides all the timeslots you see in the js, you can modify it to your likings
1 Like
Hi @Pascal_Graf 
A huge thank you for sharing your workaround with us!
Our devs have checked the code and confirmed that it should work correctly. Here is a slightly revised version of the code:
/* Hide and collapse time slots from 00:00 to 07:00 */
.fc-timegrid-slot[data-time="00:00:00"],
.fc-timegrid-slot[data-time="00:30:00"],
.fc-timegrid-slot[data-time="01:00:00"],
.fc-timegrid-slot[data-time="01:30:00"],
.fc-timegrid-slot[data-time="02:00:00"],
.fc-timegrid-slot[data-time="02:30:00"],
.fc-timegrid-slot[data-time="03:00:00"],
.fc-timegrid-slot[data-time="03:30:00"],
.fc-timegrid-slot[data-time="04:00:00"],
.fc-timegrid-slot[data-time="04:30:00"],
.fc-timegrid-slot[data-time="05:00:00"],
.fc-timegrid-slot[data-time="05:30:00"],
.fc-timegrid-slot[data-time="06:00:00"],
.fc-timegrid-slot[data-time="06:30:00"],
.fc-timegrid-slot[data-time="07:00:00"] {
display: none !important;
}
/* Reset the height for all slot times to allow for dynamic resizing */
.fc-timegrid-slot {
height: auto;
}
Keep in mind, that this code will work correctly if there are no events that fall outside the remaining time range.
1 Like
