I also made a template to do this with some additional features. For the first (x) top events this will show the full content, custom class, and a featured image.
The shortcode:
[eo_events showpastevents=false]
The template:
<?php global $eo_event_loop,$eo_event_loop_args;
//Date % Time format for events
//Custom date format to display like this: Saturday, May 10, 2013.
$date_format = 'l, F j, Y';
$time_format = get_option('time_format');
//The list ID / classes
$id = $eo_event_loop_args['id'];
$classes = $eo_event_loop_args['class'];
?>
<?php if( $eo_event_loop->have_posts() ): ?>
<ul id="<?php echo esc_attr($id);?>" class="<?php echo esc_attr($classes);?>" >
<?php while( $eo_event_loop->have_posts() ): $eo_event_loop->the_post(); ?>
<?php
//Count how many times the loop has gone around too use for adding 'content' to first entry.
$counter++;
?>
<?php
//Generate HTML classes for this event
$eo_event_classes = eo_get_event_classes();
//For non-all-day events, include time format
$format = ( eo_is_all_day() ? $date_format : $date_format.' '.$time_format );
?>
<li class="<?php echo esc_attr(implode(' ',$eo_event_classes));
//add custom class 'up-and-coming' to the desired number of events.
if($counter < 2) : echo (' up-and-coming') ; endif;
?>" >
<a href=
"<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" >
<?php the_title();?>
</a>
<?php echo __('on','eventorganiser') . ' '.eo_get_the_start($format); ?>
<?php //If it has one, display the thumbnail
if (has_post_thumbnail())
{ ?>
<a href=
"<?php the_permalink(); ?>">
<?php the_post_thumbnail('thumbnail', array('class'=>'img-up-coming'))?>
</a>
<?php
}
?>
</li>
<?php // Conditional output to show full content for desired number of events and regular bullet list for the rest, or uncomment the else stement to use the excerpt.
if($counter < 2) : the_content();
//else: the_excerpt();
endif; ?>
<?php endwhile; ?>
</ul>
<?php elseif( ! empty($eo_event_loop_args['no_events']) ): ?>
<ul id="<?php echo esc_attr($id);?>" class="<?php echo esc_attr($classes);?>" >
<li class="eo-no-events" > <?php echo $eo_event_loop_args['no_events']; ?> </li>
</ul>
<?php endif; ?>
… and a little css:
li.up-and-coming{
font-size: 18px;
margin-bottom: 10px;
font-weight: bolder;
list-style-type: square;
}
li.up-and-coming a{clear:left;}
#content .img-up-coming {margin-top:10px;}
li.eo-event-future{clear:left}