Malformed Calendar When No Events Present (Events + v1.9.5)

I'm having an issue with (possibly) the CSS application of the calendar when no events have been created. Here's what I see when I do have events:

And here's what it looks like when there are no events:

I've compared the markup between the two and there's no difference in CSS classes that I can tell. How can I get the calendar to appear normally even when there are no events?

  • Patrick

    Hi there Inspyre

    I hope you're well today!

    That looks like it most likely theme-related. Probably your theme is overriding some plugin style, or adding it's own, or something simply preventing default styles from being applied.

    But that can be corrected with a bit of custom CSS. Can you provide a link to the page where your empty calendar can be seen so we can inspect it with browser tools?

    If the site isn't live or accessible, what theme are you using that site, and can you please paste the actual shortcode you are using to display your calendar?

  • Inspyre

    Sorry site is not live and I'm not using a shortcode. I tried disabling all custom CSS that overrides Events + CSS and had the same result. Here's the code for the archive-incsub_event.php template file:

    <?php get_header(); ?>
    <div class="container pad-xs-vert pad-sm-vert-lg pad-md-vert-xl">
      <div class="row">
        <!-- <main class="col-xs-12 col-sm-8"> -->
        <main class="col-xs-12">
          <?php
            global $booking, $wpdb, $wp_query;
            $now = current_time( 'timestamp' );
            $year = isset( $wp_query->query_vars['event_year'] ) ? $wp_query->query_vars['event_year'] : date( 'Y', $now );
            $year = $year ? $year : date_i18n('Y'); // date_i18n uses current_time when called like this
            $month = isset( $wp_query->query_vars['event_monthnum'] ) ? $wp_query->query_vars['event_monthnum'] : date( 'm', $now );
            $month = $month ? $month : date_i18n('m');
            $time = strtotime("{$year}-{$month}-01");
    
            $events = defined('EAB_CALENDAR_ARCHIVE_TEMPLATE_USE_CUSTOM_QUERY') && EAB_CALENDAR_ARCHIVE_TEMPLATE_USE_CUSTOM_QUERY
              ? Eab_CollectionFactory::get_upcoming_events($time)
              : $wp_query->posts
            ;
          ?>
          <div id="primary">
            <div id="wpmudevevents-wrapper">
              <h1>
                <?php echo sprintf(
                  __('Events for %s', Eab_EventsHub::TEXT_DOMAIN),
                  date_i18n("F Y", $time)
                ); ?>
              </h1>
              <div class="wpmudevevents-list">
                <?php
                  if (!class_exists('Eab_CalendarTable_EventArchiveCalendar')) require_once EAB_PLUGIN_DIR . 'lib/class_eab_calendar_helper.php';
                  $renderer = new Eab_CalendarTable_EventArchiveCalendar($wp_query->posts);
                  echo $renderer->get_month_calendar($time);
                ?>
                <div class="event-pagination">
                  <?php
                    $prev = $time - (28*86400);
                    $next = $time + (32*86400);
                  ?>
                  <a href="<?php echo Eab_Template::get_archive_url($prev, true); ?>">Prev</a>
                  <a href="<?php echo Eab_Template::get_archive_url($next, true); ?>">Next</a>
                </div>
              </div>
            </div>
          </div>
        </main>
      </div>
    </div>
    <?php get_footer(); ?>
  • Patrick

    Hi again Inspyre

    You just likely need to define the height for the table-cells in your calendar. Try the following CSS, and adjust to suit your site:

    .wpmudevevents-list table td {height:120px;}

    You can add CSS to any custom CSS area you may have in your active theme, or the WordPress Customizer, or use a handy little plugin like this one for all your custom CSS needs:
    https://wordpress.org/plugins/simple-custom-css/

  • Inspyre

    Hi Patrick,

    Adding a fixed height does solve the problem, sorta. The weird thing is that there is no problem if there is at least one event in the calendar so it seems that add a height shouldn't be necessary.

    What I'm trying to figure out here is why the calendar looks fine with an event and looks broken without an event.

    The problem still exists when I:

    • Activate a default WordPress theme and add my archive-incsub_event.php template file to that theme.
    • Delete all of my CSS that is overriding WPMU Events + CSS.

    Seems like no matter what I try, the calendar is not using equally sized <td>'s when no events are set to Published.

  • Inspyre

    Hi, Kasia.

    Yes, this is still an issue. We've added .wpmudevevents-list table td {height:120px;} as a temporary fix. However, the presence or absence of an event shouldn't dictate the calendar display.

    To reiterate, the problem is that the calendar displays incorrectly when no events are published. This happens on a fresh copy of a WP default theme and with my own custom themes (both with and without Events+ CSS overrides).

    Deactivating non Events+ plugins does not resolve, changing themes does not resolve. How can we get the calendar to display correctly when there are no events published?

  • Kasia Swiderska

    Hello Inspyre,

    Is it possible to see that live on your site? I tried to use your code in archive-incsub_event.php in default theme in WordPress, but that file is not working correctly on my installation. I'm wondering if that is whole code for that file you gave us.
    If site is not live and theme is not online, would it possible you could send me that theme so I could test it on my installation?
    If sharing it here is not option for you could you please send in the following via our secure contact form https://premium.wpmudev.org/contact/ :

    - Mark to my attention, the subject line should contain only: ATTN: Kasia Swiderska
    - Do not include anything else in the subject line, doing so may delay our response due to how email filtering works.
    - Link back to this thread
    - Link to zipped theme on service like dropbox or google drive
    - Include any relevant URLs for your site

    IMPORTANT: Please make sure you select "I have a different question" for your topic, so it doesn't go back to the forums - this and the subject line ensure that it gets assigned to me.

    Please confirm here that you sent that email

    kind regards,
    Kasia

  • Kasia Swiderska

    Hello Inspyre,

    Huh. I do have a problem with that theme. I'm testing it, it throws some fatal errors about missing class

    [20-Jul-2017 15:59:27 UTC] PHP Fatal error: Class 'Inspyre\ICMS' not found in wp-content/themes/inspyretheme/structured-data/functions/functions.php on line 10

    after commenting some of the lines for structured data I could display it. You said that you added rule height: 120 px so table cell height will be always the same size no matter if there is event or not.
    So in table with event present when I disable that rule, I have this:

    I'm not able to replicate issue with different height of cells with event or without event. There is possibility, that commenting lines to get rid of the fatal error to display theme might broke something, but those changes should not affect CSS of site.
    Do you have version of theme where this issue originally occurred? Without changes in CSS to fix it? Let me know.

    kind regards,
    Kasia

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.