Skip to content

Using the Microsoft Graph API, Node/Express, and React to bring my calendars together to display events in a custom app and provide basic insights.

Notifications You must be signed in to change notification settings

doubleedesign/life-screen

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

40 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Life Screen

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).

Screenshot 2023-04-14 at 19-57-56 LifeScreen

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).

Azure Authentication

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 need Calendars.Read.Shared if you, well, don't need to read any shared calendars.

Front-End

You will need to configure your own Font Awesome access (or remove the icons). Otherwise, install errors will occur for the front-end app.

Useful links

About

Using the Microsoft Graph API, Node/Express, and React to bring my calendars together to display events in a custom app and provide basic insights.

Topics

Resources

Stars

Watchers

Forks