Search code examples
reactjsmicrosoft-graph-apimicrosoft-graph-calendar

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);
      });
  }

Solution

  • 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"'
            }
          }
        );
    }