Add Week View Filter to List View

[imaginate White]

Hello, this topic is continuation of this discussion: https://theeventscalendar.com/support/forums/topic/add-week-calendar-view-filter/#post-1107882

I’ve got the filter styling how I want it, but I can’t seem to figure out how to add the week view to the list. When I add it to the single-event.php template in my child theme it doesn’t work. Here’s what I’ve tried:

I put the loop-grid.php in my [child-theme]/tribe-events/pro/week/loop-grid.php, then I added this code to the [child-theme]/tribe-events/single-event.php

<!-- Calendar Grid -->
<?php tribe_get_template_part( 'pro/week/loop', 'grid' ) ?>

I’ve also tried adding this:

<div class="tribe-events-grid clearfix">
	<div class="tribe-grid-header clearfix">
		<div class="column first">
			<span class="tribe-events-visuallyhidden"><?php esc_html_e( 'Hours', 'tribe-events-calendar-pro' ); ?></span>
		</div>
		<div class="tribe-grid-content-wrap">
			<?php while ( tribe_events_week_have_days() ) : tribe_events_week_the_day(); ?>
				<div title="<?php tribe_events_week_get_the_date(); ?>" class="column <?php echo esc_attr( tribe_events_week_day_header_classes() ); ?>">
					<?php echo tribe_events_week_day_header(); ?>
				</div><!-- header column -->
			<?php endwhile; ?>
		</div><!-- .tribe-grid-content-wrap -->
	</div><!-- .tribe-grid-header -->

</div><!-- .tribe-events-grid -->

Let me know what I’m missing. Thanks.

[imaginate White]

I ended up just bringing the list view items to the week view instead of the week filter to the list. Let me know if you think that is the best way to go about it. Thanks.

[imaginate White]

Also, it looks like the week view doesn’t show up on mobile devices. Is there a way to get it to show and be responsive?

[Josh]

Hey,

Thanks for reaching out to us!

I’m not sure I’m following what you’re looking for exactly here. Based on the original link you provided in the previous post, it feels like utilizing the week view might not be the best fit for recreating that feature. I only say that because the week view is mainly used for seeing the week at a glance. The example of what you’re recreating appears to be more like single date views with a week navigation.

You may find the process a little easier to manage by utilizing the list view and adding a similar looking header navigation as the week view that gets the current date and the next 6 days and links them with something like “?tribe-bar-date=2016-05-08” added to the end. This would also give you a lot more flexibility with styling (possibly turning to a dropdown) on mobile.

But, if you’d like to allow the other to display on mobile, you would need to override the “display:none” that’s added in the stylesheet on “.tribe-events-week .tribe-events-grid” within your theme and then style the grid for mobile.

Let me know if this helps.

Thanks!

[Support Droid]

This topic has not been active for quite some time and will now be closed.

If you still need assistance please simply open a new topic (linking to this one if necessary)
and one of the team will be only too happy to help.

[Author]

Posts