How to use PlatformPro with The Events Calendar

[georgeadwizbiz 0]

I use a plugin called The Events Calendar to manage events. On most themes, this plugin plays nicely with the theme pages, simply inserting the content where content normally goes, so it respects the margins already defined by the CSS divs and places the calendar or the post information inside the content area. Here's an example of a normal calendar as handled by most templates: http://imgur.com/SljNn.png On PlatformPro, it doesn't do that. The calendar simply gets spread across the entire browser from one edge to the other. Insanely ugly. Same for the calendar detail, including the Google map. It looks like this: http://imgur.com/vhizK.png I looked at the page and single post templates, but they are incomprehensible to me because of PlatformPro's non-traditional modular approach. Can someone help me figure out how to force the Events Calendar content to simply fit inside the normal boundaries for pages and posts? The calendar should be inside a page, the event details should be inside a post, because they are actual posts of category "Events"

[Andrew 207]

Ya, easy first... how are you adding it to the site? Is it in a full-content layout area or are you adding it directly using a hook?

[georgeadwizbiz 0]

Other templates don't have the sophisticated hooks of your products, so I was just doing what I've always done. A page set to the events category will display the events in a calendar format, while the individual posts just appear as normal posts with the special formatting of the plugin (using its CSS to modify style but overall just fitting into the content area). I'm somewhat intimidated by the hooks. They're cool but I'm not skilled with PHP so they're scary for someone who is just a good HTML/CSS coder but not a PHP coder. I tried adding a hook to hide the Events category in the footer by using pagelines_before_footcols and it blew up the site, so now I'm scared to use it. Not sure how I would even begin to insert the events calendar posts using the hooks.

[Andrew 207]

You don't need to add this with hooks... there are several ways to do this. So how did you insert it? How do you set a page to the events category? The recommended ways to do something like this would be with a shortcode, or you could even do a custom section. If you are creating a new page template, the content of your html needs to be surrounded by a `

..content..

