Modern Events Calendar with Oxygen Builder

A How To.txt

Set up the Single Event template:

- Go to Oxygen > Templates and create a template applied to Singular > mec-events
- Copy the JSON from "single-event.json" and paste it into the +JSON box on the template
- You can then edit the template in Oxygen and move the items around as needed

Set up the Events Archive template:
- Go to Oxygen > Templates and create a template applied to Archive > Post Types > Events
- Copy the JSON from "event-archive.json" and paste it into the +JSON box on the template

Set up the Event Category & Label Archives template:
- Go to Oxygen > Templates and create a template applied to Archive > Taxonomies > all mec_category and all mec_label
- Copy the JSON from "event-category.json" and paste it into the +JSON box on the template

event-archive.json

{"children":[{"id":2,"name":"ct_section","options":{"ct_id":2,"ct_parent":0,"selector":"section-2-95","original":[],"nicename":"Section (#2)"},"depth":1,"children":[{"id":3,"name":"ct_code_block","options":{"ct_id":3,"ct_parent":2,"selector":"code_block-3-95","original":{"width-unit":"%","width":"100","code-php":"<?php\n\/\/ if Modern Events Calendar is not active, abort.\nif ( ! class_exists( 'MEC' ) ) {\n\treturn;\n}\n?>\n\n<div id=\"<?php echo apply_filters('mec_archive_page_html_id', 'main-content'); ?>\" class=\"<?php echo apply_filters('mec_archive_page_html_class', 'mec-container'); ?>\">\n\n  <?php do_action('mec_before_main_content'); ?>\n\n  <?php if(have_posts()): ?>\n\n  <?php do_action('mec_before_events_loop'); ?>\n\n  <?php while(have_posts()): the_post(); $title = apply_filters('mec_archive_title', get_the_title()); ?>\n\n  <?php the_content(); ?>\n\n  <?php break; \/** Only one post should be shown **\/ endwhile; \/\/ end of the loop. ?>\n\n  <?php do_action('mec_after_events_loop'); ?>\n\n  <?php endif; ?>\n<\/div>\n\n<?php do_action('mec_after_main_content'); ?>","code-css":".mec-container {\n\twidth: 100%;\n\tpadding-left: 0;\n\tpadding-right: 0;\n}\n\n@media only screen and (min-width: 1200px) {\n\n\t.mec-container {\n\t\twidth: auto;\n\t\tpadding-left: 0;\n\t\tpadding-right: 0;\n\t}\n\n}"},"nicename":"Code Block (#3)","activeselector":false},"depth":2}]}],"id":0,"name":"root","depth":0,"meta_keys":[],"outerTemplateData":{"edit_link":"https:\/\/oxygen-q9gpc753fn8yl.oxygen-demo.qsandbox.org\/wp-admin\/post.php?post=29&action=edit","template_name":"Main"}}

event-category.json

{"children":[{"id":2,"name":"ct_section","options":{"ct_id":2,"ct_parent":0,"selector":"section-2-96","original":[],"nicename":"Section (#2)"},"depth":1,"children":[{"id":3,"name":"ct_code_block","options":{"ct_id":3,"ct_parent":2,"selector":"code_block-3-96","original":{"width-unit":"%","width":"100","code-php":"<?php do_action('mec_before_main_content'); ?>\n    \n    <div id=\"<?php echo apply_filters('mec_category_page_html_id', 'main-content'); ?>\" class=\"<?php echo apply_filters('mec_category_page_html_class', 'container'); ?>\">\n    <?php if(have_posts()): ?>\n\n        <?php do_action('mec_before_events_loop'); ?>            \n            \n            <?php $MEC = MEC::instance(); echo $MEC->category(); ?>\n\n        <?php do_action('mec_after_events_loop'); ?>\n\n    <?php endif; ?>\n    <\/div>\n\n<?php do_action('mec_after_main_content'); ?>"},"nicename":"Code Block (#3)","activeselector":false},"depth":2}]}],"id":0,"name":"root","depth":0,"meta_keys":[],"outerTemplateData":{"edit_link":"https:\/\/oxygen-q9gpc753fn8yl.oxygen-demo.qsandbox.org\/wp-admin\/post.php?post=29&action=edit","template_name":"Main"}}

