Using the Microsoft Graph API, Node/Express, and React with TypeScript and Styled Components to bring my calendars together (and other things eventually, e.g., weather forecast is next on the agenda).
Some of the code is specific to my calendars, e.g., exclusions, renaming, categorisation, front-end styling; but this could all easily be adjusted for use by other individuals. So please feel free to fork the repo and have a go (insert standard disclaimer about no warranty etc etc).
Requires an app in Azure Active Directory to handle authentication. Then add oAuth, URL, callback, etc details in server/.env (all the required keys are listed in that file).
- In the Azure Portal, go to Azure Active Directory > App Registrations > life-screen (or whatever you called your app if you're not me).
- Client ID can be found in the app overview, called "Application (client) ID".
- oAuth client secret can be found/refreshed under Certificates & Secrets > "Client Secrets" tab.
- OAUTH_AUTHORITY is
https://login.microsoftonline.com/organizations/if you are using Office 365; it's different if you're using a personal @outlook.com account. - Required scopes for me are
user.read,mailboxsettings.read,Calendars.Read,Calendars.Read.Shared. YMMV, you may not needCalendars.Read.Sharedif you, well, don't need to read any shared calendars.
You will need to configure your own Font Awesome access (or remove the icons). Otherwise, install errors will occur for the front-end app.
- MS Graph Explorer - find and test sample queries; can be used to get an auth token to use in Postman
- Sample MS Graph Node app
- How to register your app to use Azure auth
- MS Graph API homepage
- Tutorial: Calling an Azure AD secured API with Postman
- Tutorial: Call MS Graph in a console app
- Tutorial: Node.js & Express web app calling Microsoft Graph using MSAL Node