Displaying Multiple Rows of Events in Events Calendar Pro Widget

Because Modern Tribe has been kind enough to list my tutorials about The Events Calendar and Events Calendar Pro on their support site, I get a lot of inquiries about how to do this or that…inevitably leading to more tutorials. At this rate I might end up with a book.

In any case, I got an inquiry from Johannes in Denmark a few days ago. He was having trouble getting his events to show up horizontally on the Dit Gentofte website. He set me up as a (temporary) admin on the site so I could fix the problem–quicker than having an email discussion and sending files back and forth, certainly. Of course, it did mean navigating the WordPress admin in Danish, which I don’t speak at all, but fortunately the icons clued me in. (Note: the Danish for “widgets” is “widgets.”)

First, I checked Events Calendar Pro for a place to enter custom CSS–I couldn’t remember whether there was one. There isn’t. Then I checked the theme for a place to enter custom CSS. Nothing there, either. So I installed the Simple Custom CSS plugin, which I use a lot. (Once I’ve finalized my customizations for clients, I usually just put them into the stylesheet.)

Then I spent some time with good old “inspect element”, checking out the actual class names surrounding the events on the page. Modern Tribe includes all of their event widget classes in a nice tutorial on styling widgets. I don’t know whether Johannes found that before contacting me; I only found it now that I’m writing this. I do tend to bash at a thing instead of researching it sometimes.

The div holding each event is .tribe-mini-calendar-event. (Why the list widget outputs a div named for the calendar, I’m not sure. Remind me to ask the folks from Modern Tribe sometime.) That’s the div we have to modify in order to make events line up in a row instead of a list.

I applied the CSS I’d used for my first Events Calendar Pro widget tutorial:

.tribe-mini-calendar-event {
  display:inline-block;
  width: 22%;
  margin-right: 3%;
  float: left;
  border:none;
}

It worked…except for the fifth event in the list. Instead of wrapping neatly around to create a new row, it sort of bumped along on the right side of the screen under the fourth event. Yuck!

I spent more time tinkering with nth-child() solutions than I should have, and found that whatever I put in the parentheses (e.g. 4n+1), it either applied itself to all of the events, or to none of them. This was rather annoying.

So I went and checked back to see how I’d implemented the two-layer grid of featured episodes on the home page of the FIR Podcast Network site. (That grid comes straight from a tutorial by Sridhar Katakam. Paid access only. I’m not an affiliate, but seriously, if you work with the Genesis framework you need to subscribe to Sridhar’s tutorials.)

What I ended up with, in contrast to my original solution with margins around each item, was the use of box-sizing:border-box and padding–and most importantly, a fixed height for each event.

.tribe-mini-calendar-event {
  box-sizing:border-box;
  width: 25% !important;
  padding:10px;
  float:left !important;
  margin:0 !important;
  border-bottom: none !important;
  height:340px !important;
}

The problem with rows not wrapping properly turned out to be an issue of height, not width. Some events, and some event locations, had long names that wrapped onto a second line, making those event entries taller than the others. This, in turn, bumped the floating elements around in ways that weren’t at all what I wanted. Making all the events the same height avoids that problem. I set the widget to display 8 events and got this:

Once that was working, all I needed to do was set up the media queries:

@media only screen and (max-width: 800px) {
  .tribe-mini-calendar-event {
    width:50% !important;
    height: 250px !important;
  }
}

@media only screen and (max-width: 480px) {
    .tribe-mini-calendar-event {
    width:100% !important;
    float:none !important;
    height:auto !important;
  }
}

A note on those pesky !important declarations. Those were necessary to get my custom CSS to load after the plugin CSS. The final solution should be to create a special tribe-events.css file and put it into the /tribe-events/ folder in your theme folder. I didn’t have FTP access to the site, however, so I made do.

So if you need your Events Calendar Pro advanced list widget to display more than one row of events, now you know how to do it.