Support Forum

  • Page:
  • 1

Responsive Google Calendar

zentoolsIf you use Zentools please post a review at the Joomla! Extensions Directory.

7 years 9 months ago
Been chasing down all sorts of dead ends to integrate Google Calendar into a responsive theme.

Lots of testing and finally got it to go from tables to list view on phones

Figured this may save some wasted time

Just Change Title and XXX to reflect your needs
<div class="hidden-phone responsive-iframe-container"><iframe src="https://www.google.com/calendar/embed?title=TITLE%20&amp;height=575&amp;wkst=1&amp;bgcolor=%23FFFFFF&amp;src=XXX%40gmail.com&amp;color=%23B12D20&amp;ctz=Australia%2FMelbourne" scrolling="no" frameborder="0" height="575" width="100%"></iframe></div><div class="visible-phone"><iframe src="https://www.google.com/calendar/embed?mode=TITLE&amp;height=400&amp;wkst=1&amp;bgcolor=%23FFFFFF&amp;src=XXX%40gmail.com&amp;color=%23B12D20&amp;ctz=Australia%2FMelbourne" scrolling="no" frameborder="0" height="500" width="280"></iframe></div>
  • Andrew's Avatar
  • Andrew
  • 12 Month basic
  • 509 posts
  • 20 Thanks
  • Karma: 10
The administrator has disabled public write access.
7 years 9 months ago
Hi Andrew,

Thanks for the post

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
7 years 9 months ago
For users reading the thread Andrew has used visible-phone and hidden-phone classes to display and hide two different calendars on their respective screen widths

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.

zentoolsIf you use Zentools please post a review at the Joomla! Extensions Directory.

Happy Campers

Close