Integrate Advanced Custom Fields with The Events Calendar Community Events

Advanced Custom Fields fields play well with TEC Community Events using some basic template modifications

Getting Advanced Custom Fields to work with Modern Tribe's The Events Calendar is simple - just create the ACF fields or groups, assign them to "tribe_events" post type, and the new fields appear in the event add/edit form.

But is it possible to get them to show up on the front-end forms for The Events Calendar's fantastic Community Events? And more importantly, does the data from those fields get saved to the database?

Yes, and yes.

Customize The Events Calendar Community Events template

To start, copy the Community Events form template from the plugin. This template affects both the Add and Edit pages:

/wp-content/plugins/the-events-calendar-community-events/src/views/community/edit-event.php

This goes into a folder in your theme at

[your-theme]/tribe-events/community/edit-event.php

 

Add the Advanced Custom Field form head

Call acf_form_head to process, validate and save the submitted form data.

This code already exists at the top of edit-event.php:

if ( ! defined( 'ABSPATH' ) ) {
    die( '-1' );
} if ( ! isset( $tribe_event_id ) ) {
    $tribe_event_id = null;
}

Just below it, add the following, which will call in acf_form_head:

add_action( 'get_header', 'call_acf_form_head', 1 );
function call_acf_form_head() {
   acf_form_head();
}

It's shown here in action at the top of edit-event.php:

Add Advanced Custom Field content to the Community Events form

Go to a place in edit-event.php that makes sense, and call in any form fields using acf_form and specific parameters.

Call in one or more ACF groups using an array: 
'field_groups' => array()

Call in one or more fields using an array:
'fields' => => array()

Since these fields are being added to an existing form, use:
'form' => false

Here's an example using a field group - change the array values to match your group or groups:

  <?php
    $settings = array(
      'field_groups' => array('group_12abc3456789'),
      'form' => false
    );
    acf_form($settings);
  ?>

We added a registration field group, placing it just after where the template calls in modules/organizer:

This added the field "Registration Needed?" to the front end of our Community Events form:

 

Make the ACF field match the rest of the Community Events form

In order to use The Event Calendar's CSS styles, wrap the fields in a div to match theirs. Change "acf-custom" in the example below to any identifier, and again, change the settings to match your form fields or groups.

  <div class="tribe-section acf-custom">
  <?php
    $settings = array(
      'field_groups' => array('group_12abc3456789'),
      'form' => false
    );
    acf_form($settings);
  ?>
  </div>

By wrapping the field code in a div with class="tribe-section", your ACF fields should already pick up much of the TEC form styling. 
Note: this works if you're using the Tribe styles at Events Settings (Display tab):

To finish the styling, the header and content padding and fonts may need a few changes. This is our field after some CSS tweaks:

Our group consisted of 2 parent ACF fields. The second field - which is another group containing 3 more fields - only shows conditionally if the viewer chose specific answers for the first field. By using ACF fields here, we get the benefits of its powerful features like conditionals, date fields, and more. This shows all the fields, expanded:

 

These few steps got Advanced Custom Field and The Events Calendar Community Events fields working together on the front-end Community Events form. This allows us to collect finely-grained and customized information for each event, while benefitting from all the built-in features of ACF and TEC. The ACF form data gets saved to the database, and can be pulled into templates just like any other ACF field.

We found this works on all the fields we tried - ACF Pro and regular, repeater fields, conditional fields, etc. It will also work on the other TEC forms. You can view all the available templates on their Calendar Template page.

The Events Calendar Pro does offer "Additional Fields" which - in addition to providing more fields - add more options for filtering events using the Filter Bar addon. But the Additional Fields have far more limitations than ACF - there are only a few field types, no inability to reorder the fields, add help text, etc. Using ACF adds infinitely more functionality to the Community Events form.