Embedded Google Calendar will not update

Question

I have the following html in my home.html page :

<ion-content>
    <ion-refresher (ionRefresh)="doRefresh($event)">
    <ion-refresher-content></ion-refresher-content>
  </ion-refresher>

      <div class="googleCalendar">
        <iframe src="https://calendar.google.com/calendar/embed?showDate=0&amp;showPrint=0&amp;showCalendars=0&amp;height=600&amp;wkst=2&amp;hl=ro&amp;bgcolor=%233366ff&amp;src=catalintium%40gmail.com&amp;color=%231B887A&amp;ctz=Europe%2FBucharest?nocache"
          style="border-width:0" width="400" height="600" frameborder="0" scrolling="no"></iframe>
      </div>
</ion-content>

And this inside my home.ts Homepage class :

doRefresh(refresher) {
    console.log('Begin async operation', refresher);

    setTimeout(() => {
      console.log('Async operation has ended');
      refresher.complete();
    }, 2000);
  }

The calendar itself is showing,but everytime I add events in Google calendar, they won't appear in my calendar no matter how much i refresh the page. Thanks for helping.

score 0 · Accepted Answer · answered Sep 06 '17 at 15:57

Well, your doRefresh() function only logs something to the console. How do you expect it to refresh the page if there is no logic to do so?

To refresh/reload the iframe containing your calendar you need to get a reference to the iframe in your code and then in your refresh-function you ned to set the src property of the iframe again. How do we do that?`

Add a template reference variable to your iframe:

<iframe #myIframe src="https://calendar...>

Then in your .ts class you add a ViewChild to get a reference to the DOM-Element, and inject the Renderer class in you constructor:

export class YourClass {
  @ViewChild('myIframe', { read: ElementRef }) iframeRef;

  constructor(private renderer: Renderer) {}
}

And in your refresh function you set the src property again as this should refresh the iframe (from here):

doRefresh(refresher) {    
  this.renderer.setElementProperty(this.iframe.nativeElement, 'src', `https://calendar...`);

  setTimeout(() => {
    refresher.complete();
  }, 2000);
}

That should do the trick.

Edit: If you have problems with URL sanitizing have a look at this question.

Embedded Google Calendar will not update

1 Answers1