Making Calendar View Responsive

[Christopher]

Hello and Merry Christmas!

I was wondering if you have some CSS code that would make the calendar view responsive. Changing it from the monthly calendar on a big screen (desktop) to the events list view for smaller resolution (smart phones or notebooks).

[Andy Fragen]

There already is a responsive view for mobile devices. Are you using the v3.9?

[Christopher]

Yes. But I want the monthly view to show on bigger screens and only upcoming events view on small screens.

The current responsive show mini monthly view and one event.

[Andy Fragen]

See if this doesn’t help. https://theeventscalendar.com/support/forums/topic/view-as-list-for-mobile-view-as-calendar-for-desktop-tablet/

[Christopher]

Where would you post the code:

if( wp_is_mobile() ) {
wp_safe_redirect( tribe_get_listview_link() );
}

In the event calendar php or wordpress?

[Brook]

Hello Christopher,

You would usually paste code like that inside of a theme’s functions.php file, since it is relevant to your current theme. If you have not made any past customizations to your theme then it is first recommended that you make those changes inside of a child theme, which WordPress details the whys and hows of Child Themes in the Codex. If you choose to go that route, then after making a child theme you would add the code to its functions.php file. If you prefer though you can just add that code to your current theme’s functions.php, which is easier but lacks any of the benefits mentioned in that Codex article.

Let us know if you have any questions. It might not hurt to make a backup first if you are new to the modification arena. Does that answer your questions? Did that works? I am happy to assist further if I can.

Cheers!

– Brook

[Christopher]

I made a child theme named: tribe-events. I put the code in as follows:

<?php
if( wp_is_mobile() ) {
wp_safe_redirect( tribe_get_listview_link() );
}
#—————————————————————–#
# Default theme constants
#—————————————————————–#
define(‘NECTAR_FRAMEWORK_DIRECTORY’, get_template_directory_uri() . ‘/nectar/’);
define(‘NECTAR_THEME_NAME’, ‘salient’);

#—————————————————————–#
# Load text domain
#—————————————————————–#

add_action(‘after_setup_theme’, ‘lang_setup’);
function lang_setup(){

But nothing changed. Did I do something wrong?

[Brook]

If it is not redirecting you to the /list/ view when you visit the page from your iPhone or iPad, that would be odd. Did you switch themes? When you create a child theme, you must make it the active theme by going to WP Admin > Appearance > Themes, and selecting “Activate” on your newly created child theme. Did that work?

Please let me know how I can be of assistance. Thanks!

– Brook

[Brook]

Since this topic has gone for a spell without and update I am going to archive. If however you still need anything please feel free to open a new topic and we will be happy to help.

Cheers!

– Brook

[Author]

Posts