All day events get styled ass multi day in month view.

“Is ‘multiday-event-bar’ being applied to ‘all day’ events a bug or expected behaviour? And is there a way to get rid of it for ‘all day’ events?”

That’s a good question! Let me check with the team and get back to you.

Thanks for bringing this up!

-James

Can you try adding this to your custom CSS to remove that background from all day events:

.tribe-events-calendar-month__multiday-event–width-1 .tribe-events-calendar-month__multiday-event-bar-inner {
background: none;
}

Hi James, thanks for getting back to me.

Unfortunately a background:none (or background-color: transparent) for tat class has no effect.

hrm yes looking at your front end I can see you have quite a bit of custom styling going on.

Try this:

.tribe_events_cat-boeken .tribe-events-calendar-month__multiday-event-bar-inner {
    background: rgb(255, 0, 0, 0.2);
    padding: 0;
    border-radius: 0!important;
}

You’ll need to do that for each category. Right now you already have a background color for the .tribe_ecents_cat-boeken so right underneath that just add this code I shared, and then copy/paste for each of your categories.

You might also want to play around with the border radius of the parent element:

.tribe-events .tribe-events-calendar-month__multiday-event--start .tribe-events-calendar-month__multiday-event-bar {
border-radius: 0!important;
}

• This reply was modified 2 years, 10 months ago by James Welbes.

Thanks for getting back to me again so quickly.
Using this to make the bars the same color as my categories works, it’s obviously not ideal, but a good enough work-around! ??

The only thing I don’t like about the end result is the fact that the titles for all-day events get shortened to a single line with an ellipsis at the end, while regular events get the full title displayed over multiple lines. Is there a way to display the full titles for these events?

Scratch the previous comment.

.tribe-events .tribe-events-calendar-month__multiday-event-bar-title {
	white-space: initial;
}

Fixed that issue.

Now I’m only looking for the class to set the bar color for past events.

And for some reason the dark mode isn’t playing nice with the “.tribe_events_cat-boeken .tribe-events-calendar-month__multiday-event-bar-inner”

Is there any chance you could point me to the class string that would enable me to change the background color for the inner bar for past events for specific categories?

you might want to try

.tribe-events-calendar-month__multiday-event–past

That will work on all day/multi day events, which it looks like all your events are.

So combine that with the category class from before and try something like:

.tribe_events_cat-boeken.tribe-events-calendar-month__multiday-event--past .tribe-events-calendar-month__multiday-event-bar-inner {
    background-color: rgb(255, 0, 0, 0.2);
}

That did the trick.
Thanks so much for your help ??

Great, glad I could help! Have a great rest of the week!