feat(react-calendar-preview): implement Calendar, month/year pickers, and day grid components by dmytrokirpa · Pull Request #36629 · microsoft/fluentui

Dmytro Kirpa (dmytrokirpa) · 2026-08-25T15:44:43Z

Overview

This is PR 2 of 3 in a stack that splits up #36618 ("feat: add non-compat and headless versions for Calendar") into smaller, independently reviewable pieces:

chore: scaffold react-calendar-preview package #36628 — scaffold the new @fluentui/react-calendar-preview package
feat(react-calendar-preview): implement Calendar, month/year pickers, and day grid components #36629 (this PR) — implement the Calendar component family in react-calendar-preview
feat(react-headless-components-preview): add headless Calendar #36630 — add a headless Calendar to react-headless-components-preview, built on top of this PR's base hooks

Stack order: master → calendar-preview-scaffold → calendar-preview-impl → headless-calendar. This PR is based on #36628 and only contains the diff on top of it (component implementation, tests, and stories).

What's in this PR

The full Calendar component family for @fluentui/react-calendar-preview:

Calendar, CalendarDay, CalendarMonth, CalendarYear, and their *GridCell/*GridRow/*GridHeaderCell/*GridHeaderRow subcomponents (hook-based architecture: useX_unstable, renderX_unstable, useXStyles_unstable, plus useXBase_unstable/context-value hooks where the headless layer needs to re-use base state)
Shared date-math, date-formatting, and day-grid utilities, plus keyboard/focus/motion hooks
Unit tests (Jest), Cypress interaction tests, and Storybook stories/docs
apps/public-docsite-v9 dependency on the new package
A beachball change file

Previous Behavior

Only #36628's empty package scaffold existed.

New Behavior

@fluentui/react-calendar-preview now exposes a working Calendar component supporting day/week/work-week/month selection, month and year pickers, keyboard navigation, min/max/restricted dates, and localized formatting — same behavior as in the original PR #36618.

Related Issue(s)

Split from #36618.

github-actions · 2026-08-25T15:58:45Z

Pull request demo site: URL

Copilot

Pull request overview

This PR (stack PR 2/3) turns the scaffolded @fluentui/react-calendar-preview package into a functional Calendar component family (day grid + month/year pickers), including supporting date utilities, contexts/hooks, tests, and Storybook stories, and wires the package into apps/public-docsite-v9.

Changes:

Add Calendar implementation (contexts, hooks, utilities, and Calendar* component/subcomponent set) following the v9 hook/slot architecture.
Add tests (unit + motion) and Storybook stories/docs for the preview Calendar scenarios.
Add docsite dependency + lockfile updates and include a Beachball change file.

Reviewed changes

Copilot reviewed 152 out of 153 changed files in this pull request and generated 18 comments.

Show a summary per file

File	Description
yarn.lock	Adds workspace dependency entry for `@fluentui/react-calendar-preview` referenced by docsite.
apps/public-docsite-v9/package.json	Adds `@fluentui/react-calendar-preview` dependency for docsite consumption.
change/@fluentui-react-calendar-preview-a1b2c3d4-0002-4000-8000-000000000002.json	Beachball change entry for the package update.
packages/react-components/react-calendar-preview/stories/src/index.ts	Removes placeholder comment now that stories exist.
packages/react-components/react-calendar-preview/stories/src/Calendar/index.stories.tsx	Registers Calendar preview stories + docs content.
packages/react-components/react-calendar-preview/stories/src/Calendar/CalendarDefault.stories.tsx	Default Calendar story entrypoint.
packages/react-components/react-calendar-preview/stories/src/Calendar/CalendarMonthOnly.stories.tsx	Story demonstrating month/year picker-only usage.
packages/react-components/react-calendar-preview/stories/src/Calendar/CalendarOverlaidMonthPicker.stories.tsx	Story for overlay month picker mode.
packages/react-components/react-calendar-preview/stories/src/Calendar/CalendarDateBoundaries.stories.tsx	Story covering min/max/restricted dates.
packages/react-components/react-calendar-preview/stories/src/Calendar/CalendarSixWeeks.stories.tsx	Story demonstrating fixed 6-week display.
packages/react-components/react-calendar-preview/stories/src/Calendar/CalendarWeekNumbers.stories.tsx	Story enabling week numbers.
packages/react-components/react-calendar-preview/stories/src/Calendar/CalendarWeekSelection.stories.tsx	Story for week range selection.
packages/react-components/react-calendar-preview/stories/src/Calendar/CalendarMarkedDays.stories.tsx	Story demonstrating marked days callback.
packages/react-components/react-calendar-preview/stories/src/Calendar/CalendarMonthSelection.stories.tsx	Story for month-range selection.
packages/react-components/react-calendar-preview/stories/src/Calendar/CalendarMultiDayView.stories.tsx	Story for multi-day day-view selection.
packages/react-components/react-calendar-preview/stories/src/Calendar/CalendarContiguousWork.stories.tsx	Story for contiguous work-week selection.
packages/react-components/react-calendar-preview/stories/src/Calendar/CalendarNonContiguousWorkWeekDays.stories.tsx	Story for non-contiguous work-week days selection.
packages/react-components/react-calendar-preview/stories/src/Calendar/CalendarLocalizedFormatting.stories.tsx	Story showing Intl-backed date/label formatting helpers.
packages/react-components/react-calendar-preview/stories/src/Calendar/CalendarDescription.md	Component description for Storybook docs tab.
packages/react-components/react-calendar-preview/stories/src/Calendar/CalendarBestPractices.md	Usage guidance including label/date formatting patterns.
packages/react-components/react-calendar-preview/library/tsconfig.cy.json	Cypress TS config for package-level interaction tests.
packages/react-components/react-calendar-preview/library/cypress.config.ts	Cypress config using shared base config.
packages/react-components/react-calendar-preview/library/bundle-size/Calendar.fixture.js	Bundle-size fixture for Calendar import.
packages/react-components/react-calendar-preview/library/src/utils/index.ts	Barrel export for new calendar utilities.
packages/react-components/react-calendar-preview/library/src/utils/focus.ts	Adds `focusAsync` helper used by Calendar focus management.
packages/react-components/react-calendar-preview/library/src/utils/dataAttributes.ts	Adds boolean-to-presence data attribute helper.
packages/react-components/react-calendar-preview/library/src/utils/constants.ts	Calendar constants/types (days/months/range types/time constants).
packages/react-components/react-calendar-preview/library/src/utils/dateMath/index.ts	Barrel export for date-math helpers.
packages/react-components/react-calendar-preview/library/src/utils/dateGrid/index.ts	Barrel export for day-grid helpers.
packages/react-components/react-calendar-preview/library/src/utils/dateGrid/dateGrid.types.ts	Types for day grid generation and restrictions.
packages/react-components/react-calendar-preview/library/src/utils/dateGrid/getDayGrid.ts	Generates the day grid data structure for rendering.
packages/react-components/react-calendar-preview/library/src/utils/dateGrid/getBoundedDateRange.ts	Bounds selection ranges by min/max.
packages/react-components/react-calendar-preview/library/src/utils/dateGrid/getDateRangeTypeToUse.ts	Normalizes range type (e.g. non-contiguous workWeek → week).
packages/react-components/react-calendar-preview/library/src/utils/dateGrid/findAvailableDate.ts	Finds nearest available date under restrictions.
packages/react-components/react-calendar-preview/library/src/utils/dateGrid/isRestrictedDate.ts	Restriction predicate using min/max/restricted dates.
packages/react-components/react-calendar-preview/library/src/utils/dateGrid/isBeforeMinDate.ts	Predicate helper for min date.
packages/react-components/react-calendar-preview/library/src/utils/dateGrid/isAfterMaxDate.ts	Predicate helper for max date.
packages/react-components/react-calendar-preview/library/src/utils/dateGrid/isContiguous.ts	Contiguity helper for work week day sets.
packages/react-components/react-calendar-preview/library/src/utils/dateFormatting/index.ts	Barrel export for date/label formatting.
packages/react-components/react-calendar-preview/library/src/utils/dateFormatting/dateFormatting.types.ts	Typed label/date formatting contracts.
packages/react-components/react-calendar-preview/library/src/utils/dateFormatting/dateFormatting.defaults.ts	Default English formatters + formatter factories.
packages/react-components/react-calendar-preview/library/src/utils/dateFormatting/dateFormatting.test.ts	Unit coverage for formatting defaults/factories.
packages/react-components/react-calendar-preview/library/src/utils/calendarMotions.test.tsx	Unit coverage for directional motion wrapper behavior.
packages/react-components/react-calendar-preview/library/src/testing/isConformant.ts	Conformance test wrapper for package components.
packages/react-components/react-calendar-preview/library/src/hooks/index.ts	Barrel export for calendar-specific hooks.
packages/react-components/react-calendar-preview/library/src/hooks/useWeeks.ts	Builds memoized week/day data including selection callbacks.
packages/react-components/react-calendar-preview/library/src/hooks/useWeekCorners.ts	Computes rounded-corner metadata for contiguous hover/selection.
packages/react-components/react-calendar-preview/library/src/hooks/useAnimateBackwards.ts	Detects backwards navigation for motion direction.
packages/react-components/react-calendar-preview/library/src/hooks/useCalendarPickerStyles.styles.ts	Shared month/year picker chrome styles.
packages/react-components/react-calendar-preview/library/src/hooks/useCalendarItemStyles.styles.ts	Shared item button styles for month/year grids.
packages/react-components/react-calendar-preview/library/src/contexts/index.ts	Barrel export for calendar contexts.
packages/react-components/react-calendar-preview/library/src/contexts/calendarContext.ts	Shared Calendar configuration context + defaults.
packages/react-components/react-calendar-preview/library/src/contexts/calendarDayContext.ts	Day-grid shared context (weeks, refs, navigation, etc).
packages/react-components/react-calendar-preview/library/src/contexts/calendarMonthContext.ts	Month-grid shared context (rows, navigated refs).
packages/react-components/react-calendar-preview/library/src/contexts/calendarYearContext.ts	Year-grid shared context (rows, current/selected refs).
packages/react-components/react-calendar-preview/library/src/components/Calendar/index.ts	Barrel export for Calendar component internals.
packages/react-components/react-calendar-preview/library/src/components/Calendar/Calendar.tsx	Calendar component composition (hook + styles + render).
packages/react-components/react-calendar-preview/library/src/components/Calendar/useCalendarContextValues.ts	Memoizes Calendar context values.
packages/react-components/react-calendar-preview/library/src/components/Calendar/renderCalendar.tsx	Provides Calendar context + lays out pickers/buttons.
packages/react-components/react-calendar-preview/library/src/components/CalendarMonth/index.ts	Barrel export for CalendarMonth.
packages/react-components/react-calendar-preview/library/src/components/CalendarMonth/CalendarMonth.tsx	Month picker component composition.
packages/react-components/react-calendar-preview/library/src/components/CalendarMonth/renderCalendarMonth.tsx	Renders either month grid or nested year picker.
packages/react-components/react-calendar-preview/library/src/components/CalendarMonth/useCalendarMonthContextValues.ts	Publishes month context values.
packages/react-components/react-calendar-preview/library/src/components/CalendarMonth/useCalendarMonthStyles.styles.ts	Month picker styles.
packages/react-components/react-calendar-preview/library/src/components/CalendarMonth/CalendarMonth.test.tsx	Unit coverage for localization + grid structure invariants.
packages/react-components/react-calendar-preview/library/src/components/CalendarMonthGridRow/**	Month grid row component + motion slot support.
packages/react-components/react-calendar-preview/library/src/components/CalendarMonthGridCell/**	Month grid cell component implementation + styling.
packages/react-components/react-calendar-preview/library/src/components/CalendarYear/index.ts	Barrel export for CalendarYear.
packages/react-components/react-calendar-preview/library/src/components/CalendarYear/CalendarYear.tsx	Year picker component composition.
packages/react-components/react-calendar-preview/library/src/components/CalendarYear/renderCalendarYear.tsx	Renders header/nav + year grid under provider.
packages/react-components/react-calendar-preview/library/src/components/CalendarYear/useCalendarYearContextValues.ts	Publishes year context values.
packages/react-components/react-calendar-preview/library/src/components/CalendarYear/useCalendarYearStyles.styles.ts	Year picker styles.
packages/react-components/react-calendar-preview/library/src/components/CalendarYearGridRow/**	Year grid row component + motion slot support.
packages/react-components/react-calendar-preview/library/src/components/CalendarYearGridCell/**	Year grid cell component implementation + styling.
packages/react-components/react-calendar-preview/library/src/components/CalendarDay/index.ts	Barrel export for CalendarDay.
packages/react-components/react-calendar-preview/library/src/components/CalendarDay/CalendarDay.tsx	Day picker component composition.
packages/react-components/react-calendar-preview/library/src/components/CalendarDay/renderCalendarDay.tsx	Renders header/nav + grid body under provider.
packages/react-components/react-calendar-preview/library/src/components/CalendarDay/useCalendarDayContextValues.ts	Publishes day context values.
packages/react-components/react-calendar-preview/library/src/components/CalendarDay/useCalendarDayStyles.styles.ts	Day picker styles.
packages/react-components/react-calendar-preview/library/src/components/CalendarDayGridRow/**	Week row component with transition/motion support.
packages/react-components/react-calendar-preview/library/src/components/CalendarDayGridCell/**	Day cell component structure (root/button/label/marker).
packages/react-components/react-calendar-preview/library/src/components/CalendarDayGridHeaderRow/**	Weekday header row component.
packages/react-components/react-calendar-preview/library/src/components/CalendarDayGridHeaderCell/**	Header cell component with optional fade motion.
packages/react-components/react-calendar-preview/library/src/Calendar.ts	Public export surface for Calendar.
packages/react-components/react-calendar-preview/library/src/CalendarDay.ts	Public export surface for CalendarDay.
packages/react-components/react-calendar-preview/library/src/CalendarMonth.ts	Public export surface for CalendarMonth.
packages/react-components/react-calendar-preview/library/src/CalendarYear.ts	Public export surface for CalendarYear.
packages/react-components/react-calendar-preview/library/src/CalendarDayGridCell.ts	Public export surface for day grid cell subcomponent.
packages/react-components/react-calendar-preview/library/src/CalendarDayGridRow.ts	Public export surface for day grid row subcomponent.
packages/react-components/react-calendar-preview/library/src/CalendarDayGridHeaderCell.ts	Public export surface for header cell subcomponent.
packages/react-components/react-calendar-preview/library/src/CalendarDayGridHeaderRow.ts	Public export surface for header row subcomponent.
packages/react-components/react-calendar-preview/library/src/CalendarMonthGridCell.ts	Public export surface for month grid cell subcomponent.
packages/react-components/react-calendar-preview/library/src/CalendarMonthGridRow.ts	Public export surface for month grid row subcomponent.
packages/react-components/react-calendar-preview/library/src/CalendarYearGridCell.ts	Public export surface for year grid cell subcomponent.
packages/react-components/react-calendar-preview/library/src/CalendarYearGridRow.ts	Public export surface for year grid row subcomponent.

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

… and day grid components

…n checks

Sean Monahan (spmonahan) · 2026-08-31T17:45:13Z

+  /**
+   * Dates selected according to the configured range type.
+   */
+  selectedDateRangeArray: Date[];


