[Plugin: The Events Calendar] Events Calendar missing white background

How bizzarre!

I have the same issue AND I’m using professional theme from ET!

I’ll let you know if I find anything…

kyle

This is happening because the plugin is injecting the calendar view and list view into a page but without including the default template’s usual content divs, so the following divs are missing:

<div id="content-top"></div>
<div id="content" class="clearfix">
<div id="content-area">
<div id="breadcrumbs"></div>

Content

</div>
</div>
<div id="content-bottom"></div>

To rectify, you need to start with “>this

So copy these 4 files:

gridview.php
list.php
single.php
events-list-load-widget-display.php

from wp-content/plugins/the-events-calendar/views

and place them in a new folder called ‘events’ which you’ve created within the root of your theme folder, like this:

wp-content/themes/TheProfessional/events

Then edit each of the view files and add back in the missing divs, or the php that pulls them in. I’m still working on it, but have got the grid calendar view working almost:

Original gridview.php

<?php
global $spEvents;
$spEvents->loadDomainStylesScripts();
get_header();
?>
	<div id="tec-content" class="grid">
		<div id='tec-events-calendar-header' class="clearfix">
			<h2 class="tec-cal-title"><?php _e('Calendar of Events', $spEvents->pluginDomain) ?></h2>
			<span class='tec-month-nav'>
				<span class='tec-prev-month'>
					<a href='<?php echo events_get_previous_month_link(); ?>'>
					← <?php echo events_get_previous_month_text(); ?>
					</a>
				</span>

				<?php get_jump_to_date_calendar( "tec-" ); ?>

				<span class='tec-next-month'>
					<a href='<?php echo events_get_next_month_link(); ?>'>
					<?php echo events_get_next_month_text(); ?> →
					</a>
				</span>
			</span>

			<span class='tec-calendar-buttons'>
				<a class='tec-button-off' href='<?php echo events_get_listview_link(); ?>'><?php _e('Event List', $spEvents->pluginDomain)?></a>
				<a class='tec-button-on' href='<?php echo events_get_gridview_link(); ?>'><?php _e('Calendar', $spEvents->pluginDomain)?></a>
			</span>
		</div><!-- tec-events-calendar-header -->
		<?php
		global $wp_query;
		$tecCatObject = get_category( $wp_query->query_vars['cat'])
		?>
		<a class="ical" href="<?php bloginfo('home'); ?>/?ical=<?php echo $tecCatObject->slug; ?>"><?php _e('iCal Import', $spEvents->pluginDomain) ?></a>
		<?php event_grid_view(); // See the plugins/the-events-calendar/views/table.php template for customization ?>
	</div>
<?php /* For custom template builders...
	   * The following init method should be called before any other loop happens.
	   */
$wp_query->init(); ?>
<?php get_footer(); ?>

With added missing template code (this for full width page template)

<?php
global $spEvents;
$spEvents->loadDomainStylesScripts();
get_header();
?>
<div id="content-top" class="top"></div>
<div id="content" class="clearfix">
	<div id="content-area">

	<?php include(TEMPLATEPATH . '/includes/breadcrumbs.php'); ?>

	<div id="tec-content" class="grid">
		<div id='tec-events-calendar-header' class="clearfix">
			<h2 class="tec-cal-title"><?php _e('Calendar of Events', $spEvents->pluginDomain) ?></h2>
			<span class='tec-month-nav'>
				<span class='tec-prev-month'>
					<a href='<?php echo events_get_previous_month_link(); ?>'>
					← <?php echo events_get_previous_month_text(); ?>
					</a>
				</span>

				<?php get_jump_to_date_calendar( "tec-" ); ?>

				<span class='tec-next-month'>
					<a href='<?php echo events_get_next_month_link(); ?>'>
					<?php echo events_get_next_month_text(); ?> →
					</a>
				</span>
			</span>

			<span class='tec-calendar-buttons'>
				<a class='tec-button-off' href='<?php echo events_get_listview_link(); ?>'><?php _e('Event List', $spEvents->pluginDomain)?></a>
				<a class='tec-button-on' href='<?php echo events_get_gridview_link(); ?>'><?php _e('Calendar', $spEvents->pluginDomain)?></a>
			</span>
		</div><!-- tec-events-calendar-header -->
		<?php
		global $wp_query;
		$tecCatObject = get_category( $wp_query->query_vars['cat'])
		?>
		<a class="ical" href="<?php bloginfo('home'); ?>/?ical=<?php echo $tecCatObject->slug; ?>"><?php _e('iCal Import', $spEvents->pluginDomain) ?></a>
		<?php event_grid_view(); // See the plugins/the-events-calendar/views/table.php template for customization ?>
	</div>
</div>
</div>
<div id="content-bottom"></div>

<?php /* For custom template builders...
	   * The following init method should be called before any other loop happens.
	   */
$wp_query->init(); ?>
<?php get_footer(); ?>

If you want the default template with sidebar, replace the first two lines:

<div id="content-top" class="top"></div>
<div id="content" class="clearfix">

with this

<div id="content-top" class="top-alt"></div>
	<div id="content" class="clearfix content-alt">

I have then tweaked the css by adding some margin left and right to

(wp-content/plugins/the-events-calendar/resources/events.css)

#tec-content {font-size: 1.2em;
	margin-left: 40px;
	margin-right: 42px;
}

Hope that helps. Let me know if you improve on this or spot any errors.

Dozza, you just saved my sanity! Thank you so much! I ended up doing everything you mentioned above and it is all working great. The only thing I didn’t do is create an events folder and add the new .php files into it. i just replaced the old ones within the ‘views’ folder. that seems to be working great.

so grateful for your help with this! thank you!

Glad to hear it worked Kyle, any chance of a live url to see?

(Mine will be up soon).

I’d recommend creating the events folder within your theme and putting a copy of the edited/unedited 4 files in there too….

The documentation states “Please do not edit the one’s in the plugin folder as that will cause conflicts when you update the plugin to the latest release.”

So any changes you’ve made to the files will be overwritten when you update the plugin. Just warnin’ ya!