[Plugin: The Events Calendar] Want to create a Page that calls/contains calendar – what code to inse

Hi Paulie,

Our plugin doesn’t support shortcode tags, but we’ve discussed it and it will most likely make it into a future version of the plugin. For the time being, using the templates is the way to go.

Thanks for the reply. Right now all I am doing is using an html redirect plugin so I can have Page link that shows the calendar. Works but the less plugins I have to throw at everything the better of course.

My theme automagically generates Page links in the native font using Flash. So for people using more visually creative themes using a shortcode in a Page will definitely be useful.

Thanks.

I was after an answer to exactly the same issue – well to get the events list. so i solved it myself.

I altered the list.php template and saved it as a page template in my root directory.

Below is the code i used so you can literally copy and paste it if you want. You may want to alter the position of the post content loop to before or after the calander, but thats your choice.

NB. I deleted the function to swap between list and calender so if you want it copy it from list.php in views

hope this helps,

Seb

<?php
/*
Template Name: eventlist-in-page
*/
?>
<?php
	global $spEvents;
	$spEvents->loadDomainStylesScripts();

	get_header();
?>
	<div id="tec-content" class="upcoming">
		<div id='tec-events-calendar-header' class="clearfix">
			<h2 class="tec-cal-title"><?php _e('Calendar of Events', $spEvents->pluginDomain) ?></h2>
		</div><!--#tec-events-calendar-header-->

		<div id="tec-events-loop" class="tec-events post-list clearfix">
		<?php $cal_query = new WP_Query('category_name=Events'); ?>
		<?php while ($cal_query->have_posts()) : $cal_query->the_post(); ?>

				<div id="post-<?php the_ID() ?>" class="tec-event post clearfix<?php echo $alt ?>">
							    <div style="clear:both;"></div>
							        <?php if ( is_new_event_day() ) : ?>
					<h4 class="event-day"><?php echo the_event_start_date( null, false ); ?></h4>
							        <?php endif; ?>
						<?php the_title('<h2 class="entry-title"><a href="' . get_permalink() . '" title="' . the_title_attribute('echo=0') . '" rel="bookmark">', '</a></h2>'); ?>
					<div class="entry-content tec-event-entry">
						<?php the_excerpt() ?>
					</div> <!-- End tec-event-entry -->

					<div class="tec-event-list-meta">
		              <table cellspacing="0">
		                  <tr>
		                    <td class="tec-event-meta-desc"><?php _e('Start:', $spEvents->pluginDomain) ?></td>
		                    <td class="tec-event-meta-value"><?php echo the_event_start_date(); ?></td>
		                  </tr>
		                  <tr>
		                    <td class="tec-event-meta-desc"><?php _e('End:', $spEvents->pluginDomain) ?></td>
		                    <td class="tec-event-meta-value"><?php echo the_event_end_date(); ?></td>
		                  </tr>
		                  <?php
		                    $venue = the_event_venue();
		                    if ( !empty( $venue ) ) :
		                  ?>
		                  <tr>
		                    <td class="tec-event-meta-desc"><?php _e('Venue:', $spEvents->pluginDomain) ?></td>
		                    <td class="tec-event-meta-value"><?php echo $venue; ?></td>
		                  </tr>
		                  <?php endif; ?>
		                  <?php
		                    $phone = the_event_phone();
		                    if ( !empty( $phone ) ) :
		                  ?>
		                  <tr>
		                    <td class="tec-event-meta-desc"><?php _e('Phone:', $spEvents->pluginDomain) ?></td>
		                    <td class="tec-event-meta-value"><?php echo $phone; ?></td>
		                  </tr>
		                  <?php endif; ?>
		                  <?php if (tec_address_exists( $post->ID ) ) : ?>
		                  <tr>
							<td class="tec-event-meta-desc"><?php _e('Address:', $spEvents->pluginDomain); ?><br />
							<?php if( get_post_meta( $post->ID, '_EventShowMapLink', true ) == 'true' ) : ?>
								<a class="gmap" href="<?php event_google_map_link(); ?>" title="Click to view a Google Map" target="_blank"><?php _e('Google Map', $spEvents->pluginDomain ); ?></a>
							<?php endif; ?></td>
							<td class="tec-event-meta-value"><?php tec_event_address( $post->ID ); ?></td>
		                  </tr>
		                  <?php endif; ?>
		                  <?php
		                    $cost = the_event_cost();
		                    if ( !empty( $cost ) ) :
		                  ?>
	 		              <tr>
							<td class="tec-event-meta-desc"><?php _e('Cost:', $spEvents->pluginDomain) ?></td>
							<td class="tec-event-meta-value"><?php echo $cost; ?></td>
						 </tr>
		                  <?php endif; ?>
		              </table>
					</div>
					<div style="clear:both;"></div>
				</div> <!-- End post -->
				<div class="tec-events-list content_footer"></div>
	<?php $alt = ( empty( $alt ) ) ? ' alt' : '';?>
		<?php endwhile; // posts ?>

		</div><!-- #tec-events-loop -->
		<div class="tec-nav" id="tec-nav-below">

			<div class="tec-nav-previous"><?php
			// Display Previous Page Navigation
			if( events_displaying_upcoming() && get_previous_posts_link( ) ) : ?>
				<?php previous_posts_link( '<span>&laquo; Previous Events</span>' ); ?>
			<?php elseif( events_displaying_upcoming() && !get_previous_posts_link( ) ) : ?>
				<a href='<?php echo events_get_past_link(); ?>'><span><?php _e('&laquo; Previous Events', $spEvents->pluginDomain ); ?></span></a>
			<?php elseif( events_displaying_past() && get_next_posts_link( ) ) : ?>
				<?php next_posts_link( '<span>&laquo; Previous Events</span>' ); ?>
			<?php endif; ?>
			</div>

			<div class="tec-nav-next"><?php
			// Display Next Page Navigation
			if( events_displaying_upcoming() && get_next_posts_link( ) ) : ?>
				<?php next_posts_link( '<span>Next Events &raquo;</span>' ); ?>
			<?php elseif( events_displaying_past() && get_previous_posts_link( ) ) : ?>
				<?php previous_posts_link( '<span>Next Events &raquo;</span>' ); // a little confusing but in 'past view' to see newer events you want the previous page ?>
			<?php elseif( events_displaying_past() && !get_previous_posts_link( ) ) : ?>
				<a href='<?php echo events_get_upcoming_link(); ?>'><span><?php _e('Next Events &raquo;', $spEvents->pluginDomain); ?></span></a>
			<?php endif; ?>
			</div>

		</div>
<div class="clear"></div>

<!--
	START Page lopp
-->
		<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
		<div>
			<?php
			/*
				post content
			*/
			    the_content();

			?>
			<?php edit_post_link('Edit', '<br /><p>', '</p>'); ?>
		</div>
		<?php endwhile;?>
		<?php endif; ?>
<!--
	END Page loop
-->
	</div>

<?php
get_footer();

HI.

I was looking for the same. The trick is to call e new query.

<?php query_posts('category_name=events'); ?>

So for a Calendar Template page I coppied the Gridview and pasted it into my Calendar template and added the query near the top.

<?php
/*
Template Name: Calendar
*/
?>
<?php
	global $spEvents;
	$spEvents->loadDomainStylesScripts();

	get_header();
?>
	<div id="tec-content" class="grid">

		<?php query_posts('category_name=events'); ?>

		<div id="tec-events-calendar-header">

			<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('Liste oversigt', $spEvents->pluginDomain)?></a>
			</span>

		</div><!-- tec-events-calendar-header -->

		<?php event_grid_view( ); // See the plugins/the-events-calendar/views/table.php template for customization ?>	

	</div><!-- content-->

	<?php locate_template( array( 'sidebar.php' ), true ) ?>

<?php
	get_footer();

THANK YOU SO MUCH !!!!

