SPFX WebPart consuming Graph api to display events is not working in IE11

[applekajui6]

Category

Issue

• Bug
  SPFX WebPart consuming Graph api to display events is not working in IE11

Describe the bug

I have created SPFX Webpart which displays calendar events using Graph API. It is working in Chrome but not in IE11

[msft-github-bot]

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

[msft-github-bot]

The more context details you can provide, the easier it is to help assist on issues. Any code you can provide and/or screenshots of the issue also help. The easier you can make it to reproduce the issue, the easier and quicker it is for someone to help you. Please refer to How to Create Good Issues, specifically How to Create Good Issues: Include context, in our wiki for more details.

[applekajui6]

used the same code in this link https://github.com/microsoftgraph/msgraph-training-spfx/tree/master/Demos/02-events .. it is not working in ie11

[andrewconnell]

The Needs: Context Detail is more than just "where is your code". It would help if you can provide detail son what isn't working. What error are you getting, where, etc.

[applekajui6]

Im getting above error in IE11 when trying to display upcoming events using Graph API in my spfx webpart:
SPFX Version: 1.9.1
im getting response null in IE11 but its working in chrome or Edge
please see my sample code below:

  this.props.graphClient
      .api('/me/mailboxSettings/timeZone')
      .get ( (error:any,eventsResponse:any,rawResponse?:any)=>{
var timeZone:string=  eventsResponse.value;
var currentDate="end/dateTime ge "+"'"+getDate+"'"; 
this.props.graphClient
      .api('/me/calendar/events')    
        .header("Prefer","outlook.timezone=\""+timeZone:string+"\"")     
        .filter(currentDate)      
        .orderby("start/dateTime")
        .top(3)
        .get( (error:any,eventsResponse:any,rawResponse?:any)=>{
 const calendarEvents:MicrosoftGraph.Event[]=eventsResponse.value;
              console.log('calendarEvents',calendarEvents);
              this.setState({events:calendarEvents});

});

});