# How to get multi-day event name to only show up once on calendar? **URL:** \ **Category:** How do I?\ **Created:** [February 7, 2024, 9:47am UTC](https://community.weweb.io/t/how-to-get-multi-day-event-name-to-only-show-up-once-on-calendar/6873 "2024-02-07T09:47:17Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![raelyn](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/raelyn/32/2803_2.png) [@raelyn](https://community.weweb.io/u/raelyn)\ **Post date:** [February 7, 2024, 9:47am UTC](https://community.weweb.io/t/how-to-get-multi-day-event-name-to-only-show-up-once-on-calendar/6873/1 "2024-02-07T09:47:17Z")
I have an event that lasts for 3 days on the Calendar element. The name of the event is showing up three times, as such: ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/4/412f2a055b5daeaa0e2f3ab8ebba1eaa8d398bb9.png) But how do I get the event name to only show up once, like such: ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/6/603a5e249b7044443091371e43315bfe957ed2a7.png) If I have a multi day event, the calendar gets very messy. the same thing is written 5 times when i only need it once. ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/f/f9d12aac4286f18b3ea237f5b57cc7721b16f193.png) ---
**Author:** ![FHEXL](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/fhexl/32/13607_2.png) [@FHEXL](https://community.weweb.io/u/FHEXL)\ **Post date:** [April 9, 2024, 5:07pm UTC](https://community.weweb.io/t/how-to-get-multi-day-event-name-to-only-show-up-once-on-calendar/6873/2 "2024-04-09T17:07:59Z")
+1. I am also looking for a solution for this. It seems that this is still on the to-do list of the vuecal library. ---
**Author:** ![Profound5753](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/profound5753/32/6870_2.png) [@Profound5753](https://community.weweb.io/u/Profound5753)\ **Post date:** [April 9, 2024, 6:15pm UTC](https://community.weweb.io/t/how-to-get-multi-day-event-name-to-only-show-up-once-on-calendar/6873/3 "2024-04-09T18:15:11Z")
I made my own but you’ll need your own calendar table in the backend ---
**Author:** ![FHEXL](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/fhexl/32/13607_2.png) [@FHEXL](https://community.weweb.io/u/FHEXL)\ **Post date:** [April 9, 2024, 9:14pm UTC](https://community.weweb.io/t/how-to-get-multi-day-event-name-to-only-show-up-once-on-calendar/6873/4 "2024-04-09T21:14:53Z")
@luka maybe you can help. In the docs of vuecal there is stated that on multiple days events 3 css classes are present to add custom styling to the start day, end day and days in between. I confirmed this using codepen. This could be a workaround, but when I inspect my Weweb page with a multi-day event, it looks like these classes are not available. ![Screenshot_20240409_230621_Chrome](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/d/dbb24e2cd921e5c924625eec94e93533d017a5c0.jpeg) ![Screenshot_20240410_063353_Chrome](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/9/97fb7513fa3a5522c046f7ce7518d68c277c39c6.jpeg) Is there an alternative or can the dev team update the calendar element to be able to hide event info (title, description, time) on middle and end days, preserving the height of the event, and maybe manage the radius of each event? Besides this, are there plans for a new calendar component based on another library like Fullcalendar? ---
**Author:** ![FHEXL](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/fhexl/32/13607_2.png) [@FHEXL](https://community.weweb.io/u/FHEXL)\ **Post date:** [April 10, 2024, 5:28pm UTC](https://community.weweb.io/t/how-to-get-multi-day-event-name-to-only-show-up-once-on-calendar/6873/5 "2024-04-10T17:28:38Z")
I sort of succeeded using a custom HTML element with the style tag. Custom code on page level should also work I suppose. Seems to me that the 3 classes I mentioned are present after all ---
**Author:** ![raelyn](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/raelyn/32/2803_2.png) [@raelyn](https://community.weweb.io/u/raelyn)\ **Post date:** [April 22, 2024, 2:33am UTC](https://community.weweb.io/t/how-to-get-multi-day-event-name-to-only-show-up-once-on-calendar/6873/6 "2024-04-22T02:33:23Z")
How did you do that? Could you please share a screenshot and code?! I will implement this into my app immediately haha. Thank you so much in advance! ---
**Author:** ![FHEXL](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/fhexl/32/13607_2.png) [@FHEXL](https://community.weweb.io/u/FHEXL)\ **Post date:** [April 22, 2024, 6:34am UTC](https://community.weweb.io/t/how-to-get-multi-day-event-name-to-only-show-up-once-on-calendar/6873/7 "2024-04-22T06:34:13Z")
![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/c/c2d82590cc5b664fe79445c78e5fe0059cc62998.png) ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/1/1982462aece6858f1494e70722f8db56dfbd7d30.png) or ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/8/8eb8ce1e6c9cd67e1c6fb27dd31422710988c735.png) ---
**Author:** ![raelyn](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/raelyn/32/2803_2.png) [@raelyn](https://community.weweb.io/u/raelyn)\ **Post date:** [August 26, 2024, 3:57am UTC](https://community.weweb.io/t/how-to-get-multi-day-event-name-to-only-show-up-once-on-calendar/6873/8 "2024-08-26T03:57:19Z")
Heyhey! Sorry to bring this up again. But how did you manage to hide the event names if it is a multi day event? That screenshot shows the event names on the “month” view of the calendar. But what I’m trying to do is to get the event name to only show once per event… so if the event is 5 days, instead of showing the event name 5 times, show it once only. ---
**Author:** ![FHEXL](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/fhexl/32/13607_2.png) [@FHEXL](https://community.weweb.io/u/FHEXL)\ **Post date:** [August 26, 2024, 5:18pm UTC](https://community.weweb.io/t/how-to-get-multi-day-event-name-to-only-show-up-once-on-calendar/6873/9 "2024-08-26T17:18:35Z")
I will check if I have an example. I believe I gave up because it needed quite some custom css, especially to align the events of multi day events. See above css: [How to get multi-day event name to only show up once on calendar? - #4 by FHEXL](https://community.weweb.io/t/how-to-get-multi-day-event-name-to-only-show-up-once-on-calendar/6873/4) I set title and time of middle and end event to display none. ---
**Author:** ![raelyn](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/raelyn/32/2803_2.png) [@raelyn](https://community.weweb.io/u/raelyn)\ **Post date:** [August 27, 2024, 1:50pm UTC](https://community.weweb.io/t/how-to-get-multi-day-event-name-to-only-show-up-once-on-calendar/6873/10 "2024-08-27T13:50:12Z")
It’s okay, thank you for your help. I gave up too haha ended up just creating my own custom calendar component which did the trick 🤭 ---
**Author:** ![FHEXL](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/fhexl/32/13607_2.png) [@FHEXL](https://community.weweb.io/u/FHEXL)\ **Post date:** [August 27, 2024, 6:58pm UTC](https://community.weweb.io/t/how-to-get-multi-day-event-name-to-only-show-up-once-on-calendar/6873/11 "2024-08-27T18:58:09Z")
How did you create it? Is it based on an external library? Are you able to share a screenshot? ---
**Author:** ![raelyn](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/raelyn/32/2803_2.png) [@raelyn](https://community.weweb.io/u/raelyn)\ **Post date:** [August 29, 2024, 3:24am UTC](https://community.weweb.io/t/how-to-get-multi-day-event-name-to-only-show-up-once-on-calendar/6873/12 "2024-08-29T03:24:41Z")
I just built it from scratch like any other part of the web app… Because it is too troublesome to go and find all the html classes and get it to behave like I would like! Actually, it’s not as hard as it looks, i feel! ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/d/dc1a4618ba482e2e732fcf0907afdad1d88f59f2.png) ---
**Author:** ![das\_aaronlein](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/das_aaronlein/32/7229_2.png) [@das\_aaronlein](https://community.weweb.io/u/das_aaronlein)\ **Post date:** [August 29, 2024, 8:41am UTC](https://community.weweb.io/t/how-to-get-multi-day-event-name-to-only-show-up-once-on-calendar/6873/13 "2024-08-29T08:41:46Z")
This looks quite clean, well done! ---
**Author:** ![Broberto](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/broberto/32/5918_2.png) [@Broberto](https://community.weweb.io/u/Broberto)\ **Post date:** [August 29, 2024, 8:56am UTC](https://community.weweb.io/t/how-to-get-multi-day-event-name-to-only-show-up-once-on-calendar/6873/14 "2024-08-29T08:56:39Z")
Yep, building a calendar is a no brainer 😄 I never use the WeWeb’s elements actually, I just build my own. Not the fastest, but the more flexible path. ---
**Author:** ![FHEXL](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/fhexl/32/13607_2.png) [@FHEXL](https://community.weweb.io/u/FHEXL)\ **Post date:** [August 30, 2024, 7:07am UTC](https://community.weweb.io/t/how-to-get-multi-day-event-name-to-only-show-up-once-on-calendar/6873/15 "2024-08-30T07:07:35Z")
Very nice! this is vanilla Weweb (with use of the date plugin perhaps) , or did you use some Custom Javascript or alike? ---
**Author:** ![raelyn](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/raelyn/32/2803_2.png) [@raelyn](https://community.weweb.io/u/raelyn)\ **Post date:** [August 31, 2024, 4:10am UTC](https://community.weweb.io/t/how-to-get-multi-day-event-name-to-only-show-up-once-on-calendar/6873/16 "2024-08-31T04:10:20Z")
Vanilla Weweb! The hard part was getting my list of events into an array of months / weeks to fit the calendar. That I used custom Js in my backend, which I created with chatGPT ---
**Author:** ![danielmigizi](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/danielmigizi/32/10516_2.png) [@danielmigizi](https://community.weweb.io/u/danielmigizi)\ **Post date:** [August 31, 2024, 7:02pm UTC](https://community.weweb.io/t/how-to-get-multi-day-event-name-to-only-show-up-once-on-calendar/6873/17 "2024-08-31T19:02:48Z")
This looks great. Nice job. ---
**Author:** ![FHEXL](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/fhexl/32/13607_2.png) [@FHEXL](https://community.weweb.io/u/FHEXL)\ **Post date:** [September 1, 2024, 6:58pm UTC](https://community.weweb.io/t/how-to-get-multi-day-event-name-to-only-show-up-once-on-calendar/6873/18 "2024-09-01T18:58:08Z")
Great work. I like the detail of rounded corners on the start and end of an event, and repeating event details every first day off the following week. @raelyn can you shed some light about the approach to render the correct cells of the current month. Like the view of August 2024 the view starts with the three last days in July. Do you this in Weweb, or doe create the structure in the backend? Thanks in advance ---
**Author:** ![raelyn](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/raelyn/32/2803_2.png) [@raelyn](https://community.weweb.io/u/raelyn)\ **Post date:** [September 5, 2024, 2:22am UTC](https://community.weweb.io/t/how-to-get-multi-day-event-name-to-only-show-up-once-on-calendar/6873/19 "2024-09-05T02:22:28Z")
I created the structure in the back-end! 🙂 ---
**Author:** ![Broberto](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/broberto/32/5918_2.png) [@Broberto](https://community.weweb.io/u/Broberto)\ **Post date:** [September 5, 2024, 8:31am UTC](https://community.weweb.io/t/how-to-get-multi-day-event-name-to-only-show-up-once-on-calendar/6873/20 "2024-09-05T08:31:20Z")
As @raelyn said, backend logic in this case is the best approach. Of course, don’t create a calendar in your DB lmao - that would be super bad design, just use the functions to generate the dates from - to and sort the events into those dates. Otherwise you could do this with the `lookup()` function in the front-end by generating the calendar on front-end and sorting the items into days by using the lookup. [Next page](https://community.weweb.io/t/how-to-get-multi-day-event-name-to-only-show-up-once-on-calendar/6873.md?page=2)