Overriding Modern event calendar Single Event Page

Overriding Modern event calendar Single Event Page: How it’s done?

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.

With Overriding Modern event calendar Single Event Page feature, as developer you can easily adjust themes and customize your website in 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 example place them on the /path/to/theme/single-mec-events.php or /path/to/child-theme/single-mec-events.php

Please Not: 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.

First, create a PHP file in the root folder of your theme with the name 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 these 2 functions.

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

WordPress Functions:

Here's a list of the main functions in MEC:

# Name Code
01 Title get_the_title(); / the_title();
02 Content get_the_content(); / the_content();
03 Thumbnail the_post_thumbnail(); / the_post_thumbnail('full');
04 Tag get_the_tags();
05 Label get_terms( array('taxonomy' => 'mec_label','hide_empty' => false,));
06 Category get_terms(array('taxonomy' => 'mec_category','hide_empty' => false,));
07 Event Color get_post_meta( get_the_ID(), 'mec_color', true );
08 Start Date get_post_meta( get_the_ID(), 'mec_start_date', true );
09 Start Hours get_post_meta( get_the_ID(), 'mec_start_time_hour', true);
10 Start Minute get_post_meta( get_the_ID(), 'mec_start_time_minutes', true);
11 Start AM/PM get_post_meta( get_the_ID(), 'mec_start_time_ampm', true);
12 End Date get_post_meta( get_the_ID(), 'mec_end_date', true );
13 End Hours get_post_meta( get_the_ID(), 'mec_end_time_hour', true);
14 End Minute get_post_meta( get_the_ID(), 'mec_end_time_minutes', true);
15 End AM/PM get_post_meta( get_the_ID(), 'mec_end_time_ampm', true);
16 MEC Comment get_post_meta( get_the_ID(), 'mec_comment', true );
17 Read More get_post_meta( get_the_ID(), 'mec_read_more', true);
18 More Info get_post_meta( get_the_ID(), 'mec_more_info', true);
19 Cost get_post_meta( get_the_ID(), 'mec_cost', true );
20 Event Excerpt get_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

Recommended Posts

22 Comment
Avatar for Doris Cooper
omniacreative March 14, 2020
| |

Hello - How can I override the template being used for the Modal for single events? I want to move the Featured Image into the right column of the layout instead of across the top under the date & time bar.

Avatar for Doris Cooper
omniacreative March 11, 2020
| |

Hello - I am currently able to pass the mec_start_date through my theme's custom post type grid element, however, the formatting of the date is reversed from what is shown in the actual event page. What is shown: 2020-06-20 Desired: June 20, 2020 Is there something I can do the format that better?

Avatar for Doris Cooper
jagunmolu March 4, 2020
| |

how do I get the booking form only on a seperate page

Avatar for Doris Cooper
jagunmolu March 4, 2020
| |

Hi, how do I setup event booking feature through API

Avatar for Doris Cooper
jagunmolu March 4, 2020
| |

Is there a way I can book an event through api, great plugin

Avatar for Doris Cooper
harlomedia December 16, 2019
| |

Hello, great plugin. We have a client using it and they have to comply with ADA standards and there is one issue they are getting flagged on preventing this that I was hoping you could help with. On the events page there are some widgets that use the <dd> element in the markup. The problem is that those elements are not allowed outside a the parent <dl> wrapper. Similar to using a <li> without its parent <ul> element. I was hoping I could update this as a template override in my theme but it's coming from 'modern-events-calendar-lite/app/skins/single/default.php'. Is there any hook or other way for us to edit this file in our theme rather than in the plugin folder? Or is it possible for you to apply a fix as it would be better practice to either use a different element than dd or to wrap it properly with its parent. Any help appreciated. Thank you,   Screenshot of section in question: https://drive.google.com/open?id=1rzwBkVhkTKySe7qF5iONBOnV75Mb8daI    

Avatar for Doris Cooper
sarmad December 4, 2019
| |

big thanks for this pluign, I am using this pluign there is an option of "hourly schedule" where we divided our event on multiple session i.e great feature but i want to customize it i need it database but i am unable to found yet, please help me in this regard where "hourly schedule session" are stored and which table? Thanks

Avatar for Doris Cooper
Shabin November 19, 2019
| |

Is there a way to show the event cost on the slider widget or any other shortcode?

Avatar for Doris Cooper
davidslee101 November 15, 2019
| |

How can I keep the default css code when I override MEC single events page?This is my code, which does not have any of the default css <?php get_header(); $single = new MEC_skin_single(); $single_event_main = $single->get_event_mec(get_the_ID()); $single_event_obj = $single_event_main[0]; // breadcrumb $single->display_breadcrumb_widget( get_the_ID() ); // Category Widget $single->display_category_widget($single_event_obj); // attendees widget $single->display_attendees_widget($single_event_obj); // Booking Module $single->display_booking_widget($single_event_obj,$single_event_main); // Cost Widget $single->display_cost_widget($single_event_obj); //Social $single->display_social_widget($single_event_obj); get_footer();

Avatar for Doris Cooper
Gladys September 5, 2019
| |

I love MEC, and using the widgets in the custom single event page works perfectly, the only trouble I have is that they are put out in English and not the page's language. If I use the inital single event page, the translation works fine, so how can I tweak this little problem? Thanks

Avatar for Doris Cooper
Tomaz August 30, 2019
| |

Hi, I would like to use MEC Single Page Layout, but I need to add a shortcode between the title and the content, is that possible? How would I do that? Thanks.