Overriding Single Event Page

In this article, we will explain the process of overriding single event page. 

MEC is created by developers for developers! And it’s highly developer-friendly so you can simply override MEC templates in your theme and make it compatible with your theme style or use MEC filters/actions to customize it.

Overriding Single Event Page

With the Overriding Modern Events Calendar Single Event Page feature, as a developer, you can easily adjust themes and customize your website in the best possible way.

MEC has a number of template files in /path/to/modern-events-calendar/templates/, you can simply override them in your theme or child theme.

For instance, place them on the /path/to/theme/single-mec-events.php or /path/to/child-theme/single-mec-events.php.

Note: If you use the lite version of MEC insert -lite after “modern-events-calendar”.Let’s learn how to build an exclusive Single Event Page for our events.

Creating a PHP file in the theme folder

First, create a PHP file in the root folder of your theme named single-mec-events.php.

Then, in coding, call the main WordPress functions of get_header and get_footer.

For example:



Now, you can place all your desired content between those 2 functions.

Supported PHP functions

Before getting any necessary fields for MEC, it is worth mentioning that the MEC plugin supports the main functions like getting titles, content, categories, tags, and featured images, however, loading other items needs to be done using the defined functions in 

01Titleget_the_title(); / the_title();
02Contentget_the_content(); / the_content();
03Thumbnailthe_post_thumbnail(); / the_post_thumbnail(‘full’);
05Labelget_terms( array(‘taxonomy’ => ‘mec_label’,’hide_empty’ => false,));
06Categoryget_terms(array(‘taxonomy’ => ‘mec_category’,’hide_empty’ => false,));
07Event Colorget_post_meta( get_the_ID(), ‘mec_color’, true );
08Start Dateget_post_meta( get_the_ID(), ‘mec_start_date’, true );
09Start Hoursget_post_meta( get_the_ID(), ‘mec_start_time_hour’, true);
10Start Minuteget_post_meta( get_the_ID(), ‘mec_start_time_minutes’, true);
11Start AM/PMget_post_meta( get_the_ID(), ‘mec_start_time_ampm’, true);
12End Dateget_post_meta( get_the_ID(), ‘mec_end_date’, true );
13End Hoursget_post_meta( get_the_ID(), ‘mec_end_time_hour’, true);
14End Minuteget_post_meta( get_the_ID(), ‘mec_end_time_minutes’, true);
15End AM/PMget_post_meta( get_the_ID(), ‘mec_end_time_ampm’, true);
16MEC Commentget_post_meta( get_the_ID(), ‘mec_comment’, true );
17Read Moreget_post_meta( get_the_ID(), ‘mec_read_more’, true);
18More Infoget_post_meta( get_the_ID(), ‘mec_more_info’, true);
19Costget_post_meta( get_the_ID(), ‘mec_cost’, true );
20Event Excerptget_the_excerpt();

Modern Events Calendar Widgets

If you need to load the MEC’s widgets, please proceed as follows:
You should first add the following code in the PHP file “single-mec-events.php” you placed in the theme’s root directory.

$single = new MEC_skin_single();
$single_event_main = $single->get_event_mec(get_the_ID());
$single_event_obj = $single_event_main[0];

Then call the widgets:

// attendees widget
// Booking Module
// breadcrumb
$single->display_breadcrumb_widget( get_the_ID() );
// Category Widget
// Cost Widget
// Countdown Widget
// Date Widget
// Export Widget
// Google map widget
// Hourly
// Label Widget
// Local Time widget
// Location Widget
$single->display_location_widget($single_event_obj); // Show Location
$single->display_other_location_widget($single_event_obj); // Show Additional Locations
// More info widget
// next/prev widgets
// Organizer Widget
$single->display_organizer_widget($single_event_obj); // show Organizer
$single->display_other_organizer_widget($single_event_obj); // additional Organizers
// QR widget
// Register Button
// Speakers widget
// Time Widget
// Weather Widget
// Event Hourly Schedule

Report Out Dated Content

If you think the content of this page does not reflect updated information, please let us know.

Report Now
latatazaza August 24, 2022
| |

i ve a pb with this two vars : get_post_meta( get_the_ID(), ‘mec_end_time_minutes’, true); get_post_meta( get_the_ID(), ‘mec_start_time_minutes’, true);
when i choose a hour like this in the back office  8:05 AM he returns 8:5 on the front 
Other ? is there a var in oder to have the duration of an event ?

nipapis July 21, 2022
| |

Anyone idea about displaying custom field? 
I’ve tried this but it doesn’t worked
get_post_meta( get_the_ID(), ‘mec_event_data_event_field_1’, true );
Do anyone have find how to get custom field data to single event? Let me know here on reply.

behaugabook July 12, 2020
| |

IS there a shortcode for the event post (single event)? I want to be able to use my website skin and header for this page. 

cristo66 July 1, 2020
| |

With recurring weekly events (eg. classes), is it possible to have the booking modal date dropdown default to the actual date selected, rather than just the next available?

caroline June 9, 2020
| |

Hi, working with the modern event calendar light is great! (I’m planning to update to the Pro Version soon!)
I am currently overriding the single-mec-events.php file. I use the widgets described above and some of them are not correctly translated into German, even though the corresponding translation file exists. (I already checked using Poedit.)

titles of the following widget function do not translated correctly:display_date_widget(), display_time_widget(), display_cost_widget(), display_location_widget(), display_social_widget()
The main

title of the display_organizer_widger() is correctly translated, but the

titles (Phone, Email, Website) are not translated.
For the display_date_widget() and the display_time_widget() I found a (dirty) fix by correcting the translation command on line 653 and 752 in the single.php file (modern-events-calendar-lite/app/skins/single.php).
Here is my solution to get the correct translation for the display_time_widget() function.
Original code (line 752):

My solution:

Would be great, if you could fix these issues soon. 🙂