Skip to content

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

Draft
Dmytro Kirpa (dmytrokirpa) wants to merge 2 commits into
calendar-preview-scaffoldfrom
calendar-preview-impl
Draft

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

Conversation

@dmytrokirpa

@dmytrokirpa Dmytro Kirpa (dmytrokirpa) commented Aug 25, 2026

Copy link
Copy Markdown
Contributor

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:

  1. chore: scaffold react-calendar-preview package #36628 — scaffold the new @fluentui/react-calendar-preview package
  2. 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
  3. 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: mastercalendar-preview-scaffoldcalendar-preview-implheadless-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

Copy link
Copy Markdown

Pull request demo site: URL

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant