truncate event titles in month view, or how to keep the grid from expanding

[goannun]

I’m using Month view in my implementation of The Events Calendar Pro. Most of my event titles are long and this causes the calendar grid to expand to accommodate the long titles. I’m trying to find a CSS property to modify that will either a) let me truncate event titles in month view so they don’t cause the grid to expand, or b) make some other change that will keep the grid the exact same size.

I’d like the size of each square in month view to always be the same size as a month with no events, if that makes sense (i.e. nice small squares like in a Google Calendar month view, instead of elongated rectangles I get with long event titles).

[Brook]

Howdy goannun,

That’s totally possible. It would be difficult to do elegantly via CSS, but via a theme override or pasting a snippet in your theme’s functions.php you can easily accomplish this. Here is a snippet:

https://gist.github.com/elimn/f34c591aa307c901711c

Paste that following snippet at the top of your theme’s functions.php file. Replace the opening “<?php” with this snippet, as this snippet includes that opening tag.

Does that all make sense? Will that work for you? Please let me know.

Cheers!

– Brook

[goannun]

Thanks Brook, that’s exactly what I want. Unfortunately, it didn’t work 🙁 I activated a live preview of a few other themes I have, and it didn’t look any different in any of those either. My theme is ancient and in dire need of replacement, so I don’t want to rule it out as the culprit, but I’m open to other suggestions as to what else I can try.

[goannun]

Actually, it does work. I shortened the length value to 5 and it was more obvious that it was working. However, it still doesn’t accomplish what I’m really hoping to do, which is to keep the size of each square (day) in the calendar the same size.

I have a bit of CSS I’m using to reduce the font size of event titles in Month view, and it gets me part of the way there, but the month view grid still expands too much for my liking.

[Brook]

Thanks for getting back.

I can see where you are coming from. Your site is a bit narrower than usual due to the sidebar, so things get more scrunched than the default design works well with.

If you are largely worried about the uneven height then you could throw a little CSS in there to prevent titles from wrapping:

#tribe-events .tribe-events-calendar .tribe-events-month-event-title a {
white-space: nowrap;
}

Combine the above with a smaller “Month view events per day” setting, and you can keep the height/width extremely even. Typically the “Month view events per day” is set to 2 or 3 on sites like yours. This setting can be found in WP-Admin > Events > Settings > Display .

Or, you could force the mobile/responsive view on your site. You can do this by inserting a snippet like this into your functions.php:

function customize_tribe_events_breakpoint() {
return 9999;
}
add_filter( 'tribe_events_mobile_breakpoint', 'customize_tribe_events_breakpoint' );

Both of the above will hide a little bit of content from your month view, and the hidden content will be a click away to expand/view it. If you don’t wish to hide anything, then I’d recommend just the CSS I shared at the beginning of this post. It’s probably the best compromise available.

One of those options sound like a good plan?

Cheers!

– Brook

[goannun]

Thanks Brook, the CSS is perfect! You’re absolutely right about the content area of my theme being narrow, and that’s one of the things I’m looking to address in the new theme I’m working on. Thanks for your help with this!

[Brook]

That’s splendiferous news. Thanks for getting back!

– Brook

[Author]

Posts