Do we need the type encoded into the name? Should we drop Array?

Sean Monahan (spmonahan) · 2026-08-31T17:47:20Z

+  showMonthPickerAsOverlay?: boolean;
+
+  /**
+   * Whether the calendar should show the week number (weeks 1 to 53) before each week row


Aren't there 52 weeks in a year?

Sean Monahan (spmonahan) · 2026-08-31T18:04:07Z

+    height: '30px',
+    lineHeight: '30px',
+    marginRight: '16px',
+    marginTop: '3px',


I know Griffel handles RTL support but should we switch to using logical properties anyway?

microsoft-github-policy-service Bot added the PR: API Modified label Aug 25, 2026

This was referenced Aug 25, 2026

chore: scaffold react-calendar-preview package #36628

Open

feat(react-headless-components-preview): add headless Calendar #36630

Open

Dmytro Kirpa (dmytrokirpa) force-pushed the calendar-preview-impl branch from 3fa04eb to 1addb6b Compare August 25, 2026 20:08

Dmytro Kirpa (dmytrokirpa) force-pushed the calendar-preview-impl branch from 1addb6b to c3ef67b Compare August 29, 2026 08:52

Dmytro Kirpa (dmytrokirpa) marked this pull request as ready for review August 29, 2026 08:55

Dmytro Kirpa (dmytrokirpa) requested review from a team as code owners August 29, 2026 08:55

Dmytro Kirpa (dmytrokirpa) requested a lite review from Copilot August 29, 2026 08:57

Copilot started reviewing on behalf of Dmytro Kirpa (dmytrokirpa) August 29, 2026 08:57 View session

Copilot AI reviewed Aug 29, 2026

View reviewed changes

Dmytro Kirpa (dmytrokirpa) added 2 commits August 29, 2026 16:26

feat(react-calendar-preview): implement Calendar, month/year pickers,…

af22bd8

… and day grid components

test(react-calendar-preview): configure component tests

9c0c93e

Dmytro Kirpa (dmytrokirpa) force-pushed the calendar-preview-impl branch from c3ef67b to 9c0c93e Compare August 29, 2026 14:27

Dmytro Kirpa (dmytrokirpa) added 2 commits August 29, 2026 16:50

test(react-calendar-preview): include Cypress config in implementatio…

4535fcc

…n checks

fix(react-calendar-preview): address review feedback

92f08ac

Sean Monahan (spmonahan) reviewed Aug 31, 2026

View reviewed changes

Navigation Menu

Uh oh!

feat(react-calendar-preview): implement Calendar, month/year pickers, and day grid components - #36629

feat(react-calendar-preview): implement Calendar, month/year pickers, and day grid components#36629
Dmytro Kirpa (dmytrokirpa) wants to merge 4 commits into
calendar-preview-scaffoldfrom
calendar-preview-impl

Dmytro Kirpa (dmytrokirpa) commented Aug 25, 2026 •

edited

Loading

github-actions Bot commented Aug 25, 2026

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Sean Monahan (spmonahan) Aug 31, 2026

Sean Monahan (spmonahan) Aug 31, 2026

Sean Monahan (spmonahan) Aug 31, 2026

Labels

3 participants

Uh oh!

Conversation

Dmytro Kirpa (dmytrokirpa) commented Aug 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Overview

What's in this PR

Previous Behavior

New Behavior

Related Issue(s)

github-actions Bot commented Aug 25, 2026

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Sean Monahan (spmonahan) Aug 31, 2026

Choose a reason for hiding this comment

Sean Monahan (spmonahan) Aug 31, 2026

Choose a reason for hiding this comment

Sean Monahan (spmonahan) Aug 31, 2026

Choose a reason for hiding this comment

Labels

3 participants

Dmytro Kirpa (dmytrokirpa) commented Aug 25, 2026 •

edited

Loading