Calendar iframe doesn't show all latest created events(especially shared calendar events)

Question

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?

Answer 1

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.