Fixing Overlapping Events in Week View

[Cody Sisco]

I’ve seen this topic come up several times in the forum. Most recently, Nico posted about adding new CSS classes that allow control over which events to hide. See here: https://theeventscalendar.com/support/forums/topic/reducing-width-of-events-in-weekly-calendar-view-when-there-are-overlaps/#post-1343793

This isn’t really a fix though. The problem is that when you have multiple events occurring at the same time, the Week View handles them clumsily. The Month view handles this elegantly by stacking the events. It seems like the same feature would be useful for the Week view. Is this feature in development? I am a PRO Subscriber.

[Victor]

Hi Cody!

Thanks for reaching out to us.

Let me try to help you with that topic.

We don’t currently have a similar feature scheduled that will address this issue like in the month view. As you pointed out, in our latest release of the plugin we have included some classes to the code so it’s easier to customize and style.

I understand this is something we could do better in the future. We have a User Voice here > https://tribe.uservoice.com/ where you can post a new idea about this so other users can vote for it and we’ll take it into account when the time for building new features come.

If you have an idea on how this issue could be addressed, feel free to to let me know and I’d be happy to help you elaborate it further.

On the other hand, if you need some help with overcoming this issue in your site by customizing the template, I’d also be happy to point you in the right direction as much possible.

Don’t hesitate to ask other questions 🙂

Best,
Victor

[Cody Sisco]

Hi Victor,

Thank you for your response. I searched through the User Voice forum, but I didn’t find this exact topic, so I added a new one. The subject is: “Display simultaneous events in Week View without overlap”

I think that Month View handles overlapping events well, so fixes and customizations that move us in that direction are beneficial.

I’d like to take you up on your offer to help customize my website templates and styling. Is there CSS I can add to my custom style sheet to prevent the events in Week View from overlapping? This is the current situation: http://www.bookswell.club/events/week/

Alternatively, I’d be happy to make changes so that Week View actually just duplicates the Month View but filters out weeks other than the current one. Is this possible? Is it a complicated fix?

Many thanks in advance,

Cody

[Victor]

Hi Cody!

Thanks for posting that in our user voice!

Please note that we are limited in how much we can support customizations like this one. That said, we always like helping out and at least point you in the right direction as best possible.

I’d be happy to take a look at your week template and see if I can find some CSS snippet to accomodate the overlapping events.

Alternatively, I’d be happy to make changes so that Week View actually just duplicates the Month View but filters out weeks other than the current one. Is this possible? Is it a complicated fix?

I’m not sure I understand what you mean by filtering out weeks other than the current one. Do you mean you’d like to remove the times on the week view? Could you explain this further?

Thanks,
Victor

[Cody Sisco]

Hi Victor,

I’m using the standard week template for Events Calendar Pro. Here is the default Week view: http://www.bookswell.club/events/week/ Is there an easy CSS styling that would help make the overlapping events legible.

Regarding the other point, sorry if it wasn’t clearer. It seems to me that Week View could actually be presented simply as a subset of Month View, with only the current week displaying. So instead of all of September showing up, only the current week appears, but with the same styling, layout, etc. as Month View.

Thanks for any help you can provide.

Cody

[Victor]

Hi Cody!

Thanks for clearing that out.

The approach you are thinking for the week view might be doable but would definitely involve several tweaks and not so easy customization. However, you should add this idea to the user voice you posted, if you haven’t already done so.

I’ve come up with some CSS styles that will improve the experience when navigating the week view. It certainly can be improved but it is a good starting point. You should place the following code into your theme’s styles.css file or using the WordPress customizer by going to your wp-admin > Appearance > Customize > Additional CSS

https://gist.github.com/vicskf/6361b229dc7e2d6aa9e6283781032db1

I hope it helps! Let me know how it works for you.

Best,
Victor

[Support Droid]

Hey there! This thread has been pretty quiet for the last three weeks, so we’re going to go ahead and close it to avoid confusion with other topics. If you’re still looking for help with this, please do open a new thread, reference this one and we’d be more than happy to continue the conversation over there.

Thanks so much!
The Events Calendar Support Team

[Author]

Posts