CSS and layout for Events page broken

The calendar is supposed to be wrapped in the following div:

<div class="em pixelbones em-calendar preview-modal responsive-dateclick-modal this-month size-large" data-scope="future" data-preview-tooltips-trigger="" id="em-calendar-1" data-view-id="1" data-view-type="calendar">

But in your page it’s wrapped by the following div:

<div class=" preview-modal responsive-dateclick-modal size-small size-fixed" data-scope="2023-11-27,2023-12-31" data-preview-tooltips-trigger="" id="em-calendar-1" data-view-id="1" data-view-type="calendar">

The following class values are missing: em, pixelbones, and em-calendar.

This will happen if you disable Calendar styling in Events Manager Settings in the “General” tab under “Styling Options (Advanced)” or if you disable all styling.

Hello,

Thanks for your reply.

We’ve checked the ‘Styling Options (Advanced)’ section and both options are set to ‘Yes’. We haven’t disabled the styling.

I’ve tried disabling them and enabling them to see if that fixed it, but it didn’t work.

How can we fix the div that you mentioned?

I don’t know why those classes are not being added on your installation. Try adding the following code snippet to work around the problem:

add_filter('em_get_template_classes', 'my_em_get_template_classes', 10, 2);
function my_em_get_template_classes( $classes, $component ) {
    if ( $component == 'calendar' && ( empty($classes) || !is_array($classes) || count($classes) != 3 || empty($classes[2]) || $classes[2] != 'em-calendar' ) ) {
        $classes = [];
        $classes[] = 'em';
        $classes[] = 'pixelbones';
        $classes[] = 'em-calendar';
    }
    return $classes;
}

You can use the Code Snippets plugin to add this code snippet.

Hi, thanks for that. I’ve done that and when I save that code in ‘code snippets’ it says…

Snippet automatically deactivated due to an error on line 8:
Syntax error, unexpected ‘return’ (T_RETURN).

You must have made a mistake when you did your copy and paste. I’ve tested the code snippet and it has no errors. I also added it to Code Snippet and it did not get deactivated.

Hi, I tried again (by pasting and matching formatting) and it has worked without any errors in Code Snippet, so that’s great.

It hasn’t fixed the issue on the events page: https://ashdownforest.org/events/

Add the following code snippet to create a new shortcode [em-options-test]:

add_shortcode('em-options-test', function () {
    return "dbem_css_theme:" . get_option('dbem_css_theme') . " dbem_css_calendar:" . get_option('dbem_css_calendar');
} );

Put the [em-options-test] shortcode on a new page and then load the page. The output should look like this:

dbem_css_theme:1 dbem_css_calendar:1

If either of these are 0 then that would explain the problem. Let me know what you find.

Is Theme Styling disabled in the “General” tab under “Styling Options (Advanced)”?

Hello,

Here is the page with that shortcode: https://ashdownforest.org/test/

it says…

dbem_css_theme:1 dbem_css_calendar:1

‘Enable All Styling?’ and ‘Enable Theme Styling?’ are both set to ‘Yes’.

Create the directory wp-content/plugin-templates/events-manager/calendar and then copy wp-content/plugins/events-manager/templates/calendar/calendar.php to that directory. Next in the copied version of calendar.php on line 16 change this:

<div class="<?php em_template_classes('calendar'); ?> <?php echo esc_attr(implode(' ', $calendar['css']['calendar_classes'])); ?>" data-scope="<?php echo esc_attr($args['scope']['name']); ?>" data-preview-tooltips-trigger="" id="em-calendar-<?php echo $id ?>" data-view-id="<?php echo $id ?>" data-view-type="calendar">

To this:

<div class="em pixelbones em-calendar <?php echo esc_attr(implode(' ', $calendar['css']['calendar_classes'])); ?>" data-scope="<?php echo esc_attr($args['scope']['name']); ?>" data-preview-tooltips-trigger="" id="em-calendar-<?php echo $id ?>" data-view-id="<?php echo $id ?>" data-view-type="calendar">

Hello,

I have copied calendar.php into wp-content/plugin-templates/events-manager/calendar and made the change, but it’s not made any difference.

What can we try next?

Would you like access? Would that help?

One additional thing, I’ve noticed if I open up either calendar.php file in my browser I get the following…

Fatal error: Uncaught Error: Class ‘EM_DateTime’ not found in /home/customer/www/kirstyd1.sg-host.com/public_html/wp-content/plugin-templates/events-manager/calendar/calendar.php:12 Stack trace: #0 {main} thrown in?/home/customer/www/kirstyd1.sg-host.com/public_html/wp-content/plugin-templates/events-manager/calendar/calendar.php?on line?12

Is that normal?

It’s against forum rules to request or receive credentials for your website. The Fatal error you see is normal. You’re not supposed to open up calendar.php directly in your browser.

I tried modifying wp-content/plugin-templates/events-manager/calendar/calendar.php and I do see the modification on the events page on my website.

Do you have any caching plugins on your website? Maybe it’s still showing a cached version of the page.

• This reply was modified 1 year ago by joneiseman.