Backstage Microsoft Calendar Plugin

Microsoft Calendar is the scheduling service in Microsoft 365. It powers Outlook and Teams. You use it to view personal and shared calendars, send invites, track responses, and join online meetings. For most engineers it is the source of truth for the day.

This Backstage plugin brings that calendar into your developer portal. It shows your calendars inside a simple card. You can switch calendars, pick a date, and see the events for that day. Meeting links appear when available so you can jump straight in. Hover to preview details and attendees. Response badges make it clear who accepted or declined. It is a quick way to check what is next without leaving Backstage.

The plugin fits common portal use cases. Add it to a team home page to show the next few meetings. Place it on an on call view so responders see handovers and incident reviews. Pin it on a project page to coordinate standups and releases. The plugin lives in the Backstage community plugins repo and is listed in the official plugin catalog. It is contributed by StatusNeo. If your org already uses Microsoft 365, this gives you calendar context where your work happens.

Install the frontend package

From your Backstage root folder run

Copy

yarn --cwd packages/app add @backstage-community/plugin-microsoft-calendar

Set up Microsoft authentication

You need the Microsoft Azure auth provider. The plugin uses it to call Microsoft Graph.

Add a Microsoft provider config in your app config

Copy

# app-config.yaml
auth:
  providers:
    microsoft:
      development:
        clientId: ${MICROSOFT_CLIENT_ID}
        clientSecret: ${MICROSOFT_CLIENT_SECRET}
        tenantId: ${MICROSOFT_TENANT_ID}
        # Add scopes that allow calendar read
        # Calendars.Read is usually enough
        scope:
          - Calendars.Read

Provide the values as environment variables for the backend

Copy

# for local use
export MICROSOFT_CLIENT_ID=your_client_id
export MICROSOFT_CLIENT_SECRET=your_client_secret
export MICROSOFT_TENANT_ID=your_tenant_id

Old backend system

If you use the default auth backend you do not need code changes. It picks up the Microsoft provider from config.

New backend system

Add the Microsoft provider module to the backend

Copy

yarn --cwd packages/backend add @backstage/plugin-auth-backend-module-microsoft-provider

Copy

// packages/backend/src/index.ts
import { createBackend } from '@backstage/backend-defaults';

const backend = createBackend();

// Core auth backend
backend.add(import('@backstage/plugin-auth-backend'));

// Microsoft auth provider module
backend.add(import('@backstage/plugin-auth-backend-module-microsoft-provider'));

backend.start();

Wire up the plugin API on the frontend

Add the API client in the app apis file

Copy

// packages/app/src/apis.ts
import { createApiFactory, fetchApiRef, microsoftAuthApiRef } from '@backstage/core-plugin-api';
import {
  MicrosoftCalendarApiClient,
  microsoftCalendarApiRef,
} from '@backstage-community/plugin-microsoft-calendar';

// keep your existing exports
export const apis = [
  // other api factories

  createApiFactory({
    api: microsoftCalendarApiRef,
    deps: { authApi: microsoftAuthApiRef, fetchApi: fetchApiRef },
    factory: deps => new MicrosoftCalendarApiClient(deps),
  }),
];

Add the calendar card to a page users can see

You can place the card on the Home page. You can also add it to any other page.

Add the card import

Copy

// packages/app/src/components/home/HomePage.tsx
import React from 'react';
import { Grid } from '@mui/material';
import { Content, Header, Page } from '@backstage/core-components';
import { MicrosoftCalendarCard } from '@backstage-community/plugin-microsoft-calendar';

export const HomePage = () => {
  return (
    <Page themeId="home">
      <Header title="Home" />
      <Content>
        <Grid container spacing={3}>
          {/* your other cards */}

          <Grid item xs={12} md={4}>
            <MicrosoftCalendarCard />
          </Grid>
        </Grid>
      </Content>
    </Page>
  );
};

Add the calendar card to a new dedicated page

If you prefer a separate page, add a route and component.

Create a simple page component

Copy

// packages/app/src/components/microsoftCalendar/MicrosoftCalendarPage.tsx
import React from 'react';
import { Grid } from '@mui/material';
import { Content, Header, Page } from '@backstage/core-components';
import { MicrosoftCalendarCard } from '@backstage-community/plugin-microsoft-calendar';

export const MicrosoftCalendarPage = () => (
  <Page themeId="tool">
    <Header title="Microsoft Calendar" />
    <Content>
      <Grid container spacing={3}>
        <Grid item xs={12} md={6}>
          <MicrosoftCalendarCard />
        </Grid>
      </Grid>
    </Content>
  </Page>
);

Mount the page in the app router

Copy

// packages/app/src/App.tsx
import React from 'react';
import { Route } from 'react-router';
import { FlatRoutes } from '@backstage/core-app-api';
import { MicrosoftCalendarPage } from './components/microsoftCalendar/MicrosoftCalendarPage';
import { HomePage } from './components/home/HomePage';

export const App = () => (
  <FlatRoutes>
    <Route path="/" element={<HomePage />} />
    <Route path="/microsoft-calendar" element={<MicrosoftCalendarPage />} />
  </FlatRoutes>
);

You now have the package installed, the API wired up, and the card rendered on a page. The plugin does not include a backend plugin of its own. The only backend work is the Microsoft auth provider.

Backstage Microsoft Calendar Plugin

Installation Instructions

Install the frontend package

Set up Microsoft authentication

Old backend system

New backend system

Wire up the plugin API on the frontend

Add the calendar card to a page users can see

Add the calendar card to a new dedicated page

Changelog

Breaking changes

Maintenance

User impact

Set up Backstage in minutes with Roadie