This is a solution for creating a format date filed using Slider Revolution by ThemePunch and The Events Calendar by Modern Tribe.

Meta Code Image

Format Date Requierment

I use the Avada theme by Theme Fusion and it comes with Slider Revolution. I recently had the desire to display a slider on the home page to advertise some events that are coming up, and naturally, one would think an important aspect of the slider would be the date.

Out of the box Slider Revolution comes with an option called {{meta:somemegatag}} or more specifically {{meta:_EventStartDate}}

This option seemed the appropriate and easy solution to display the date.

Not Exactly

Sure enough using the meta field “_EventStartDate” would yield a very simple date result but the date format was not exactly what I was looking for. This lead me to research for a solution that would allow me to manipulate the date in the format I desired.

shortcode for event_date

Using _EventStartDate

first example for event calendar


Since I had the date I figured all I had to do next was understand how to format the date of the meta information inside of the slider, easy-peasy right?

To my surprise, I couldn’t find anything that would allow me to control the output of _EventStartDate. I researched this and googled it for weeks and was not able to come up with a viable and simple solution. Everything I tried would just not work.

Modern Tribe suggested using a function called tribe_get_start_date which you can apply the date format to, so I decided to give that a whirl and create a short code by following some simple instructions from Bobby Bryant (you should definitely check out his YouTube series!).

The Format Date Code

I came up with some very simple code and if you paste this code into your funtions.php file (in your CHILD THEME) you should be able to format the results.

Copy to Clipboard

You should be able to use this short code [event_date id={{id}}] inside of Slider Revolution to get a result with a date with a more “reader friendly” format.

(Note that the id={{id}} is required)

Shortcode Text

Shortcode (id={{id}} must be used)

Default Shortcode Results

Final Results using shortcode

And if this isn’t exactly what you are looking for you are able to format the date anyway you want using the Date & time format for PHP within the short code itself by adding the “format” option.

Simple Examples:

For some simple examples:

[event_date id={{id}} format=’F j @ gA’] would result in:  December 31 @ 8AM

first example for event calendar

[event_date id={{id}} format=’m/j/y’] would result in: 12/31/16

2nd example for event calendar

I also added the display and timezone option if you wanted to use those but I have not found a use myself. I am sure that this code can be cleaned up and made more efficient but I just wanted to share my quick solution for anyone looking for one.

Please feel free to contribute a more robust version of the code if you would like!

Important note, I believe that Slider Revolution 5.3 may be the minimum version required to use this short code as I believe they added the {{id}} option in that version.

Happy Coding!