I've managed to embed Google Calendar into a React component, but the problem is I could observe that the embedded calendar doesn't get the latest events that is added to the email that is authenticated with gapi
.
The calendar iframe URL is this https://calendar.google.com/calendar/b/1/embed?src={VALID_CALENDAR_EMAIL}
calendar.util.js
const CALENDAR_EMBED_BASE_URL =
'https://calendar.google.com/calendar/embed?src=';
export const getCalendarEmbedUrl = email =>
`${CALENDAR_EMBED_BASE_URL}${email}`;
CalendarIframe.jsx component
import React, { PureComponent } from 'react';
import { getCalendarEmbedUrl } from 'calendar.util.js';
class CalendarIframe extends PureComponent {
render() {
const { email } = this.props;
const embedUrl = getCalendarEmbedUrl(email);
return (
<div className="calendarEmbedWrapper">
<iframe
title="Calendar"
id="calendarEmbed"
width="100%"
src={embedUrl}
/>
</div>
);
}
}
What's a way to ensure the embedded calendar is as dynamic as it should be?
I figured out how to solve the embedded calendars problem. In the embed string I just have to append all calendarIds into the string such that it would look like below:
https://calendar.google.com/calendar/embed?src=calendarID + &src=anotherCalendarId
https://calendar.google.com/calendar/[email protected]&[email protected]
It would show all events from multiple calendar ids embedded as such.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With