MIcrosoft API get Calendar Event description and show it appropriately

Question

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

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

here there is a topic similar, but I don't know how to apply that solution with Axios: https://stackoverflow.com/questions/28436361/office-365-rest-api-retrieving-plain-text-email — TheOldBlackbeard, Jan 25 '19 at 10:47

score 2 · Accepted Answer · answered Jan 25 '19 at 15:39

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

The response is ok, I mean the the body content type is text as in the header specification...but the response.body.content is an empty string, if indeed i don't write in the header 'Prefer' : 'outlook.body-content-type="text"', indeed of an empty string I have: ↵ ↵ ↵ ↵

↵ — TheOldBlackbeard, Jan 28 '19 at 08:51
Maybe there is a way to stop Microsoft Exchange from automatically converting to text? And if yes I have to set something on the server or I it is something that I can do also with the code? — TheOldBlackbeard, Jan 28 '19 at 10:49
I found out the the problem was not the code bu just a setting of privilege in Microsoft Outlook, so now it works! — TheOldBlackbeard, Jan 29 '19 at 08:56

Gh05d · Answer 2 · 2019-01-25T11:27:12.417

0

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

edited Jan 25 '19 at 11:27

answered Jan 25 '19 at 10:48

Gh05d

7,923
7
33
64

I tried but the JSON response is the same: [![enter image description here][1]][1] [1]: https://i.stack.imgur.com/evBxn.png I think that the problem is that the body contentType is in html, indeed should be text. In the link that i put in the comment one guy suggest to add > Prefer: outlook.body-content-type="text" But I don't understand in my case, with Axios, how I should apply that solution – TheOldBlackbeard Jan 25 '19 at 11:07
I edited my answer and added a custom header. You can use this syntax to add headers. Just make sure that the spelling is correct and use quotes for properties with hypens. – Gh05d Jan 25 '19 at 11:28
I edited my file, but it doesn't work :( in the response it is still "body: {contentType: "html"}" – TheOldBlackbeard Jan 25 '19 at 11:43
I edited the header in this way: `code headers: { Authorization: `Bearer ${accessToken}`, Prefer: 'outlook.body-content-type="text"', },` and now in the json response I have contentType: "text", but now the description in the component doesn't have a string as in the image i post in my question, but it is empty – TheOldBlackbeard Jan 25 '19 at 12:01
Try it like this: ```code headers: { Authorization: Bearer ${accessToken}, Prefer: "outlook.body-content-type": "text", }``` or like this: ```code headers: { Authorization: Bearer ${accessToken}, Prefer: outlook: { "body-content-type": "text" } }``` – Gh05d Jan 25 '19 at 12:14
Unfortunately the result is the same: I mean, now adding that "Prefer etc. etc." it works, because in the json response body.contenType if finally text, but it's like as the event doens't have a description, but it has. I try the same query with Micrososft Graph Explorer with a Sample calendar and there it work: the Json file in body.content ha a string with the description of the event...Could be maybe "Microsoft Exchange Server" the problem? OR some rule to be setting up? – TheOldBlackbeard Jan 25 '19 at 13:29

MIcrosoft API get Calendar Event description and show it appropriately

2 Answers2