msgraph-sample-javascriptspa/graph-tutorial/graph.js at main · microsoftgraph/msgraph-sample-javascriptspa · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.

// <graphInitSnippet>
letgraphClient=undefined;

functioninitializeGraphClient(msalClient,account,scopes)
{
// Create an authentication provider
constauthProvider=newMSGraphAuthCodeMSALBrowserAuthProvider
.AuthCodeMSALBrowserAuthenticationProvider(msalClient,{
account: account,
scopes: scopes,
interactionType: msal.InteractionType.PopUp
});

// Initialize the Graph client
graphClient=MicrosoftGraph.Client.initWithMiddleware({authProvider});
}
// </graphInitSnippet>

// <getUserSnippet>
asyncfunctiongetUser(){
returngraphClient
.api('/me')
// Only get the fields used by the app
.select('id,displayName,mail,userPrincipalName,mailboxSettings')
.get();
}
// </getUserSnippet>

// <getEventsSnippet>
asyncfunctiongetEvents(){
constuser=JSON.parse(sessionStorage.getItem('graphUser'));

// Convert user's Windows time zone ("Pacific Standard Time")
// to IANA format ("America/Los_Angeles")
// Moment needs IANA format
letianaTimeZone=getIanaFromWindows(user.mailboxSettings.timeZone);
console.log(`Converted: ${ianaTimeZone}`);

// Configure a calendar view for the current week
// Get midnight on the start of the current week in the user's timezone,
// but in UTC. For example, for Pacific Standard Time, the time value would be
// 07:00:00Z
letstartOfWeek=moment.tz(ianaTimeZone).startOf('week').utc();
// Set end of the view to 7 days after start of week
letendOfWeek=moment(startOfWeek).add(7,'day');

try{
// GET /me/calendarview?startDateTime=''&endDateTime=''
// &$select=subject,organizer,start,end
// &$orderby=start/dateTime
// &$top=50
letresponse=awaitgraphClient
.api('/me/calendarview')
// Set the Prefer=outlook.timezone header so date/times are in
// user's preferred time zone
.header("Prefer",`outlook.timezone="${user.mailboxSettings.timeZone}"`)
// Add the startDateTime and endDateTime query parameters
.query({startDateTime: startOfWeek.format(),endDateTime: endOfWeek.format()})
// Select just the fields we are interested in
.select('subject,organizer,start,end')
// Sort the results by start, earliest first
.orderby('start/dateTime')
// Maximum 50 events in response
.top(50)
.get();

updatePage(Views.calendar,response.value);
}catch(error){
updatePage(Views.error,{
message: 'Error getting events',
debug: error
});
}
}
// </getEventsSnippet>

// <createEventSnippet>
asyncfunctioncreateNewEvent(){
constuser=JSON.parse(sessionStorage.getItem('graphUser'));

// Get the user's input
constsubject=document.getElementById('ev-subject').value;
constattendees=document.getElementById('ev-attendees').value;
conststart=document.getElementById('ev-start').value;
constend=document.getElementById('ev-end').value;
constbody=document.getElementById('ev-body').value;

// Require at least subject, start, and end
if(!subject||!start||!end){
updatePage(Views.error,{
message: 'Please provide a subject, start, and end.'
});
return;
}

// Build the JSON payload of the event
letnewEvent={
subject: subject,
start: {
dateTime: start,
timeZone: user.mailboxSettings.timeZone
},
end: {
dateTime: end,
timeZone: user.mailboxSettings.timeZone
}
};

if(attendees)
{
constattendeeArray=attendees.split(';');
newEvent.attendees=[];

for(constattendeeofattendeeArray){
if(attendee.length>0){
newEvent.attendees.push({
type: 'required',
emailAddress: {
address: attendee
}
});
}
}
}

if(body)
{
newEvent.body={
contentType: 'text',
content: body
};
}

try{
// POST the JSON to the /me/events endpoint
awaitgraphClient
.api('/me/events')
.post(newEvent);

// Return to the calendar view
getEvents();
}catch(error){
updatePage(Views.error,{
message: 'Error creating event',
debug: error
});
}
}
// </createEventSnippet>