Responsive Calendar

[theshutterclick]

Is there a way to make the monthly calendar responsive? My month view of the Calendar resizes very differently on the iPad and iPhone then it does in a browser. Am i doing something wrong?

[Leah]

Hi theshutterclick,

Thanks for your note. The Events Calendar does have some responsive elements but it is not mobile-ready and may not display nicely on a tablet or phone. You’re definitely not doing anything wrong, it’s just not yet a built in feature. If you’re willing to dive a little deeper into the code for a solution, you might check out this thread on the subject. If you’d like to encourage us to add full responsiveness in an upcoming build, you can vote for it on our UserVoice Forum.

Best,
Leah

[Cynthia Lockley]

I added my vote in the UserVoice Forum for this. In order to make the calendar responsive, you will need to convert the HTML table code to CSS styled tables with DIVs so it is flexible. This should also make the calendar more accessible for screen readers who have trouble navigating HTML tables.

[jebs38]

Cynthia, Shutter & Leah, With a custom events calendar stylesheet you can just change the calendar with to max-width. That works like a charm. It’s a 2 minute fix!

[jebs38]

#tribe-events-content {
margin-bottom: 48px;
padding: 0 20px 20px 0;
position: relative;
max-width: 728px;
}

[Leah]

Thanks John!

[Rob]

I would like to ask more on this. I understand changing the CSS to handle most of the responsive needs but for a mobile smart phone would I would like to do is have my calendar page drop out and use the list view instead. Is there a way to code the template or the CSS to switch between the two?
Thanks, Rob

[Leah]

Hi Rob,

At this time, our calendar is not ready for mobile devices. You might be able to find a way to make it work, but that’s currently outside of our scope of support. We know it’s a very important feature, and it is one we’d like to add, but it’s just not possible at this time. I wish you the best of luck with customizing it to fit your needs. Thank you for your understanding.

Best,
Leah

[Andy Fragen]

Rob, actually using CSS media queries, like these. You can add the list widget to your site and then hide the calendar when the viewport is small and hide the widget when the viewport is large.

It won’t be truly responsive but it could get you to what you want to see.

[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