` to bring it to the width of your content (full-width mode)

[georgeadwizbiz 0]

Thanks. I'll try adding this to the plugin view files. The way the plugin works is that you just create a post and mark it as an event category. It uses the default single post template. I thought that your default template already includes the "content" class around the actual content. I've seen it in the file, but I've also seen the class "content_entry" so perhaps I misunderstood and the "content" class ends prior to the actual content. If not, then I suspect that The Events Calendar has some kind of CSS conflict. But the plugin has some nice "view" files for different views, that utilize the plugin's own CSS. I have a feeling that something in their CSS conflicts with the PlatformPro CSS, but I'll look into it some more. I've tried various approaches, including adding some divs around the view formatting HTML, but I didn't yet try using the content class (I thought it was already in the default post template) so I'll give that a try and report back so others know if it works.

[georgeadwizbiz 0]

Okay, I've figured out the quirks of The Events Calendar with PlatformPro. To make the "table" view appear inside the content area, you have to insert the content class div into the gridview.html view file, like so:

[b]<div class="content">[/b]<div id="tec-content" class="grid">

It only works if you put a specific div in front of the existing div, as shown above. Trying to nest both the grid and content class in the same div won't work. Then, you need to add the content class to the "List" view file as well using the same unique div approach, as follows:

[b]<div class="content">[/b]
	<div id="tec-content" class="upcoming">

This allows the list view to appear. I also had success converting the Events Calendar previous and next links using the previous and next classes from PlatformPro, but was unsuccessful in using the "rel" attributes to display the nice little circle with the arrow. Replace

<div class="tec-nav-previous">

with:

<div class="post-nav fix">

And move that pagination segment to the top from its default position at the bottom. Finally, to get the single event to display inside the proper content boundaries, simply add the "content" class to the initial designator, as follows:

<div id="tec-content" class="tec-event [b]content[/b]">

Again, I was able to use the nice PlatformPro pagination as follows:

[b]<div class="post-nav fix">
	<span class="previous"[/b]>" rel="prev"><?php _e('Back to Events', $spEvents->pluginDomain); ?></span>
	</div>[/code]

After you finish all that, you have to go into the CSS file for the plugin and modify a bunch of stuff to remove unnecessary left margins and so on. Perhaps someone can help me figure out how to get the sidebar content to show up on the side, since this approach only applies a full-width page, hiding the sidebar.

[cmunns 16]

and it doesn't show up if you select a non-fullwidth template?

[georgeadwizbiz 0]

The Events Calendar doesn't recognize the "Blog Post Options" settings. You have to manually insert the desired divs into the plugin's template file. But I can't figure out the heirarchy. I've tried the following:

<div id="tec-content" class="tec-event content">
	[b]<div class="content-pad">
	<div id="pagelines_content" class="one-sidebar-right fix">
	<div id="column-main" class="mcolumn fix">
	<div class="mcolumn-pad" >[/b]
		<?php the_post(); global $post; ?>

Note that the first line is required for the Events Calendar to initialize its own CSS. I've just appended the "content" class to put the calendar content inside the PlatformPro boundaries. But without the bold portions it just fills the width of the content area. Using those additional four div tags manages to limit the structure to the left side column, but the sidebar doesn't show up at all. So now I'm stumped.

[cmunns 16]

There isn't a widget for it? You could try using the Content Sidebar to get in the main portion of the screen instead of hacking code.

[adwiz 0]

The plugin does have a widget, but only for sidebar lists. It actually provides some fairly decent, if convoluted, modular templates that are designed to be modified for each site that the plugin is used on. Each template is for a different "view" of the data. For example, there's one for a full-page calendar view, one for a full-page list view, and one for single posts. The last one is where I'm having problems. On most sites that I've built, the single post event template fits nicely into the content area of the single post page. It automatically puts the event information and Google map within the normal boundaries of the single post Wordpress template. With PlatformPro, this doesn't happen. It fills the width of the entire web browser. I used the "content" class to force it to at least honor the "full width" spacing, but my struggle now is to get it to respect the normal column width for a "Single sidebar right side". When I've used the divs shown above, it honors the column width but the sidebar doesn't appear.

[adwiz 0]

For reference, you can view the site at www.showdances.com The widget drives the sidebar "Next Event" posting. When you click the event, you'll see how it brings up the single post.

[cmunns 16]

Based on the HTML it looks like the sidebar doesn't even exist on that page. You may have accidentally modified the code because the class is applied correctly for formatting a sidebar, but it simply isn't there.

[adwiz 0]

The plugin template for inserting the event into the single post view doesn't include the get_sidebar function call. It ends with get_footer. I tried including it in various ways, but it always places the sidebar below the content of the event information rather than beside it. Here's the code from the Events Calendar single post view template. The only modification is the addition of the "content" class in the initial div:

<?php
	global $spEvents;
	$spEvents->loadDomainStylesScripts();
	get_header();
	?>
		<div id="tec-content" class="tec-event content">
	
		<?php the_post(); global $post; ?>
				<div id="post-<?php the_ID() ?>" <?php post_class() ?>>
					<div class="post-nav fix">
					<span class="previous">" rel="prev"><?php _e('Back to Events', $spEvents->pluginDomain); ?></span>
					</div>
					<h2 class="entry-title"><?php the_title() ?></h2>
					/?ical=<?php echo $post->ID; ?>"><?php _e('iCal Import', $spEvents->pluginDomain) ?>
					<?php if (the_event_end_date() > time()  ) { ?><small><?php  _e('This event has passed.', $spEvents->pluginDomain) ?></small> <?php } ?>
					<div id="tec-event-meta">
						<dl class="column">
							<dt><?php _e('Start:', $spEvents->pluginDomain) ?></dt>
								<dd><?php echo the_event_start_date(); ?></dd>
							<?php if (the_event_start_date() !== the_event_end_date() ) { ?>
								<dt><?php _e('End:', $spEvents->pluginDomain) ?></dt>
								<dd><?php echo the_event_end_date();  ?></dd>
							<?php } ?>
							<?php if ( the_event_cost() ) : ?>
								<dt><?php _e('Cost:', $spEvents->pluginDomain) ?></dt>
								<dd><?php echo the_event_cost(); ?></dd>
							<?php endif; ?>
						</dl>
						<dl class="column">
							<?php if(the_event_venue()) : ?>
							<dt><?php _e('Venue:', $spEvents->pluginDomain) ?></dt>
								<dd><?php echo the_event_venue(); ?></dd>
							<?php endif; ?>
							<?php if(the_event_phone()) : ?>
							<dt><?php _e('Phone:', $spEvents->pluginDomain) ?></dt>
								<dd><?php echo the_event_phone(); ?></dd>
							<?php endif; ?>
							<?php if( tec_address_exists( $post->ID ) ) : ?>
							<dt>
								<?php _e('Address:', $spEvents->pluginDomain) ?>
								<?php if( get_post_meta( $post->ID, '_EventShowMapLink', true ) == 'true' ) : ?>
									<?php $mapArgs = array("f"=>"q","source"=>"s_q","geocode"=>""); ?>
									" title="<?php _e('Click to view a Google Map', $spEvents->pluginDomain); ?>" target="_blank"><?php _e('Google Map', $spEvents->pluginDomain ); ?>
								<?php endif; ?>
							</dt>
								<dd>
								<?php tec_event_address( $post->ID ); ?>
								</dd>
							<?php endif; ?>
						</dl>
					</div>
					<?php if( get_post_meta( $post->ID, '_EventShowMap', true ) == 'true' ) : ?>
						<?php if( tec_address_exists( $post->ID ) ) event_google_map_embed(); ?>
					<?php endif; ?>
					<div class="entry" style="margin-top:20px;">
						<?php the_content(); ?>
						<?php if (function_exists('the_event_ticket_form')) { the_event_ticket_form(); } ?>
					</div>
					<?php edit_post_link('Edit', '<span class="edit-link">', '</span>'); ?>
				</div><!-- post -->
	
			<?php if(eventsGetOptionValue('showComments','no') == 'yes'){ comments_template();} ?>
	
		</div><!-- tec-content -->
	
	<?php get_footer(); ?>[/code]