Exercise - Access a user's calendar events by using Microsoft Graph

10 minutes

Let’s use all the concepts discussed up to this point and make changes to the sample app to access the calendar events.

Open Startup.cs in your editor and take a moment to explore the Microsoft Identity, Microsoft Graph, and ASP.NET Core middleware that is defined in ConfigureServices.
Locate the following code in the ConfigureServices() method. This code enables dependency injection for custom objects named GraphProfileClient and GraphEmailClient. The objects are scoped to the HTTP request, which means they'll be created once per request to the server.
```
services.AddScoped<GraphProfileClient>();
services.AddScoped<GraphCalendarClient>();
```
Open Graph/GraphCalendarClient.cs and take a moment to explore the existing code. Note the following fields and methods:
- Two readonly fields named _logger and _graphServiceClient are included in the class. Objects injected into the constructor will be assigned to these fields.
- The class contains GetEvents(), GetUserMailboxSettings(), and GetUtcStartOfWeekInTimeZone() methods.
Remove the existing code in the constructor.

Modify the constructor to inject ILogger<GraphCalendarClient> and GraphServiceClient and assign the parameter values to the associated fields:

public GraphCalendarClient(
  ILogger<GraphCalendarClient> logger,
  GraphServiceClient graphServiceClient)
{
    _logger = logger;
    _graphServiceClient = graphServiceClient;
}

Locate the GetEvents() method and replace the existing code with the following. This code defines start and end dates for calendar events that will be retrieved.

_logger.LogInformation($"User timezone: {userTimeZone}");
// Configure a calendar view for the current week
var startOfWeek = DateTime.Now;
var endOfWeek = startOfWeek.AddDays(7);
var viewOptions = new List<QueryOption>
{
  new QueryOption("startDateTime", startOfWeek.ToString("o")),
  new QueryOption("endDateTime", endOfWeek.ToString("o"))
};

Immediately below the previous code added in GetEvents(), add the following try/catch code blocks:

try
{

}
catch (Exception ex)
{
    _logger.LogError($"Error calling Graph /me/calendaview: { ex.Message}");
    throw;
}

Within the try block, add the following code to use the viewOptions, define the calendar event properties to return, define how to sort the results, and initiate the call to me/calendarView:

// Use GraphServiceClient to call Me.CalendarView
var calendarEvents = await _graphServiceClient
    .Me
    .CalendarView
    .Request(viewOptions)
    .Header("Prefer", $"outlook.timezone=\"{userTimeZone}\"")
    .Select(evt => new
    {
      evt.Subject,
      evt.Organizer,
      evt.Start,
      evt.End
    })
    .OrderBy("start/DateTime")
    .GetAsync();

return calendarEvents;

Save GraphCalendarClient.cs before continuing.
Open Pages/Calendar.cshtml.cs and take a moment to explore the existing code. Note the following features:
- The CalendarModel class contains several fields and properties such as _logger, _graphCalendarClient, _graphProfileClient, MailboxSettings, and Events.
- ILogger<CalendarModel>, GraphCalendarClient, and GraphProfileClient are injected into the constructor and assigned to the associated fields.
- A FormatDateTimeZone() method is included in the class. It’s used to format a DateTime object.
Locate the OnGetAsync() method and replace the existing code with the following code:
```
MailboxSettings = await _graphCalendarClient.GetUserMailboxSettings();
var userTimeZone = (String.IsNullOrEmpty(MailboxSettings.TimeZone))
    ? "Pacific Standard Time"
    : MailboxSettings.TimeZone;
Events = await _graphCalendarClient.GetEvents(userTimeZone);
```
This code retrieves the user’s mailbox settings, determines if a time zone is defined, and passes the user’s time zone to the GetEvents() method that you created earlier in the GraphCalendarClient class. The retrieved events are stored in the class’s Events property.
Save Calendar.cshtml.cs before continuing.
Open Pages/Calendar.cshtml. This is a Razor Pages file used to render calendar event data stored in the CalendarModel class. It handles iterating through events stored in the CalendarModel class’s Events property and writes out the details about each calendar event in the page.
Take a moment to look through the HTML and Razor code and notice that it handles the following tasks:
- Ensures that the user is authenticated.
- Checks the Model.Events property to see if there are any events to iterate through and display in the page.
Locate the @* Add foreach here *@ comment in the file and replace it with the following code:
```
@foreach(var evt in Model.Events)
{
```
Locate the @* Add foreach closing bracket here *@ comment and replace it with a closing bracket for the foreach statement added in the previous step.
Locate the @* Add event subject here *@ comment and replace it with the following code to write out each event’s subject:
```
@evt.Subject
```
Locate the @* Add event start date/time here *@ comment and replace it with the following code to write out the event’s starting date and time:
```
@Model.FormatDateTimeTimeZone(evt.Start)
```
Finally, locate the @* Add event end date/time here *@ comment and replace it with the following code to write out the event’s ending date and time:
```
@Model.FormatDateTimeTimeZone(evt.End)
```
The FormatDateTimeTimeZone() function in the CalendarModel class handles converting the start and end date time values to the logged in user’s defined time zone using the MailboxSettings that were retrieved when the page loaded.
Save Calendar.cshtml before continuing.

Now that you’ve added the code snippets to display a signed in user’s events for the upcoming week, the next step is to run the app locally.

Run the app

To run and test the application, you’ll need to add some calendar events into your calendar using Microsoft Outlook or Microsoft Teams. The events should fall within a one-week period starting from the current date.

It's time to run your application and try it out!

Perform the following step based on your code editor:
- Visual Studio
  
  Press F5 to build and run the project.
- Visual Studio Code or another code editor
  
  Open a terminal window in the Begin folder and run the following command:
```
dotnet run
```
Open a browser and visit https://localhost:5001.
Sign in using the Microsoft 365 developer tenant that you used earlier when registering the Microsoft Entra Application.
Once you've consented to the required permissions, the application will try to get an access token using the validated account information. This is handled for you by the middleware discussed earlier in Startup.cs.
After successfully getting the token back in the application, a GET request is made to the Microsoft Graph /me endpoint and the access token is passed in the authorization header. The call to /me will then retrieve the data securely from the service.
After the response is received from Microsoft Graph, you'll see the welcome message with the name of the signed in user.
Select the Calendar link in the header to view the user’s calendar events.
Once the page loads, a GET request is made to the* Microsoft Graph /m*e/calendarView endpoint and the access token is passed in the Authorization Header. The call to /me/calendarView will then retrieve the data securely from the service and display it in the page.

Note

If you’re not seeing any calendar events, please add some to the user's account that you used to sign in to the app.
Close your browser and press CTRL+C in the terminal window to stop the server before continuing.

Note

If you’ve opened the project in Visual Studio, you can close the browser or select SHIFT+F5 in Visual Studio to stop the server. Close the terminal window Visual Studio created if it's still open.

You've successfully demonstrated how to access and display Microsoft 365 calendar events for a signed in user using Microsoft Graph and ASP.NET Core!

Exercise - Access a user's calendar events by using Microsoft Graph

Run the app

Geri Bildirim