Conditionally load list view instead of month for smaller screen sizes?

[Robin]

LOVE 3.0–love it! I currently have my default calendar view set to month, but it is not great on a phone screen. Is it possible to conditionally load the list view instead if the screen size is a certain width, similar to a CSS media query? I assume it would have to be PHP based because I would need to call a different template file, rather than just rearranging the existing styling (my site is responsive).

[Barry]

I’d imagine that is possible – but probably wouldn’t be “bulletproof” since it hinges on reliable information being returned from the user agent (or web browser, in plain English).

It is, however, beyond the scope of support that we can offer to guide you through this one – definitely feel free to come back if you hit on any more specific questions along the way, though, and we’ll happily prod you in the right direction if we can.

[Robin]

OK, I understand that it’s iffy…I’m used to using media queries to restyle for mobile anyway. My issue seems to be that the month view is unable to resize for mobile screens–looks like it gets hung up at a certain width because the headings (day names) can’t shrink below a certain point.

So a feature request from me would be for the template to change the day names to S/M/T/W/R/F/S, similar to the calendar widget, for smaller screens. Otherwise, I believe the table could adjust with just CSS, but the titles of the days are the issue on resizing. At this point, the month view is impractical for mobile. 🙁

[Barry]

Definitely feel free to post any feature requests on UserVoice:

https://tribe.uservoice.com/forums/195723-feature-ideas

That also means other users can indicate their support.

For the sake of kicking ideas around, I’m inclined to think that it could be restructured (if you fancied diving into some code) so that either:

* It becomes div based, but is structured such that it can cleanly adopt table > table row > table cell display properties

* It stays table based and CSS is used – when the right conditions are met – to break it out of those properties, so that although the markup is still structurally a table it displays as if they were a set of divs

Or alternatively the browser agent or some other data could be used to decide that yes, it’s a mobile device, and switch from month view to list.

[Liz]

Lots of requests for this option from my clients too, would love to have it the option to show the list view on screens smaller than 650 as that seems to be the break point when all the right side starts to disappear on a mobile device.

[Barry]

Definitely do add your voice to our UserVoice page for this 🙂

https://tribe.uservoice.com/forums/195723-feature-ideas

[Author]

Posts