Is it possible to fetch the category color of an event and somehow assign it to a div created in Elementor? I would like to make the background color of the date box the same as the category it has been assigned (see screenshot). Furthermore, is it possible to change the date display so that instead of "02 April" says "Monday 2 April"?
Place the following hook in your theme or child-theme functions.php file:
add_action('wp_footer', function () {
if (!wp_script_is('stec-single-js')) {
return;
}
?>
<script type="text/javascript">
console.log('test');
(function($) {
$(function() {
// Assigns color to the div element
const element = '.elementor-column[data-id="b9cd762"]'; // your div selector
let color = false;
if (stecSingleEvent.category.length > 0) {
color = stecSingleEvent.category[0].color;
}
if (false !== color) {
$('.stec-layout-single-preview').css('background', 'none'); // remove white background of the children element
$(element).css('background', color);
}
// Attaches day name
const dayLabel = moment.tz(stecSingleEvent.start_date, stecSingleEvent.timezone)
.add(stecSingleOptions.repeat_offset, 'seconds').format('dddd');
$('.stec-layout-single-day').before(dayLabel + ' ');
});
})(window.jQuery);
</script>
<?php
});
I've tried to insert the hook in the function.php file in my child theme, but unfortunately it doesn't seem to work. Do you know what could be the issue?
I just discovered that if an event is happening over more than a single day, the end date will also appear in the box. Is there a way to remove this ( + the "-") so that it's only the start date that will appear?
Hello
Is it possible to fetch the category color of an event and somehow assign it to a div created in Elementor? I would like to make the background color of the date box the same as the category it has been assigned (see screenshot).
Furthermore, is it possible to change the date display so that instead of "02 April" says "Monday 2 April"?
Thanks.
Place the following hook in your theme or child-theme functions.php file:
add_action('wp_footer', function () { if (!wp_script_is('stec-single-js')) { return; } ?> <script type="text/javascript"> console.log('test'); (function($) { $(function() { // Assigns color to the div element const element = '.elementor-column[data-id="b9cd762"]'; // your div selector let color = false; if (stecSingleEvent.category.length > 0) { color = stecSingleEvent.category[0].color; } if (false !== color) { $('.stec-layout-single-preview').css('background', 'none'); // remove white background of the children element $(element).css('background', color); } // Attaches day name const dayLabel = moment.tz(stecSingleEvent.start_date, stecSingleEvent.timezone) .add(stecSingleOptions.repeat_offset, 'seconds').format('dddd'); $('.stec-layout-single-day').before(dayLabel + ' '); }); })(window.jQuery); </script> <?php });Stachethemes Developer
Hey Zhivko
Thank you so much for your reply!
I've tried to insert the hook in the function.php file in my child theme, but unfortunately it doesn't seem to work. Do you know what could be the issue?
Thanks
I've placed the code for you.
Stachethemes Developer
Hi Zhivko
Thank you so much!
I just discovered that if an event is happening over more than a single day, the end date will also appear in the box. Is there a way to remove this ( + the "-") so that it's only the start date that will appear?
Thanks
Check "Hide end date" next to the "All Day" checkbox in the Add/Edit event admin page.
Stachethemes Developer