[Pro] responsive google calendar

Freeway
1

Hi I am trying to add a google calendar to backdraft 1.5 website in FW6 seems to work but on iPhone calendar seems to keep growing in height. has anyone experienced anything similar?

Also would like to change calendars background colour to sites but in an iframe cannot work out how to adjust google embedded code as you would if you had added via ‘add code’ action.

Any ideas appreciated

Matt

http://teamjura.info/calendar.html

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

2

Matt,

I’m wondering if you wrote this post a long time ago and it got posted now, as the page at the link you posted doesn’t use a Google Calendar and looks awesome in my iOS simulator.

If I’m wrong, let me know!

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

3

You could use the Page markup to insert additional CSS before which changes the default color settings used in the calendar.

<style>
.fc-border-separate {
     background-color: #fff;
</style>

This, for example, adds a white background color to the table. You can target any class or id you need to change.

Richard

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

4

I’m wondering if you wrote this post a long time ago and it got posted now

http://teamjura.info/google/calendar.html

Hi Caleb, Thanks you for getting back and in my frustration I loaded my old upload to see if I could get to work. This uses fullcalendar by Adam Shaw which worked a treat till Google shut down V1 and V2 of their Calendar APIs, which FullCalendar relied upon. I haven’t been able to get my head around getting APISs to work so was going to fallback on an embedded version. have added link again and also noticed it only seems to show in Safari?

once again ideas appreciate.

Thank you Richard tried adding style but not working maybe have added incorrect.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

5

Matt,

Thanks for your patience, I see what’s going on here. You have added the video-container class to the iframe, and this is causing the rampant growth. Remove that class, and instead simply set the width to 100% in the inspector.

This will disable the proportional scaling, but will fix the problem on iOS. Unfortunately, it doesn’t look like iOS likes proportional scaling for the calendar (Apple is working very hard to build the next IE6).

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

6

Hi Caleb,Have deleted class. Width is at 100% but the only way to see calendar is with a fixed height of 600px. The calendar no longer shrinks to different breakpoints.
Do I need to add something to the iframe extended div?

Cheers Matt.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

7

Tell you what, ditch the iFrame action. It only convolutes the issue.

Instead, take the Google Calendar embed code and stick it inside a markup item. The code should look like this:

<iframe src="https://www.google.com/calendar/gobbledy-gook" style="border: 0" width="800" height="600" frameborder="0" scrolling="no"></iframe>

Now, we need to tweak it to make the calendar embed flexible. Change the value of style= from this…

"border: 0"

to this…

"border: 0; width: 100%"

Reupload the website and let me know how it worked for you.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

8

Trying to make a responsive Google calendar myself. Caleb’s solution of setting the width to 100% works well… the width of the calendar shrinks and grows with the browser. But how to control the height? I either set it to a set pixel height (which doesn’t work well as you can imagine) and if I set the height to 100% the same way, it remains only about 150 pixels high. I’ve tried setting the height of the containing html box to other things as well, to no avail. Any nice easy solutions to making the Google calendar fully responsive, preferably as easy as Caleb’s solution to the width?

freewaytalk mailing list
email@hidden
Update your subscriptions at:

9

Height is much more difficult to control than weight. Basically, you’ll have to stick to pixel-based heights, as all percentages are based off of the element’s parent’s width. However, you can use media queries (breakpoints) to make it shorter/taller for narrower/wider devices.

freewaytalk mailing list
email@hidden
Update your subscriptions at: