I'm using embedded google calendar on a responsive website and in my opinion it works quite well on a mobile device. Well it works on my LG G3 with Android 5.0 Lollipop.
But there seems to be a problem as I had some complaints from some iPhone users where the calendar would display fine but not populate any actual events.
So, what to do. One
solution was brought to my attention where two versions of the calender code is used in two div's. One div for normal view and one div for mobile view and some css to hide or show based on the width of the screen. Yes, it works. But the calender view in this solution looses part of it's functions like the week view. I think it is a bad solution where you "fix" one thing by making it worse for those where it works.
My solution might not be the best in the world, but I'm trying to fix only what is broken. The iPhone view. That's why I use php to find out what device or browser is viewing the page and then I select which calender code I use. And I use a bit from fhe CSS from the other solution.
The main difference is the URL to the calender is "embed" vs. "htmlembed"
Original:
https://www.google.com/calendar/embed?
The fixed version:
https://www.google.com/calendar/htmlembed?
The web page has a Wordpress cms and to use php code on a page or a post we need to install some plugin for that, I choose
PHP Code for posts for this job, but you can use anything that works for you.
Here is the code I use to select how I display the calendar
<?php
if(strstr($_SERVER['HTTP_USER_AGENT'],'iPhone') || strstr($_SERVER['HTTP_USER_AGENT'],'ipod'))
{
?>
<div class="responsive-iframe-container">
<iframe style="border-width: 0;" src="https://www.google.com/calendar/htmlembed?***"></iframe>
</div>
<?
}else {
?>
<div class="responsive-iframe-container-normal">
<iframe src="https://www.google.com/calendar/embed?***"></iframe>
</div>
<?
}
?>
Here is the CSS I added, it might need some adjustments.
.responsive-iframe-container-normal iframe,
.vresponsive-iframe-container-normal object,
.vresponsive-iframe-container-normal embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.responsive-iframe-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 400px;
overflow: hidden;
}
.responsive-iframe-container iframe,
.vresponsive-iframe-container object,
.vresponsive-iframe-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
If you have any improvement to this or a better method, please feel free to share it here in the comments.
