From eea2922e749ab0c6b66b3cae9231d5f468c062a5 Mon Sep 17 00:00:00 2001
From: Alexandr Puzeyev <1099257+Tirex@users.noreply.github.com>
Date: Mon, 31 Jul 2023 10:48:27 +0600
Subject: [PATCH]   README update - adding example of apiRef definition and
 fixed component name

Signed-off-by: Alexandr Puzeyev <1099257+Tirex@users.noreply.github.com>
---
 .changeset/wild-timers-sparkle.md    |  5 +++++
 plugins/microsoft-calendar/README.md | 27 +++++++++++++++++++++++++--
 2 files changed, 30 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/wild-timers-sparkle.md

diff --git a/.changeset/wild-timers-sparkle.md b/.changeset/wild-timers-sparkle.md
new file mode 100644
index 0000000000..3df14f3a69
--- /dev/null
+++ b/.changeset/wild-timers-sparkle.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-microsoft-calendar': patch
+---
+
+README update - example of apiRef definition and fixed component name
diff --git a/plugins/microsoft-calendar/README.md b/plugins/microsoft-calendar/README.md
index 92421046e2..3dcf58c418 100644
--- a/plugins/microsoft-calendar/README.md
+++ b/plugins/microsoft-calendar/README.md
@@ -32,15 +32,38 @@ yarn add --cwd packages/app @backstage/plugin-microsoft-calendar
 3. You can then use the provided React component `MicrosoftCalendar` in the backstage frontend where ever you want
 
 ```tsx
-import { MicrosoftCalendar } from '@backstage/plugin-microsoft-calendar';
+import { MicrosoftCalendarCard } from '@backstage/plugin-microsoft-calendar';
 
 // ...
 <Grid item xs={12} md={4}>
-  <MicrosoftCalendar />
+  <MicrosoftCalendarCard />
 </Grid>;
 // ...
 ```
 
+If your homepage is not static JSX add `microsoftCalendarApiRef` to the App's `apis.ts`:
+
+```ts
+import {
+  MicrosoftCalendarApiClient,
+  microsoftCalendarApiRef,
+} from '@backstage/plugin-microsoft-calendar';
+import {
+  // ...
+  fetchApiRef,
+  // ...
+} from '@backstage/core-plugin-api';
+
+export const apis = [
+  // ...
+  createApiFactory({
+    api: microsoftCalendarApiRef,
+    deps: { authApi: microsoftAuthApiRef, fetchApi: fetchApiRef },
+    factory: deps => new MicrosoftCalendarApiClient(deps),
+  }),
+];
+```
+
 ![Microsoft Calendar plugin demo](https://user-images.githubusercontent.com/23618736/215717491-25db5fa6-b237-487f-8c00-28f572e8da05.mp4)
 
 ![Sample](./docs/microsoft-calendar-plugin.png)