Extending event preview

Javascript example on how to modify the event preview html.

The code should be placed in the active theme functions.php file.

This example replaces all preview html with simple title:

add_action('wp_footer', function() {
    global $post;
    if (!is_a($post, 'WP_Post') || !has_shortcode($post->post_content, 'stachethemes_ec')) {
        return;
    }
    ?>
    <script type="text/javascript">
        (function ($) {
            $(function () {
                if (typeof $.stecExtend === 'undefined') {
                    return;
                }
                $.stecExtend(function (m) {
                    m.$instance.on('stecBeforeReturnEventPreviewHtml', function (e, data) {
                        var newHTML = [];
                        newHTML.push('<div class="stec-layout-event-preview">');
                        newHTML.push('  <div style="padding: 20px;">');
                        newHTML.push('      <p class="stec-style-title">' + data.event.title + '</p>');
                        newHTML.push('  </div>');
                        newHTML.push('</div>');
                        data.temp.EventPreviewHtml = newHTML.join('');
                    });
                });
            });
        })(window.jQuery);
    </script>
    <?php
});

The next example modifies the default html and adds categories below the event title:

add_action('wp_footer', function() {
    global $post;
    if (!is_a($post, 'WP_Post') || !has_shortcode($post->post_content, 'stachethemes_ec')) {
        return;
    }
    ?>
    <script type="text/javascript">
        (function ($) {
            $(function () {
                if (typeof $.stecExtend !== 'function') {
                    return;
                }
                $.stecExtend(function (m) {
                    m.$instance.on('stecBeforeReturnEventPreviewHtml', function (e, data) {
                        var $eventPreview = $(data.temp.EventPreviewHtml);
                        var event = data.event;
                        var customHTML = [];
                        
                        // Check if event has categories
                        if (event.category.length <= 0) {
                            return;
                        }
                        customHTML.push('<div>');
                        
                        $.each(event.category, function () {
                            
                            var category = this;
                            
                            // Some extra css for the category block
                            var categoryCSS = [
                                'padding: 3px 6px', 
                                'border-radius: 3px',
                                'display:inline-block',
                                'margin:2px 5px 0 0',
                                'font-size: 10px',
                                'text-transform: uppercase',
                                'color: #fff',
                                'background: ' + category.color
                            ];
                            
                            customHTML.push('<span style="' + categoryCSS.join(';') + '">' + category.title + '</span>');
                        });
                        
                        customHTML.push('</div>');
                        $(customHTML.join('')).insertAfter($eventPreview.find('.stec-layout-event-preview-left-text-title'));
                        
                        // Replaces default preview html with the modified one
                        data.temp.EventPreviewHtml = $eventPreview.get(0).outerHTML;
                    });
                });
            });
        })(window.jQuery);
    </script>
    <?php
});