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
});