How-to: Update to The Events Calendar’s New V2 Views

by Utsab Karki, Senior WordPress Developer

Insights / Website Development / How-to: Update to The Events Calendar’s New V2 Views

Displaying a calendar on your website can be a great way to showcase and create awareness around your organization’s activities and events.

Not only does it help build brand equity, but it also helps with your site’s SEO by increasing user engagement.

When our clients ask for a full-featured calendar on their WordPress site – including the traditional month view, recurring events, lists of locations and organizers, and integration with ticketing, we always recommend The Events Calendar plugin. It’s long been one of our favorite WordPress plugins.

The first Events Calendar plugin was released in 2009, and since then, it’s been downloaded more than 37 millions times with more than 800,000+ active installations.

In January of 2020, The Events Calendar 5.0.0 was released with a significant redesign of the calendar views. Since the plugin was created more than a decade ago, the plugin authors decided to update it with a whole new foundation in order to adhere to higher coding standards, improve performance, security, and customizability.

These upgraded views were called “V2” and it was announced that the “legacy” views would only be support until August of 2021. That date has since been extended, but it’s been confirmed that when The Events Calendar version 6.0 is released, only the new views will be supported.

V2 and Legacy Views: The Key Differences

The most visually significant difference between the two views is in the design and styles of the calendar, event pages, widget and add-ons like the Filter Bar.

But the changes in the V2 views provide both a visual difference as well as an improvement in functionality and customizability, including easier access to different months and years, improved layouts for week and day views, and the ability to subscribe to events. Some of these features are only available when using the updated V2 views.

The differences in layout and functionality between the two sets of views do not affect any event data, so upgrading to the new views will not change anything about your individual events.

The “V2” views are only applied to the calendar on your website

• if you update The Events Calendar plugin to version 6.0 (which is currently only released as a beta), or
• if you manually update the views from the WordPress dashboard

While you could still keep the legacy views by not updating the plugin once version 6.0 is released, this could potentially introduce security risks to your website. Don’t be tempted to do this; keep your plugins updated.

There are 2 ways to update to the V2 views in the admin:

• Events -> Settings -> Upgrade
• Events -> Settings -> Display -> Check “Enable updated designs for all calendar views” next to “Use updated calendar views”

Customizing the V2 views

If you spent any time customizing the styles, templates, or look-and-feel of your calendar using the Legacy views, unfortunately those customizations will not carry over to the V2 views.

The new views use an entirely new set of templates, so be prepared to update them with your design changes. If you feel comfortable working with code, here are some some basic instructions and links to get you started.

Customizing CSS

There are a few different ways to customize the CSS for the V2 views so that your calendar adheres to your brand standards.

Adding Custom Styles in your stylesheets

The overriding styles can be added directly to the css file in your theme. Since the plugin stylesheets are added before the stylesheet from your theme, any styles added to your theme stylesheet will override the plugin styles.

Using the WordPress Customizer

WordPress has a built-in Customizer for adding styles; in the admin, access it under Appearance -> Customize and then select the Additional CSS option. You can add the styles here and they will override the default V2 styles. This option is good to use if there is very minimal CSS that needs to be added.

Overwriting CSS Files

A CSS file can be added inside the “tribe” folder of your theme, which would be loaded in addition to the plugin’s stylesheet. Any styles added in this CSS file will override the plugin’s styles.

Customizing Templates

It is never a good idea to make changes directly to a plugin.

While the changes would work, when the plugin gets updated, you will lose all of the changes you’ve made.

Instead, it is highly recommended that the template be overridden either:

• inside the theme folder itself (if you are making substantial updates) or
• using the template filters and actions in your theme’s functions.php file (if you are making small changes)

The templates you want to update are located in different locations depending on the version of the plugin you have (free or Pro) and whether or not you’re using the Classic Editor or the Gutenberg Block Editor, so use this resource to determine where the files are and where in your theme their replacements should go.

While filters and actions were available in previous versions of the plugin, in version 5.0, multiple entry points were created to inject and/or modify the content of the default views. Visit the Developer Documents for a comprehensive list of all the available hooks.

Successfully Transitioning to the V2 Views

Updating The Events Calendar’s legacy views to the new V2 views successfully requires taking stock of all of your current customizations and carefully applying them to the new code base. It isn’t especially difficult, but it can be time consuming.

If you have any questions regarding The Events Calendar and the V2 updates or need help updating the calendar on your website,  reach out to us. We would be more than happy to help you make the transition.