Embedding Google calendar as iframe in a react app?

Question

Is there a way to implement an iframe of google calendar inside a react app without needing to manually handle events myself?

Like the webapp would show the iframe where they can login to google calendar then it will just show it inside the specific box.

I can only find solutions using a calendar library but not the approach that I'm thinking about.

Answer 1

Google has set the "X-Frame-Options" response header for requests to https://calendar.google.com/calendar/r (the default calendar homepage) to sameorigin , which means that this will not work:

<h2>Your Calendar:</h2>
<iframe src="https://calendar.google.com/calendar/r"></iframe>

If you try that, you will get a Refused to display '<URL>' in a frame because it set 'X-Frame-Options' to 'sameorigin'. . Essentially, the only domain that would be allowed to embed the default calendar pages would be Google's own domain.

That being said, there is some interesting options available. If you know the users gmail address, even if their calendar is private, as long as they are logged in, they can see an iframe with a source equal to 'https://calendar.google.com/calendar/embed?src=' + encodeURI(email); .

Demo: JSfiddle link (the built in embed tool is giving me grief).

However, if they are not logged in, detecting that and showing the Google Login page, like you are asking for, is difficult. If they are not logged in, an iframe with a GCal embed URL will automatically redirect to the login page, but because the login page has x-frame-options set to sameorigin , it will get blocked loading into the iframe. To see this in action, try the demo above in a logged-out incognito window and enter your gmail email.

Furthermore, as far as I can tell, you can't detect whether the loading of an iframe was blocked by x-frame-options with Javascript, so there is no easy way to redirect the user to login to Google if the calendar does not load.

I have a feeling the most reliable way to check logged in status is going to be through the Google Sign-in button . In addition, Google has a full API just for their Calendar product , including endpoints that would tell you which calendars a user has .