I have been looking for this for hours.. Thanks again ! The loop.. that is what I was missing…

euh query.. not the loop…

Ok, i really want to be able to do this, but I am not as advanced as you all, can you explain in “idiot” terms. I really wish this plugin used shortcode…would make my life soooo much easier.

any word on how to fix this? I don’t mind if my side navigation widget area goes away, I just don’t want it continuing forever unto the horizon below it. =/

Alright, I fixed the widget side nave problem myself! =B
The trick was to grab the code out of php file my version referenced instead of what you have there. …doy…

It still doesn’t look exactly how I want it to…if anyone has any thoughts on how to make it shrink and center a bit? I’d be all ears.
@vayu & SebAston, dear god thank you for this so much! This was a gem of information!

@idavila: I’m not a code guru either…when I’m changing wp code I back up my original files before I start in case I make a mistake, I suggest everyone do the same, ‘specially if you are following all my other advice. IF, like me, you are running the most current versions of both wp & event calendar this is how I did what I did~

Step One: Make a new Page Template
simple version:

• with your ftp server download the page.php file from your wp sites selected theme. YOURSITE/wp-content/themes/YOURTHEMENAME/page.php
• change the name of this page to something like “calendar-page.php” on your computer, make sure it stays a php file if you use an editing program
• upload the file to YOURSITE/wp-content/themes/YOURTHEMENAME/ folder on your wp site via ftp
• in your online wp admin panel go to appearances menu, “editor” then find the file that has “calendar-page.php” as it’s file name
• Highlight all of the text in this file and paste:

<?php
/*
Template Name: Calendar
*/
?>

You can also replace the code in your new template php in a code editor like dreamweaver or whatever before you upload it…if you do that you can skip to step 2 right after checking that it appears in your editor.
Either way, you should now have a template that can be selected when you make a new page, but it is completely blank to be filled in with your calendar code when you grab it! Save “calendar-page.php” in your online editor, if that is what you used, and continue~

Step 2: Go to your plug in panel, find the event calendar in the list. See where it says “deactivate | edit”? Click edit. You will now be in a browser that looks like your regular theme editor, but it is specific to your calendar widget.
Decide if you want the list (like your main page but only event entries) or grid view (traditional calendar) of your calendar on your page.

• List: click the-events-calendar/views/list.php
• Grid: click the-events-calendar/views/gridview.php

Open your chosen file in the editor, Select All, copy and then return to your main appearances editor and click on your “calendar-page.php” again.
Underneath the small bit of code it contains paste everything you just copied. Save.

Step 3: Use the trick presented here in this thread to make it display~

Find the line in your file that reads:
<div id="tec-content" class="upcoming">
in list view
<div id="tec-content" class="grid">
in grid view

altering none of this code, place your cursor at the end of that line and hit enter, then paste:
<?php query_posts('category_name=events'); ?>
Save.

Step 4: Link this to your page.
Go to the page publishing section of your wp user panels. You can convert an old one or make a new page. While you are editing/creating your page there should be an area denoting “Page Attributes” with a drop menu for template…select Calendar. Make sure you have no text on your page and save.

You should end up with something like What I Have!
I don’t know how to make it not take up all of the page, but frankly I don’t care, it will link to your regular event calendar functions just fine and I chose the list view since it looks better sprawled out, of course right now it’s lipstick on a pig for my new site, but functionality comes first.
I’m a little apprehensive about updates to this widget in the future making me have to reup my template, but I suppose it is a necessary evil to get what I want, I like how smart finally figuring this out made me feel, but…short code ftw please!

thanks again SebAshton and Vayu, I cannot stress how helpful you were!

I had the same issue (the calendar takes up all of the page horizontally) using the link.

The problem is that the class “category-events” is not called in the body tag. To solve the issue you need to add the “category-events” into the body tag

For example replace the following line in header.php in the thematic folder:

<body class=”<?php thematic_body_class()?> category-events”>

I know, it is not a very good solution but it works…

