WordPress.org

Ready to get started?Download WordPress

Forums

The Events Calendar
[resolved] How can I show the Month and List view on the same page (9 posts)

  1. fawlty04
    Member
    Posted 9 months ago #

    Hi community,

    I would like to show a list of upcoming events below the calendar grid in the month view. I edited the month content.php file to include the list's loop hoping that would hack it, but it randomly picks a single event, and never loops again. (Tried a number of other things to no avail).

    This seems totally doable, but I'm a few snippets shy of being clever enough with PHP to figure this one out. Can anyone help? This is especially necessary since mobile users won't see the grid, just the list.

    The site I'm working on is http://concertpunch.com/

    I almost gave up and put in an iFrame last night, please save me from bad design!

    Thanks!

    http://wordpress.org/plugins/the-events-calendar/

  2. Barry Hughes
    Member
    Plugin Author

    Posted 9 months ago #

    Can you share the code you have laid down so far - and have you tried using the tribe_get_events() function? Thanks!

  3. fawlty04
    Member
    Posted 9 months ago #

    Hey, I've just pasted the loop code into the month/content.php

    <h2 class="tribe-events-boomcats-upcoming">Upcoming Events</h2>
    
    <div class="tribe-events-loop hfeed vcalendar">
    	<?php while ( have_posts() ) : the_post(); ?>
    		<?php do_action( 'tribe_events_inside_before_loop' ); ?>
    
    		<!-- Month / Year Headers -->
    		<?php tribe_events_list_the_date_headers(); ?>
    
    		<!-- Event  -->
    		<div id="post-<?php the_ID() ?>" class="<?php tribe_events_event_classes() ?>">
    			<?php tribe_get_template_part( 'list/single', 'event' ) ?>
    		</div><!-- .hentry .vevent -->
    
    		<?php do_action( 'tribe_events_inside_after_loop' ); ?>
    	<?php endwhile; ?>
    
    </div><!-- .tribe-events-loop -->

    Haven't gone as far as using tribe_get_events() because I'm not sure how to reset the days (made an attempt with rewind_days but got an error) nor am I able to figure out how events are ordered (since it can't be ID number...). Like I said, this is just beyond what I'm able to do w PHP.

  4. fawlty04
    Member
    Posted 9 months ago #

    So I just removed the while loop portion of the loop code and am at least now seeing an event that IS in the future (although, not the very next one). And I'm still only seeing one event. Oh, and I have to put the <h2> inside the loop, otherwise it repeats itself if I use browser fwd/back buttons.

    The code appended to the bottom of the custom month/content.php file now looks like:

    <div class="tribe-events-loop hfeed vcalendar">
    		<?php do_action( 'tribe_events_inside_before_loop' ); ?>
    
    <h2 class="tribe-events-boomcats-upcoming">Upcoming Events</h2>
    
    		<!-- Month / Year Headers -->
    		<?php tribe_events_list_the_date_headers(); ?>
    
    		<!-- Event  -->
    		<div id="post-<?php the_ID() ?>" class="<?php tribe_events_event_classes() ?>">
    			<?php tribe_get_template_part( 'list/single', 'event' ) ?>
    		</div><!-- .hentry .vevent -->
    
    		<?php do_action( 'tribe_events_inside_after_loop' ); ?>
    
    </div><!-- .tribe-events-loop -->

    Nearly there, but of course, without the ability to loop, I'm not sure how to show, say, the next 7 events.

  5. fawlty04
    Member
    Posted 9 months ago #

    Okay, I think I resolved this. I found code on one of the Modern Tribe support pages which miraculously accomplished what I had been trying to do except for the glitch that whenever I used the back/fwd buttons on my browser, the list below the calendar grid would repeat itself.

    Had a lightbulb moment that in fact, I needed to be appending code to the month.php file, not the month/content.php file. All is fixed now—I hope. We'll see if there's an end-of-the-month glitch like there was for September, but I'm pretty sure I've figured this one out.

    Thanks for pointing me in the right direction with the tribe_get_events() function!

  6. fawlty04
    Member
    Posted 9 months ago #

    I was hoping to keep the styling of category colors that we see in the upcoming events list, but for some reason, the classes aren't being picked up... any guesses as to why?

    <h2 class="tribe-events-boomcats-upcoming">Upcoming Events</h2>
    <ul>
    	<?php
    
    	global $post;
    	$all_events = tribe_get_events(
    		array(
    			'eventDisplay'=>'upcoming',
    			'posts_per_page'=>7
    			)
    	);
    
    	foreach($all_events as $post) {
    	setup_postdata($post);
    	?>
    
    	<li style="list-style-type: none";>
    		<div id="post-<?php the_ID() ?>" class="<?php tribe_events_event_classes() ?>">
    		<h2 class="tribe-events-list-event-title summary"><a class="url" href="<?php echo tribe_get_event_link() ?>" title="<?php the_title() ?>" rel="bookmark"><?php the_title(); ?></a></h2>
    		<span class="event-date"><a href="<?php the_permalink(); ?>"><?php echo tribe_get_start_date($post->ID, true, 'M j, Y'); ?></a></span>
    
    		<?php if ( has_post_thumbnail() ) { ?>
    
    			<div class="event-thumb">
    				<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('thumbnail'); ?></a>
    			</div>
    			<div class="event-excerpt">
    				<?php the_excerpt(); ?>
    			</div>
    
    		<?php } else { ?>
    
    			<div class="event-content">
    				<?php the_content(); ?>
    			</div>
    
    		<?php } ?>
    	</div>
    	</li>
    
    	<?php } //endforeach ?>
            <?php wp_reset_query(); ?>
    </ul>
  7. Barry Hughes
    Member
    Plugin Author

    Posted 9 months ago #

    Difficult to say - are the classes being outputted correctly via your use of tribe_events_event_classes() and so is this a CSS problem / can you share the relevant CSS rules?

  8. fawlty04
    Member
    Posted 9 months ago #

    When I Inspect Element, the div shows the correct post-ID, but nothing after class... e.g. <div id="post-180" class>

    tribe_events_event_classes() works just fine in the list loop when I'm looking at http://concertpunch.com/calendar/upcoming/ In that case, the div's class renders correctly: <div id="post-180" class="hentry vevent type-tribe_events post-180 tribe-clearfix tribe-events-category-concert tribe-events-category-jazz tribe-events-category-msm tribe-events-category-msm-jazz tribe-events-venue-112 tribe-events-organizer-111">

    I'm using the Category-Colors plugin to colorize events on the calendar grid and in the upcoming list. Not sure if that makes a difference.

    Seems like a quirk in my code that it's not showing up where I have it.

    I was able to get a few classes to show up via tribe_events_the_month_day_classes() and tribe_events_the_month_single_event_classes() but not the classes I need in order for the colorization to appear.

  9. Barry Hughes
    Member
    Plugin Author

    Posted 9 months ago #

    Certainly seems like a quirk and I can appreciate it must be an annoying one. Simply because this is outwith the scope of what we can offer support for (since it's very much a customization) I'm afraid I'll have to bow out of this thread, but we do wish you luck - it's great to see interesting things like this being built on top of The Events Calendar :-)

Reply

You must log in to post.

About this Plugin

About this Topic