diff --git a/change/@fluentui-react-calendar-compat-cf21ab21-bd90-4ae4-972d-ec1c9888ee2f.json b/change/@fluentui-react-calendar-compat-cf21ab21-bd90-4ae4-972d-ec1c9888ee2f.json
new file mode 100644
index 00000000000000..adf36fe3749dc5
--- /dev/null
+++ b/change/@fluentui-react-calendar-compat-cf21ab21-bd90-4ae4-972d-ec1c9888ee2f.json
@@ -0,0 +1,7 @@
+{
+ "type": "patch",
+ "comment": "fix: prevent calendar-compat from crashing when value is undefined",
+ "packageName": "@fluentui/react-calendar-compat",
+ "email": "vgenaev@gmail.com",
+ "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-calendar-compat/library/src/components/Calendar/Calendar.test.tsx b/packages/react-components/react-calendar-compat/library/src/components/Calendar/Calendar.test.tsx
index aeedbf54a813df..b96347c907d758 100644
--- a/packages/react-components/react-calendar-compat/library/src/components/Calendar/Calendar.test.tsx
+++ b/packages/react-components/react-calendar-compat/library/src/components/Calendar/Calendar.test.tsx
@@ -1,3 +1,5 @@
+import * as React from 'react';
+import { render } from '@testing-library/react';
import { Calendar } from './Calendar';
import { isConformant } from '../../testing/isConformant';
@@ -15,4 +17,13 @@ describe('Calendar', () => {
'component-has-static-classnames-object',
],
});
+
+ it('should render without crashing when value is undefined', () => {
+ expect(() => render()).not.toThrow();
+ });
+
+ it('should render correctly when value is undefined', () => {
+ const { container } = render();
+ expect(container.querySelector('[role="grid"]')).not.toBeNull();
+ });
});
diff --git a/packages/react-components/react-calendar-compat/library/src/components/Calendar/Calendar.tsx b/packages/react-components/react-calendar-compat/library/src/components/Calendar/Calendar.tsx
index 77742015bee966..4130250eda2810 100644
--- a/packages/react-components/react-calendar-compat/library/src/components/Calendar/Calendar.tsx
+++ b/packages/react-components/react-calendar-compat/library/src/components/Calendar/Calendar.tsx
@@ -330,7 +330,7 @@ export const Calendar: React.FunctionComponent = React.forwardRef
dateTimeFormatter.formatMonthDayYear(today, strings!),
);
}
- if (dateTimeFormatter && strings!.selectedDateFormatString) {
+ if (dateTimeFormatter && strings!.selectedDateFormatString && selectedDate) {
const dateStringFormatter = monthPickerOnly
? dateTimeFormatter.formatMonthYear
: dateTimeFormatter.formatMonthDayYear;
@@ -349,8 +349,8 @@ export const Calendar: React.FunctionComponent = React.forwardRef
{isDayPickerVisible && (