@joggi, thank you for trying to help me. I think I understand what you are trying do there with your fix, but I am extremely reluctant to change files that are not specific to the calendar page alone. I don’t want to run the risk of it causing problems with other things in the future…

I never feel comfortable changing things I don’t fully understand or need to change to get the perfect result. I wonder if there is a way to do something similar to your fix in the calendar page template file itself?

Joggi,
Please excuse my dumbness but I am no php wizz, Where exactly should I paste it in the Header.php and will it add a calendar to every new page created?

MY HEADER.PHP

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”https://www.w3.org/1999/xhtml&#8221; <?php language_attributes(); ?>>
<head profile=”https://gmpg.org/xfn/11″&gt;
<meta http-equiv=”Content-Type” content=”<?php bloginfo(‘html_type’); ?>; charset=<?php bloginfo(‘charset’); ?>” />
<meta http-equiv=”X-UA-Compatible” content=”IE=EmulateIE7″ />
<title><?php if (is_home () ) { bloginfo(‘name’); } elseif ( is_category() ) { single_cat_title(); if(get_bloginfo(‘name’) != “”) echo ‘ – ‘ ; bloginfo(‘name’); }
elseif (is_single() ) { single_post_title(); }
elseif (is_page() ) { bloginfo(‘name’); if(get_bloginfo(‘name’) != “”) echo ‘: ‘; single_post_title(); }
else { wp_title(”,true); } ?></title>
<script type=”text/javascript” src=”<?php bloginfo(‘template_url’); ?>/script.js”></script>
<link rel=”stylesheet” href=”<?php bloginfo(‘stylesheet_url’); ?>” type=”text/css” media=”screen” />
<!–[if IE 6]><link rel=”stylesheet” href=”<?php bloginfo(‘template_url’); ?>/style.ie6.css” type=”text/css” media=”screen” /><![endif]–>
<!–[if IE 7]><link rel=”stylesheet” href=”<?php bloginfo(‘template_url’); ?>/style.ie7.css” type=”text/css” media=”screen” /><![endif]–>
<link rel=”alternate” type=”application/rss+xml” title=”<?php printf(__(‘%s RSS Feed’, ‘kubrick’), get_bloginfo(‘name’)); ?>” href=”<?php bloginfo(‘rss2_url’); ?>” />
<link rel=”alternate” type=”application/atom+xml” title=”<?php printf(__(‘%s Atom Feed’, ‘kubrick’), get_bloginfo(‘name’)); ?>” href=”<?php bloginfo(‘atom_url’); ?>” />
<link rel=”pingback” href=”<?php bloginfo(‘pingback_url’); ?>” />
<?php wp_head(); ?>
</head>
<body>
<div id=”art-main”>
<div class=”art-Sheet”>
<div class=”art-Sheet-tl”></div>
<div class=”art-Sheet-tr”></div>
<div class=”art-Sheet-bl”></div>
<div class=”art-Sheet-br”></div>
<div class=”art-Sheet-tc”></div>
<div class=”art-Sheet-bc”></div>
<div class=”art-Sheet-cl”></div>
<div class=”art-Sheet-cr”></div>
<div class=”art-Sheet-cc”></div>
<div class=”art-Sheet-body”>
<div class=”art-Header”>
<div class=”art-Header-png”></div>
<div class=”art-Header-jpeg”></div>

</div>
<div class=”art-nav”>
<div class=”l”></div>
<div class=”r”></div>
<ul class=”art-menu”>
<?php art_menu_items(); ?>

</div>

If you just want a page shows the calendar, I have made one with custom menu link in the Menus under the Appearance. The link looks something like “/wpdev/category/events/month” Add that to your menu bar and you are done. Is this what people are looking for…?

“wpdev” aka your WordPress installation folder

Actually I followed FyireChilde’s instruction and the code from Vayu, I was able to create a regular page with all the sidebar items and the calendar as the main content. Some CSS editing and extra php code from the page.php was needed for my need to make the page appear just like the rest of the site. Thanks to the two!