# Only show a time range on website **URL:** \ **Category:** Event Calendar\ **Tags:** Released\ **Created:** [September 25, 2023, 11:11am UTC](https://community.elfsight.com/t/only-show-a-time-range-on-website/21046 "2023-09-25T11:11:59Z")\ **Posts on this page:** 9\ **Page:** 1
**Author:** ![Dionne\_Kane](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/dionne_kane/32/7278_2.png) [@Dionne\_Kane](https://community.elfsight.com/u/Dionne_Kane)\ **Post date:** [September 25, 2023, 11:11am UTC](https://community.elfsight.com/t/only-show-a-time-range-on-website/21046/1 "2023-09-25T11:11:59Z")
only show a time range - example 6:00 am until 8:00 PM. ---
**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\ **Post date:** [September 25, 2023, 1:06pm UTC](https://community.elfsight.com/t/only-show-a-time-range-on-website/21046/2 "2023-09-25T13:06:27Z")
Hi @Dionne_Kane 👋 Do I understand correctly that you’d like to remove the date from your popup? ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/2X/0/023943eb019f28cf123d01938b6438498dd4d4c3.jpeg) ---
**Author:** ![Dionne\_Kane](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/dionne_kane/32/7278_2.png) [@Dionne\_Kane](https://community.elfsight.com/u/Dionne_Kane)\ **Post date:** [September 25, 2023, 8:28pm UTC](https://community.elfsight.com/t/only-show-a-time-range-on-website/21046/3 "2023-09-25T20:28:46Z")
No, I only want to present 7:00 am - 6:00 PM on the calendar page on website. ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/2X/a/a5c9f78c95062418bf5cbec2d8e3fe6f10ad39da.png) ---
**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\ **Post date:** [September 26, 2023, 9:08am UTC](https://community.elfsight.com/t/only-show-a-time-range-on-website/21046/4 "2023-09-26T09:08:43Z")
Just to make things clear, you’d like to remove the time zone and the event name, right? ---
**Author:** ![Dionne\_Kane](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/dionne_kane/32/7278_2.png) [@Dionne\_Kane](https://community.elfsight.com/u/Dionne_Kane)\ **Post date:** [September 26, 2023, 9:17am UTC](https://community.elfsight.com/t/only-show-a-time-range-on-website/21046/5 "2023-09-26T09:17:03Z")
No I would like to only show a certain range of time on the calendar. Currently it shows 1am to 7 pm ---
**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\ **Post date:** [September 26, 2023, 9:34am UTC](https://community.elfsight.com/t/only-show-a-time-range-on-website/21046/6 "2023-09-26T09:34:34Z")
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! ---
**Author:** ![Pascal\_Graf](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/pascal_graf/32/5055_2.png) [@Pascal\_Graf](https://community.elfsight.com/u/Pascal_Graf)\ **Post date:** [January 4, 2024, 1:24am UTC](https://community.elfsight.com/t/only-show-a-time-range-on-website/21046/7 "2024-01-04T01:24:30Z")
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 ---
**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\ **Post date:** [January 6, 2024, 3:02pm UTC](https://community.elfsight.com/t/only-show-a-time-range-on-website/21046/8 "2024-01-06T15:02:36Z")
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: ```auto /* 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. ---
**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\ **Post date:** [April 10, 2024, 10:17am UTC](https://community.elfsight.com/t/only-show-a-time-range-on-website/21046/9 "2024-04-10T10:17:54Z")
Hey there 👋 Happy to tell you that we’ve added an option to set the time range in Week and Day layouts: ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/0/a/0afa682be403232cf2648d953f64f3910afbdda8.png)