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:
But how do I get the event name to only show up once, like such:
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.
+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.
I made my own but you’ll need your own calendar table in the backend
@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.
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?
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
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!
or
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.
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
I set title and time of middle and end event to display none.
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 
How did you create it? Is it based on an external library? Are you able to share a screenshot?
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!
This looks quite clean, well done!
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.
Very nice! this is vanilla Weweb (with use of the date plugin perhaps) , or did you use some Custom Javascript or alike?
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
This looks great. Nice job.
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
I created the structure in the back-end! 
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.