single-event.json

{"children":[{"id":18,"name":"ct_section","options":{"ct_id":18,"ct_parent":0,"selector":"section-18-484","original":{"globalConditionsResult":true,"container-padding-top":"20","container-padding-bottom":"0"},"activeselector":false,"nicename":"Section (#18)"},"children":[{"id":6,"name":"ct_code_block","options":{"ct_id":6,"ct_parent":18,"selector":"code_block-6-484","original":{"globalConditionsResult":true,"code-php":"<?php\n\t$single = new MEC_skin_single();\n\t$single_event_main = $single->get_event_mec(get_the_ID());\n\t$single_event_obj = $single_event_main[0];\n\n\/\/ breadcrumb\n$single->display_breadcrumb_widget( get_the_ID() );\n\n?>","width-unit":"%","code-css":".mec-single-modern .mec-single-event-bar {\n  margin-top: 0;\n  margin-bottom: 30px;\n}\n\n@media only screen and (min-width: 960px) {\n  \n\t.mec-single-modern .col-md-4 .mec-frontbox {\n\t\tmargin-left: 0;\n  }\n\n}\n\n.mec-single-modern .col-md-4 .mec-frontbox {\n  margin-top: 20px;\n\tmargin-bottom: 20px;\n}"},"activeselector":false,"ct_content":"","nicename":"Code Block (#6)"},"depth":0}],"depth":1},{"id":22,"name":"ct_div_block","options":{"ct_id":22,"ct_parent":0,"selector":"div_block-22-484","original":{"globalConditionsResult":true},"classes":["mec-wrap"],"activeselector":"mec-wrap","nicename":"Div (#22)"},"children":[{"id":3,"name":"ct_section","options":{"ct_id":3,"ct_parent":22,"selector":"section-3-484","original":{"globalConditionsResult":true,"tag":"article","container-padding-top":"30"},"activeselector":"mec-single-modern","classes":["mec-single-event","mec-single-modern"],"nicename":"Section (#3)"},"children":[{"id":7,"name":"ct_new_columns","options":{"ct_id":7,"ct_parent":3,"selector":"new_columns-7-484","original":{"globalConditionsResult":true},"activeselector":false,"nicename":"Columns (#7)"},"children":[{"id":8,"name":"ct_div_block","options":{"ct_id":8,"ct_parent":7,"selector":"div_block-8-484","original":{"width":40,"width-unit":"%","globalConditionsResult":true},"activeselector":"col-md-4","classes":["col-md-4"],"nicename":"Div (#8)"},"children":[{"id":11,"name":"ct_code_block","options":{"ct_id":11,"ct_parent":8,"selector":"code_block-11-484","original":{"globalConditionsResult":true,"code-php":"<?php\n$single = new MEC_skin_single();\n$single_event_main = $single->get_event_mec(get_the_ID());\n$single_event_obj = $single_event_main[0];\n\n\/\/ Organizer Widget\n$single->display_organizer_widget($single_event_obj); \/\/ show Organizer \n$single->display_other_organizer_widget($single_event_obj); \/\/ additional Organizers\n\n\/\/ Speakers widget\n$single->display_speakers_widget($single_event_obj);\n\n\/\/ Local Time widget\n$single->display_local_time_widget($single_event_obj);\n\necho '<div class=\"mec-event-meta mec-color-before mec-frontbox\">';\n\t\/\/ Location Widget\n\t$single->display_location_widget($single_event_obj); \/\/ Show Location\n\t$single->display_other_location_widget($single_event_obj); \/\/ Show Additional Locations\n\n\t\/\/ Category Widget\n\t$single->display_category_widget($single_event_obj);\necho '<\/div>';\n?>","width-unit":"%","width":"100"},"activeselector":false,"ct_content":"","nicename":"Code Block (#11)"},"depth":0}],"depth":3},{"id":9,"name":"ct_div_block","options":{"ct_id":9,"ct_parent":7,"selector":"div_block-9-484","original":{"width":60,"width-unit":"%","globalConditionsResult":true},"activeselector":false,"nicename":"Div (#9)"},"children":[{"id":10,"name":"ct_code_block","options":{"ct_id":10,"ct_parent":9,"selector":"code_block-10-484","original":{"globalConditionsResult":true,"code-php":"<?php\n\n$single = new MEC_skin_single();\n$single_event_main = $single->get_event_mec(get_the_ID());\n$single_event_obj = $single_event_main[0];\n\necho '<div class=\"mec-single-event-bar\">';\n\t\/\/ Date Widget\n\t$single->display_date_widget($single_event_obj);\n\n\t\/\/ Time Widget\n\t$single->display_time_widget($single_event_obj);\n\n\t\/\/ Cost Widget\n\t$single->display_cost_widget($single_event_obj);\n\n\t\/\/ Label Widget\n\t$single->display_label_widget($single_event_obj);\necho '<\/div>';\n\n?>","width":"100","width-unit":"%"},"activeselector":false,"ct_content":"","nicename":"Code Block (#10)"},"depth":0},{"id":12,"name":"ct_headline","options":{"ct_id":12,"ct_parent":9,"selector":"headline-12-484","original":{"globalConditionsResult":true,"font-size":"36","line-height":"1.3"},"activeselector":false,"ct_content":"<span id=\"ct-placeholder-13\"><\/span>","nicename":"Heading (#12)"},"children":[{"id":13,"name":"ct_span","options":{"ct_id":13,"ct_parent":12,"selector":"span-13-484","ct_content":"[oxygen ct_sign_sha256='5a247a25b959924ec7c4d3b19fe4a11fd22a099653e74cfe46ee294fa8a437b4' data='title' ]","nicename":"Span (#13)"},"depth":0}],"depth":0},{"id":14,"name":"ct_text_block","options":{"ct_id":14,"ct_parent":9,"selector":"text_block-14-484","original":{"globalConditionsResult":true,"margin-bottom":"40"},"activeselector":false,"ct_content":"<span id=\"ct-placeholder-15\"><\/span>","nicename":"Text (#14)"},"children":[{"id":15,"name":"ct_span","options":{"ct_id":15,"ct_parent":14,"selector":"span-15-484","classes":["oxy-stock-content-styles"],"ct_content":"[oxygen ct_sign_sha256='9b4f07ff6af037c0fd972f269f8ed7b57f4af6c54b69007c5cfad2ca8174056f' data='content' ]","nicename":"Span (#15)"},"depth":0}],"depth":0},{"id":16,"name":"ct_code_block","options":{"ct_id":16,"ct_parent":9,"selector":"code_block-16-484","original":{"globalConditionsResult":true,"code-php":"<?php\n$single = new MEC_skin_single();\n$single_event_main = $single->get_event_mec(get_the_ID());\n$single_event_obj = $single_event_main[0];\n\n\/\/Social\n$single->display_social_widget($single_event_obj);\n\n\/\/ Google map widget\n$single->display_map_widget($single_event_main);\n\n\/\/ Countdown Widget\n$single->display_countdown_widget($single_event_main);\n\n\/\/ Hourly\n$single->display_hourly_schedules_widget($single_event_obj);\n?>","width":"100","width-unit":"%"},"activeselector":false,"ct_content":"","nicename":"Code Block (#16)"},"depth":0}],"depth":3}],"depth":3}],"depth":2}],"depth":1}],"id":0,"name":"root","depth":0,"meta_keys":[],"outerTemplateData":{"edit_link":"https:\/\/oxygen-q9gpc753fn8yl.oxygen-demo.qsandbox.org\/wp-admin\/post.php?post=29&action=edit","template_name":"Main"}}

Thank you so much for this. You're the only dev that has a resource for how to implement the Moder Events Calendar with Oxygen builder. Although a bit outdated, I was able to implement MEC with Oxygen with your instructions.

Thank you so much for this. You're the only dev that has a resource for how to implement the Moder Events Calendar with Oxygen builder. Although a bit outdated, I was able to implement MEC with Oxygen with your instructions.

Excellent! I'm glad it helped.