Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

Display Events month by month (Event Calendar Pro) WordPress

  • SOLVED

Hi all,

Final task for the site I'm developing is to create a loop of Events created by The Events Calendar Pro plugin that displays the events in the same way of the Eventure theme.

Here is what I'm trying to achieve:

http://themeforest.net/item/eventure-responsive-events-wp-theme/full_screen_preview/1529155

Christianto has already created a loop for me here which may help with the loop:
wpquestions.com/question/showChrono?id=7849

The code that the Eventure theme uses is this:

<!--FILTER-->
<div id="filter" class="blackBar">
<?php
$terms = get_terms("tribe_events_cat");
$count = count($terms);
if ( $count > 0 ){
echo '<ul class="events-cat-menu">';
foreach ( $terms as $term ) {
echo '<li class="cat_'. $term->slug .'"><a href="'. get_term_link($term->slug, 'tribe_events_cat') .'">' . $term->name . '</a></li>';
}
echo '</ul>';
}
?>
</div>

<!--UL DATE LIST-->
<ul id="dateList">
<?php
$prev_month = '';
$prev_year = '';
$temp = $wp_query;
$wp_query= null;
$wp_query = new WP_Query();
$wp_query->query('post_type=tribe_events&showposts=200'.'&paged='.$paged);
while ($wp_query->have_posts()) : $wp_query->the_post();
if(get_the_time('M') != $prev_month || get_the_time('Y') != $prev_year){
?>

<li class="box monthYear" id="<?php echo get_the_time('M'); echo get_the_time('y'); ?>">
<a class="dateLink" href="<?php echo home_url(); ?>/<?php echo get_the_time('Y/m'); ?>">
<span><?php echo get_the_time('M'); ?></span><br />
<?php echo get_the_time('Y'); ?>
</a>
</li>

<?php } ?>

<li class="box postEvent<?php foreach((get_the_category()) as $category) {echo ' '.$category->category_nicename.'';}?>">
<a href="<?php the_permalink(); ?>">
<span class="theDay"><?php echo get_the_time('d'); ?></span><br />
<p class="theTitle">
<span><?php echo get_the_time('D @ g:i a'); ?></span><br />
<?php echo the_title(); ?>
</p>
</a>
</li>

<?php
$prev_month = get_the_time('M');
$prev_year = get_the_time('Y');
endwhile;
$wp_query = null;
$wp_query = $temp;?>

<li class="box" id="theEnd"><?php _e("The End.");?></li>
</ul><!--END DATE LIST-->

Documentation for the plugin:
http://tri.be/support/documentation/

Any help would be hugely appreciated!

Many thanks,

Adam.

2013-01-20 by flint_and_tinder

Answers (2)

2013-01-20

Christianto answers:

Hi Adam,

With current code you have from Eventure theme, I think its already show all events by month,
Could you use it inside one of your template file? is there any error appear?

You still need to style it, for example in eventure theme:

/* -----CALENDAR POST STUFF----- */
.blackBar {width: 100%; text-align: center; line-height: 48px; background: #000; height: 48px; font-size: 10px; line-height: 48px; color: #aaa; letter-spacing: .7px;}
#loadMore {margin-top: -3px; border-top:3px solid #000; line-height: 45px; height: 45px;
display: none;
}
#loadMore a {color: #f8f8f8; line-height: 45px;}
#loadMore a:hover {color: #f8f8f8;}

#filter ul {list-style: none;}
#filter li {display: inline; font-size: 10px; line-height: 48px; margin: 0 8px 0 0; }
#filter li a {color: #aaa; text-transform: uppercase; line-height: 48px; display: inline-block;}
#filter li a:hover,
#filter li a.active {color: #fff;}

#filter.sticky {z-index: 2000; width: 100%}
#filterStickyWrapper,
#filterStickyWrapper #filter {width: 100% !important; left: 0 !important;}

