Abhay Soni

Microsoft Calendar Plugin – Rear portal

This plugin is part of our initiative to bring all the developers and stack holder needs to manage the projects in a single place. one of the most important things both developers and stack holders need is to manage their daily day. what could be a better place than a calendar to do so? mark for upcoming events/meetings and keep a record of all the events attended. a single place to view all your calendars and directly accept/decline invites. View events, see who all are invited, coming, and one click to join online meetings.

The Microsoft Calendar plugin provides a card component you can use to display your outlook calendars anywhere in the backstage.

As the name suggest this plugin only target is to show you your current upcoming and past events.
to create new events or manage your events, after logging in, you can click on the arrow button available at the footer of the calendar plugin.
this will forward you to the outlook calendar page from where you will have full access to all the calendar features.

The plugin was so liked by maintainers that it is now added to their home page for all the backstage users to easily view it and has been integrated within the main codebase of backstage so everyone can use it directly.

Features

You can switch between calendars, using the select menu on the calendar card header.
Card showing the list of events on the selected date and the selected calendar (provided by Outlook calendar).
Link to join the online meeting on the event card if provided. so you can join your meetings right away hassle-free.
Hovering over the event will pop over a card showing the event summary message, and list of attendees.
attendee’s chips will have a badge over them symbolizing their responses.
green badge –> accepted
red badge –> declined
no badge –> not responded yet
the calendar saves previous data so it does not show a loading bar for data which was loaded previously instead it will start showing the stale data and refetch the new in the background and display it when done.

Installation

Microsoft azure authentication provider

You need to set up a Microsoft Azure authentication provider before you move forward with any of the below steps if you haven’t already.

Setup

Run this command from the root of your folder to install the Microsoft calendar plugin.
yarn add --cwd packages/app @backstage/plugin-microsoft-calendar
Import the Microsoft calendar React component from @backstage/plugin-Microsoft-calendar.
You can then use the provided React component MicrosoftCalendar in the backstage frontend.

import { MicrosoftCalendar } from '@backstage/plugin-microsoft-calendar';

// ...
<Grid item xs={12} md={4}>
  <MicrosoftCalendar />
</Grid>;
// ...

How to use

After you have integrated the Microsoft calendar plugin into your backstage ( following the above-mentioned installation steps).
2. Go to the route where you implemented the plugin, now if you used the Microsoft azure login then you will be automatically able to view the calendar else go to step 3.
3. a sign-in button will appear you can click over it to log in to your outlook account and view your Microsoft calendar here.

On the header of the calendar plugin, you can see two arrow buttons to switch between dates.
there is a dropdown list on the calendar plugin header, to switch between different user calendars.
if an online meeting URL is provided for a particular event, you can directly join it by clicking on the webcam icon button on that event.
you can hover over any event to see the brief description of the event, the list of invitees and their reaction to the event through the badge over their chip.

Resources