ASP.NET Core - razor pages and Outlook 365

[MENSUD BASIC]

Is it possible to use scheduler component on razor pages to sync data with Outlook 365? If it is possible, can you provide an example?

[Ravikumar Venkatesan]

Hi MENSUD,

Since we don’t have an example in the ASP .NET Core Razor pages project for the Schedule component syncing data with Outlook 365. Currently, we are preparing a sample based on your requirement and we are facing complexity in it and require additional time for this. So, we will update you with the example sample ASAP. We appreciate your patience.

Regards,

Ravikumar Venkatesan

[Ravikumar Venkatesan]

Hi MENSUD,

Sample: https://github.com/SyncfusionExamples/Sync-outlook-calendar-with-syncfusion-asp.netcore-scheduler

Access Outlook user calendar events using Microsoft Graph: https://learn.microsoft.com/en-us/training/modules/msgraph-dotnet-core-access-user-events/

You can load the appointments from Outlook and bind them to the EJ2 Schedule with help of the Microsoft Graph. Refer to the above training link. We have prepared a sample to load appointments from Outlook using the Microsoft Graph based on the steps provided in the above training link. To run the shared sample follow the below steps.

Step 1: Generate the ClientId and ClientSecret by following the steps provided in the below training page and keep them to perform the next steps.

https://learn.microsoft.com/en-us/training/modules/msgraph-dotnet-core-access-user-events/2-exercise-configure-azure-ad-app

Step 2: Open the Package Manager Console in the project and run the following commands with your generated ClientId and ClientSecret values.

dotnet user-secrets init

dotnet user-secrets set "AzureAd:ClientId" "YOUR_APP_ID"

dotnet user-secrets set "AzureAd:ClientSecret" "YOUR_APP_SECRET"

Step 3: Sign in to your Microsoft 365 account.

Step 4: Run the shared project the permission prompt will be opened. Click the Accept button.

Step 5: The home page of the project will be opened. Navigate to the Calendar page the Schedule loaded with the Outlook appointments.

We have loaded the Outlook appointments to the EJ2 Schedule with help of the EJ2 DataManager UrlAdaptor as shown in the below code snippet.

[Calendar.cshtml]

        <ejs-schedule id="schedule" height="550" actionBegin="onActionBegin">

            <e-schedule-eventsettings>

                <e-data-manager url="/Calendar?handler=LoadData" adaptor="UrlAdaptor"></e-data-manager>

            </e-schedule-eventsettings>

            <e-schedule-views>

                <e-schedule-view option="Week"></e-schedule-view>

            </e-schedule-views>

        </ejs-schedule>

[Calendar.cshtml.cs]

        public async Task<JsonResult> OnPostLoadData([FromBody] Params param) {

            Events = new List<AppointmentData>();

            MailboxSettings = await _graphCalendarClient.GetUserMailboxSettings();

            var userTimeZone = (String.IsNullOrEmpty(MailboxSettings.WorkingHours.TimeZone.Name)) ? "Pacific Standard Time" : MailboxSettings.WorkingHours.TimeZone.Name;

            // Loading appointments for the currently selected week date range.

            IEnumerable<Event> OutlookEvents = await _graphCalendarClient.GetEvents(userTimeZone, DateTime.Parse(param.StartDate), DateTime.Parse(param.EndDate));

            // Converting the Outlook appointments Start and End fields to EJ2 Schedule appointment StartTime and EndTime fields

            foreach (Event calendarEvent in OutlookEvents) {

                Events.Add(new AppointmentData {

                    Id = calendarEvent.Id,

                    Subject = calendarEvent.Subject,

                    StartTime = DateTime.Parse(FormatDateTimeTimeZone(calendarEvent.Start)),

                    EndTime = DateTime.Parse(FormatDateTimeTimeZone(calendarEvent.End)),

                    IsAllDay = false

                });

            }

            return new JsonResult(Events);

        }

Regards,

Ravikumar Venkatesan