Featured Calendar: KCRW Events

Many people know Santa Monica-based KCRW as a mecca for music from around the globe, with the Morning Becomes Eclectic show and livestreamed performances. But today, we’re going to take a closer look at the radio station’s awesome events calendar, which provides a great example of how you can customize templates in The Events Calendar.

KCRW’s calendar is displayed in photo view—a feature that’s available in the Events Calendar Pro add-on. Take a look at their photo view (on the left) compared to the standard photo view. It’s clear that they’ve customized the calendar to suit their needs.

Let’s break down those customizations!

The calendar navigation has been removed

It sounds a little counterintuitive to remove a feature like navigation, but for KCRW calendar, it makes a lot of sense. They showcase events using a single view because the rest of the available calendar views don’t have the same impact.

Take list view, for example: What would list view do for this calendar that photo view can’t? Photo view provides more room to showcase events “above the fold” of the page. No other calendar view can accomplish this (even though those other views have their benefits in other cases).

This is a good example of how preventing visitors from switching between views can sometimes result in a better user experience.

A slider showcases featured events

What a cool idea. There are dozens of upcoming events on the calendar and they want to bring some of them to forefront. A slider (aka carousel) does that extremely well. In this case, KCRW is using the WP Slick Slider and Image Carousel plugin, which is available for free in the WordPress plugin directory.

How did they get it above the calendar? They could have used a template override for either the photo view or main calendar template. The Slick Slider documentation shows how a slider can be added to any WordPress template like this:

echo do_shortcode('[slick-slider]');

This is also a shortcode, which means it can also be added to any page or post by dropping [slick-slider] into the editor.

But that’s only one part of how this slider works. KCRW uses the slider to display featured events; The Events Calendar lets you mark events as “featured,” and it’s also possible to create a “Featured” event category and file events there. Slick Slider is able to fetch events from a specific category or multiple categories:

[slick-slider category="category_ID"]

Highlighting events in a slider above the calendar is a nice touch that fits with the look and feel of the rest of the site without causing too much distraction.

The date icon got a makeover

Did you notice it?

This is an awesome way to call attention to the date of the event! It’s not flashy. There’s nothing super tricky going on. It’s a simple, clean and effective way to draw attention to the most important piece of information for their events.

You can do something similar!

How’d we do that? Add the following CSS to your theme’s style.css file or, better yet, override the calendar’s styles with your own stylesheet. That’s the best way to add styles to your theme without worrying that you’ll lose changes when future updates to your theme or plugins are released.

/* We'll need this to contain the date tag when we set it to absolute positioning */
.tribe-events-pro .tribe-events-pro-photo__event-details-wrapper {
  position: relative;
}

/* Re-position the date tag and give it a background */
.tribe-events-pro .tribe-events-pro-photo__event-date-tag {
  background: #fff;
  padding: 5px;
  position: absolute;
  right: 0;
  top: -2rem;
  width: 60px;
}

/* Adds a border and some breathing room around the date */
.tribe-events-pro .tribe-events-pro-photo__event-date-tag-datetime {
  border: 1px solid #c5c5c5;
  padding-top: 3px;
}

/* Updates the color of the month name */
  .tribe-events-pro .tribe-events-pro-photo__event-date-tag-month {
  color: #fa5a41
}

Keep in mind that all themes are different, and the styles in one theme might make things look different from another theme. In other words, your mileage with this trick may vary. 🤷‍♂️

A cool custom calendar is music to our ears ♫

Kudos to KCRW for making their mark on The Events Calendar by incorporating cool extra features and customizations to make events pop!

We hope this calendar sparks inspiration for your own. If you’re ready for a calendar tune-up, make it easier with the help of plug-and-play tools like The Events Calendar and Events Calendar Pro.