March Release: Responsive and Recurrence!

March Updates from Modern Tribe on Vimeo.

All releases are exciting, but this month’s is particularly so. We’re really excited to finally be releasing a fully responsive solution for Events Calendar users. There’s a quick preview in the video above, and some specifics following.  You’ll be happy to know that we are shipping responsive in both the free and PRO plugins. So for all of you users out there who are rocking the CORE plugin, you’ll be getting responsive views too!

We always strive to do releases that create the least amount of work for our users as possible. Because responsive enhancements are primarily a front facing feature, there are updates to the views themselves. If you’ve done some customizations and overrides, you’ll want to make sure that you’re leaving yourself ample time to do the upgrade in a safe and secure fashion.

The other big note in this release has to do with recurring events. We’ve fully rearchitected how recurring events work. You won’t notice a huge difference in this release, but the updates will allow us to do some really cool things in the future including custom recurrence and finally getting recurring events to work with our ticketing plugins.

Pre Release Testing?

If you’ve done some customizations and want to grab a pre-release version of this release to test them out beforehand, let us know and we’ll try to work something out. Email pro @ tri.be for more info.

Breakpoints for CSS / JS

The default breakpoint at which Tribe Events JS / CSS kicks in for smaller devices is 768px. This breakpoint can be customized by utilizing the tribe_events_mobile_breakpoint filter or the responsive JS / CSS can also be removed by using the tribe_events_kill_responsive filter. A body class of tribe-is-responsive is included if the breakpoint hasn’t been killed and a body class of tribe-mobile is added once you hit that breakpoint.

CSS

Aside from the retina / hdpi media queries (used for icons only), the responsive CSS has been broken into it’s own stylesheet. You will find that each stylesheet option, except for skeleton, includes a mobile stylesheet and for both core and pro plugins. Lastly, an additional media query has been included for a max-width of 600px to deal specifically with some of the tickets add-ons and photo view in a couple of the mobile stylesheets.

JS

Javascript is used as a helper for some of the mobile tidbits, and is heavily used for both month and week views. We have also taken an important and significant step in utilizing javascript templates to power the mobile areas for the month and week views as well as to power the overall plugin tooltips. If you have overridden views/month/content.php or views/pro/week/content.php you will need to update your templates with the latest. Lastly, if you have overridden the markup of your tooltips, you’ll need to port these over to the JS template.

Thank You

As always, once we release this update there will be a corresponding update to the Themer’s guide. You’ll want to check over any modifications made, whether that is template or style overrides, or if you’ve also done your own mobile version of Tribe Events, and test them all against the new updates. You’ll definitely need to update your overridden templates, and potentially the default breakpoint and/or mobile CSS and/or overridden CSS to add the default responsive CSS, but as always you can turn to support if you have any other questions during this process.