diff --git a/change/@fluentui-react-calendar-compat-446c0318-ef2d-4f62-9cbd-577da2fcb001.json b/change/@fluentui-react-calendar-compat-446c0318-ef2d-4f62-9cbd-577da2fcb001.json
new file mode 100644
index 0000000000000..fe4204d12cb3a
--- /dev/null
+++ b/change/@fluentui-react-calendar-compat-446c0318-ef2d-4f62-9cbd-577da2fcb001.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Fix previous month button not appearing disabled in WHCM",
+  "packageName": "@fluentui/react-calendar-compat",
+  "email": "jiangemma@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-calendar-compat/library/src/components/CalendarDay/useCalendarDayStyles.styles.ts b/packages/react-components/react-calendar-compat/library/src/components/CalendarDay/useCalendarDayStyles.styles.ts
index b1dacf06a3849..8e3204ac37ecd 100644
--- a/packages/react-components/react-calendar-compat/library/src/components/CalendarDay/useCalendarDayStyles.styles.ts
+++ b/packages/react-components/react-calendar-compat/library/src/components/CalendarDay/useCalendarDayStyles.styles.ts
@@ -129,6 +129,10 @@ const useDisabledStyleStyles = makeStyles({
       color: tokens.colorNeutralForegroundDisabled,
       pointerEvents: 'none',
     },
+    '@media (forced-colors: active)': {
+      color: 'GrayText',
+      forcedColorAdjust: 'none',
+    },
   },
 });