CODEWITHSUNDEEP
reactjsmicrosoft-graph-apimicrosoft-graph-calendar
TheOldBlackbeard
TheOldBlackbeard

Reputation: 423

MIcrosoft API get Calendar Event description and show it appropriately

In my React project, I made an Axios call to populate a Calendar Event List taking data from Microsoft Outlook Calendar (using Microsoft API). The result is the following enter image description here

As you can see only event description give me a problem. Indeed to show the event description it shows me an HTML string without the event detail.

I read that I have to put in the header of my request Content-type:text, but I tried and It doesn't work. How I can solve that? This is my Axios Request

getEvents(startDate, endDate, accessToken) {
    const startDateString = startDate.toISOString();
    const endDateString = endDate.toISOString();
    axios.get(
      `https://graph.microsoft.com/v1.0/users/${USER_PUBLIC_ID}/calendarview?startdatetime=${startDateString}&enddatetime=${endDateString}&orderby=start/dateTime`,
      {
        headers: {
          Authorization: `Bearer ${accessToken}`,
        },
      },
    ).then(response => this.setEvents(response.data.value))
      .catch((error) => {
        console.error(error.response);
      });
  }

Upvotes: 2

Views: 2654

Answers (2)

Vadim Gremyachev
Vadim Gremyachev

Reputation: 59338

For that matter Prefer: outlook.body-content-type="text" header needs to be specified.

According to documentation:

To specify the desired format to be returned in the Body and UniqueBody properties in a GET request, use the Prefer: outlook.body-content-type header:

  • Specify Prefer: outlook.body-content-type="text" to get a message body returned in text format.
  • Specify Prefer: outlook.body-content-type="html", or just skip the header, to return the message body in HTML format.

Example

getEvents(startDate, endDate, accessToken) {
    const startDateString = startDate.toISOString();
    const endDateString = endDate.toISOString();
    return axios.get(
      `https://graph.microsoft.com/v1.0/users/${USER_PUBLIC_ID}/calendarview?startdatetime=${startDateString}&enddatetime=${endDateString}&orderby=start/dateTime`,
      {
        headers: {
          'Authorization': `Bearer ${accessToken}`,
          'Content-Type': 'application/json',
          'Prefer' : 'outlook.body-content-type="text"'
        }
      }
    );
}

Upvotes: 2

Gh05d
Gh05d

Reputation: 8982

You need to give axios a config object. Currently, you are using the get property, that is why your code doesn't work currently:

axios({
url: `https://graph.microsoft.com/v1.0/users/${USER_PUBLIC_ID}/calendarview?startdatetime=${startDateString}&enddatetime=${endDateString}&orderby=start/dateTime`,
method: "GET",
        headers: {
          Authorization: `Bearer ${accessToken}`,
          "Content-type": "text"
        },
})

You can read more here: https://github.com/axios/axios

Upvotes: 0

Related Questions