Horizontal Events Widget for Events Calendar Pro — Now with Flexbox!

In the time since I posted my first tutorial about creating a horizontal event widget for Events Calendar Pro, I’ve become a huge fan of Flexbox. After all, what’s not to like? You get equal-height elements, vertical centering, and all kinds of other good things, plus you’re spared doing a lot of calculation and it cuts way down on media queries.

Since I recently had to make some other adjustments to my Events Calendar templates on the Radiant Body Yoga website, I decided it would be a good time to rewrite my widget to use Flexbox, and also a good time to put the code up on GitHub so people could download it without having to email me. I also consolidated all my Events Calendar CSS into the different CSS files that Modern Tribe recommends in its Themer’s Guide. In addition to being better for me and my client, these changes should make it a lot easier for the people who read these tutorials to figure out what to do.

What we’re aiming for

What I wanted (and had created before using display:inline-block combined with different item widths at different screen sizes) is a widget that displays 4 events across on desktop screens, two across on tablet screens, and in a single column on phone screens. This is actually fairly easy to achieve with flexbox; the only difficulty was for the in-between screen sizes (larger tablets and smaller laptops) which had room for 3 events across and wrapped the fourth onto a new line, so I had to write a media query to handle that. I was able to remove all the other media queries that I’d created for the horizontal widget, however.

Add featured images to your widget

If you followed the original tutorial, you’ve already done this part, but if this is your first go at showing featured images in your list widget, add the following code to your functions.php file. Substitute the image size you want to use for ‘event-large’.

function custom_widget_featured_image() {
	global $post;

	echo tribe_event_featured_image( $post->ID, 'event-large' );
}

add_action( 'tribe_events_list_widget_before_the_event_title', 'custom_widget_featured_image' );

Add a flex container in list-widget.php

You don’t want your widget title or your “View More” link to flex, so you need to wrap the actual event entries for the widgets into a div. That means modifying the list-widget.php file. You might already have modified this for one of the previous tutorials; if not, copy list-widget.php from /wp-content/plugins/events-calendar-pro/src/views/widgets and add it to /tribe-events/pro/widgets/.

Then enclose the foreach loop in your new div, like this. (I called mine event-widget-container.)

// Check if any posts were found.
if ( isset( $posts ) && $posts ) : ?>
<div class="event-widget-container">
	<?php foreach ( $posts as $post ) :
		setup_postdata( $post );
		do_action( 'tribe_events_widget_list_inside_before_loop' ); ?>

		<!-- Event  -->
		<div class="<?php tribe_events_event_classes() ?>">
			<?php tribe_get_template_part( 'pro/widgets/modules/single-event', null, $instance ) ?>
		</div>

		<?php do_action( 'tribe_events_widget_list_inside_after_loop' ) ?>


	<?php endforeach ?>
	</div><!--event-widget-container -->

Apply flexbox CSS to your new container

Remember to specify the class of the particular widget area that you want the horizontal layout for, or all of your event widgets will attempt to show horizontal events. In the case of the Radiant Body Yoga site, the class is .home-featured-events. Substitute the name of your own widget area.

.home-featured-events .event-widget-container {
	display:-ms-flexbox;
	display:-webkit-flex;
	display:flex;
	-ms-flex-wrap: wrap;
	    -webkit-flex-wrap: wrap;
	        flex-wrap: wrap;
	-ms-flex-pack:justify;
	    -webkit-justify-content:space-between;
	        justify-content:space-between;
}

Browser prefixes for flexbox are not required for the latest version of most browsers, but I’ve set the Autoprefixer plugin for Sublime Text 3 to go 5 versions back, because not everybody uses the latest version of the browser. If I wanted to be really thorough, I’d write some fallbacks, but I don’t think there are many visitors to this site who use IE6.

I have set flex-wrap to wrap so that I can get two columns and then one column of events. If I had set it to nowrap, then the items would shrink to their smallest allowable size (since items shrink by default) and the content would eventually overflow.

Because I want the events evenly spaced across their container, with no spaces on the outer left or outer right, I set justify-content to space-between.

Set flex items to grow

Every item in a flexbox has to have its flex property set. (This is shorthand for flex-grow, flex-shrink, and flex-basis.) The default values for flex are 0 (don’t grow) 1 (shrink) auto (content-width).

However, if you set flex items to shrink, they won’t wrap. (That’s right: there’s no shrink-wrap in flexbox.) So instead we need to set them to grow, so that they will fill up any extra space on the line after they wrap. And we set the flex-basis to a width in pixels. (You do have to do a little math here to figure out how wide the event entries can be and still fit four of them in your flex container, but after that the browser will calculate all the margins.)

That gave me the following CSS for the flex items:

.home-featured-events .type-tribe_events {
	-ms-flex: 1 0 275px;
	    -webkit-flex: 1 0 275px;
	        flex: 1 0 275px;
}

Fix the wrap problem on larger tablets

When I’d done this, the events looked great on a full-width screen, a phone, or a smaller tablet–say about 800 pixels. But between 960 pixels and 1200 pixels, I had three events on one line, all the same size, and one event below them at the full width of the container. This looked a bit awkward, though not noticeably more awkward then when all four events remained the same size but the last one appeared in a second row, which is what happens if both grow and shrink are turned off.

It’s possible there’s a better solution to this, but what I ended up doing was writing a media query to change the flex-basis from 275px to 430px on screens between 960px and 1200px wide.

@media only screen and (min-width: 961px) and (max-width:1201px) {
	.home-featured-events .type-tribe_events {
	-ms-flex: 0 1 430px;
	    -webkit-flex: 0 1 430px;
	        flex: 0 1 430px;
	}
}

Enjoy your widget!

Here are the screenshots of the widget as it now appears.

Get the code

You can now download all my Events Calendar code files for this tutorial from GitHub.

Get the Code