Responsive Calendar

[Rob]

The last topic was closed so I opened this one to respond the last couple of posts. Here is what I did to make this work for my situation. I wanted to used the calendar view for this site build but as you know when you drop to a mobile phone size screen the calendar table just doesn’t work.
I duplicated the “month.php” template inside the “tribe-events” folder I created in my theme. In looking at the way the templates work I could see that the list view inside “list.php”. I took this line and added it to the month.php file.

Now when the page loads it gives the calendar view and the list view right under it. Each uses a unique class identifier so it easy target the divs that hold the content. I simply used the @mediascreen methods in my sites style sheet to hide the list view when over 600 pixels while showing the calendar view. Then under 600 pixels I hide the calendar view and display the list view. All using display:block or display:none.
Works perfect and only took me about 15 minutes to find and work it out.

[Rob]

It didn’t take my code sample.
I’ll try again.

[Rob]

1:

2:

3:
4:

5:
6:
7:
8:

[Rob]

if ( !defined('ABSPATH') ) { die('-1'); } ?>

<?php do_action( 'tribe_events_before_template' ) ?>

<!-- Tribe Bar -->
<?php tribe_get_template_part( 'modules/bar' ); ?>

<!-- Main Events Content -->
<?php tribe_get_template_part('month/content'); ?>
<?php tribe_get_template_part( 'list/content' ); ?>
<?php do_action( 'tribe_events_after_template' ) ?>

[Rob]

This is awesome! Thanks for posting it, Rob.

[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