li.box {display: block; float: left; height: 150px; width: 150px; position: relative; overflow: hidden; text-align: center; border-bottom: 3px solid #000; font-weight: bold;}
li.box a {display: block; height: 96px; width: 116px; padding: 27px 17px; color: #000;}
li.box .theDay {font-size:45px; line-height: 50px; }
li.box .theTitle {font-size: 11px; line-height: 14px; font-family: sans-serif; letter-spacing: .5px;font-family: serif;font-style: italic;}
li.box .theTitle span {text-transform: uppercase; display: inline-block; padding: 2px 8px 0; margin-bottom: 8px; background: #000; color: #f8f8f8; font-size: 9px; font-family: sans-serif; font-style: normal; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px;}
li#theEnd {background: #000; color: #f8f8f8; line-height: 160px;}
li.monthYear {background-color: #000; color: #f8f8f8; text-transform: uppercase; font-size: 24px; line-height: 24px; cursor: default;background-image: none;}
li.monthYear a.dateLink {padding: 0; color: #f8f8f8; padding-top: 40px; height: 110px; width: 100%;}
li.monthYear a.dateLink:hover {color: #000;}
li.monthYear span {letter-spacing: 2.5px;}


and the filter effect function I found:

//FILTER EFFECTS & APPEARANCE
var filterLink = jQuery('#filter a');
filterLink.click(function(){

jQuery('li.box').removeClass('hideMe');

filterLink.not(this).removeClass('active');
jQuery(this).addClass('active');

var activeCat = jQuery(this).html().toLowerCase().replace(/ /g,'');

jQuery('li.postEvent').not('li.'+ activeCat).addClass('hideMe').children().stop(true,true).animate({opacity:".1"},350);
jQuery('li.'+ activeCat).children().stop(true,true).animate({opacity:"1"},350);

return false;
});
jQuery('#filter li').not(':first').prepend("/ &nbsp;&nbsp;&nbsp;");

flint_and_tinder comments:

I have tried it, attached is a screenshot of the results.

As described to Arnav, it's not a styling issue. Eventure arranges the posts (events) by date/month by using the <strong>post creation date.</strong> So event date = post date. However, The Events Calendar uses <strong>specific meta data for the event date and not the post date.</strong>

As a result using the code directly from Eventure, displays the Events on the day the event posts were created, <strong>not</strong> the day the event is due to occur.


flint_and_tinder comments:

I have tried it, attached is a screenshot of the results.

As described to Arnav, it's not a styling issue. Eventure arranges the posts (events) by date/month by using the <strong>post creation date.</strong> So event date = post date. However, The Events Calendar uses <strong>specific meta data for the event date and not the post date.</strong>

As a result using the code directly from Eventure, displays the Events on the day the event posts were created, <strong>not</strong> the day the event is due to occur.


Christianto comments:

Ok,

Please try this code:
[[LINK href="http://pastebin.com/4Vwqc2PL"]]http://pastebin.com/4Vwqc2PL[[/LINK]]

its already include css and js function, so you could remove it if you want.

flint_and_tinder comments:

Yes, Yes, Yes!

Good man Christianto. :-)

2013-01-20

Arnav Joy answers:

<div class="archives">

<?php
global $wpdb;
$months = $wpdb->get_results("SELECT DISTINCT MONTH(post_date) AS month , YEAR(post_date) AS year FROM $wpdb->posts WHERE post_status = 'future' and post_type = 'tribe_events' GROUP BY month, year ORDER BY post_date DESC");

$posts = $wpdb->get_results("SELECT id, post_title, DAY(post_date) AS post_day , MONTH(post_date) AS month , YEAR(post_date) AS year FROM $wpdb->posts WHERE post_status = 'future' and post_type = 'tribe_events' ORDER BY post_date DESC");

foreach($months as $this_month){ ?>

<div class="month">

<h2><?php echo date("F", mktime(0, 0, 0, $this_month->month, 1, $this_month->year)); ?> <?php // echo $this_month->year; ?></h2>


<?php for ($i = 0; $i <= count($posts); $i++){?>
<div><?php echo $posts[$i]->post_day;?></div>
<?php if(($this_month->year == $posts[$i]->year)&&($this_month->month == $posts[$i]->month)){?>

<p><a href="<?php echo get_permalink($posts[$i]->id); ?>"><?php echo $posts[$i]->post_title; ?></a></p>

<?php } ?>

<?php } ?>

</div><!-- month -->

<?php } ?>

</div><!-- archives -->

flint_and_tinder comments:

That's not displaying anything I'm afraid.

Arnav Joy comments:

your post is sheduled ?

if not then change

post_status = 'future'

to

post_status = 'publish'

or

post_status = 'draft'

as per your post status of "tribe_events" posts

flint_and_tinder comments:

Just to clarify, unlike the Eventure theme, events created by The Event Calendar do not use the post creation date as the event date. Therefore the post date is irrelevant.

I need the loop to get the start date field of the post and display them based on those.

Please see Christianto's code here:
wpquestions.com/question/showChrono?id=7849

Arnav Joy comments:

in this question , you have attached a screenshot ,
http://wpquestions.com/question/showChrono?id=7849

at bottom right corner which list the events , do you want something like that ?
how did you disply that ?

flint_and_tinder comments:

It's the section under 'Calendar' I want.

You will see the design mimics that of the theme I am trying to emulate:
http://themeforest.net/item/eventure-responsive-events-wp-theme/full_screen_preview/1529155

Code used by Eventure is posted above.