Creating Custom Tabs

Code example for adding custom tab. Place code below in your theme functions.php file

/**
 * Step 1: Creating custom tab on the front-end 
 */
add_filter('stec_event_tabs', function($tabs) {
    // uses function add_event_tab($slug, $title, $icon, $content = "", $file = false)  
    $tabs[] = array("my-custom-tab", __('My Custom Tab', 'stec'), "fas fa-code", "", false);
    return $tabs;
});
/**
 *  Step 2: Add the custom tab to St. Event Calendar -> Events -> Create/Edit Event form 
 *  It will also include 1 text input for storing the tab content 
 */
add_action('stec_admin_addedit_event_tab', function() {
    ?><li data-tab="my-custom-tab"><?php _e('My Custom Tab', 'stec'); ?></li><?php
});
add_action('stec_admin_addedit_event_tab_content', function($event) {
    $value = null;
    if ($event) {
        $value = $event->get_custom_meta('custom_input_name');
    }
    ?>
    <div class="stachethemes-admin-section-tab" data-tab="my-custom-tab">        
        <p class="stachethemes-admin-info"><?php _e('Field title', 'stec'); ?></p>        
        <input class="stachethemes-admin-input" type="text" name="custom_input_name" value="<?php echo $value; ?>" >    
    </div>    
    <?php
});
/**
 * Step 3: Store custom input content and create/edit event 
 */
add_filter('stec_insert_post', function($post_data) {
    $custom_input_value = isset($_POST['custom_input_name']) ? $_POST['custom_input_name'] : null;
    if ($custom_input_value) {
        // if custom value is found, add it to the post meta data        
        $post_data['meta_input']['custom_input_name'] = $custom_input_value;
    }
    return $post_data;
});
/**
 * Step 4: Retrieve the tab content when query the event front data
 * */
add_filter('stec_event_get_front_data', function($data) {
    $value = get_post_meta($data['id'], 'custom_input_name', true);
    if ($value) {
        $data['custom_input_name'] = $value;
    }
    return $data;
});
/**
 * Step 5: Display the tab content via Javascript 
 */
add_action('wp_head', function() {
    ?>    
    <script type="text/javascript">
        (function ($) {
            $(function () {
                // Calendar 
                $(document).on('onEventToggleOpen', function (e, data) {
                    data.$instance.find('.stec-layout-event-inner-my-custom-tab').html(data.event.custom_input_name);
                });
                // Single Page
                if ($('.stec-layout-single').length > 0) {
                    $('.stec-layout-single-my-custom-tab').html(stecSingleEvent.custom_input_name);
                }
            });
        })(jQuery);
    </script>    
    <?php
});