themesberg / themesberg/flowbite-react

Support out-of-month days style

Open
#1,647 3 comments 1 reaction 1 assignee View on GitHub

@prateekmtri is already working on this.

Since Jan 5, 2026.

:rocket: enhancement good first issue
Dominant language
TypeScript
Stars
2.1k
Forks
506
PR merge metrics
No merged PRs in 30d

Description

  • I have searched the Issues to see if this bug has already been reported
  • I have tested the latest version

Summary

Feature suggestion: Style out-of-month days in flowbite-react Datepicker

Out-of-month days (the leading/trailing days from the previous/next month shown to fill the month grid) currently render with the same visual emphasis as in-month days in the flowbite-react Datepicker. This makes the calendar harder to scan and reduces parity with Flowbite’s HTML datepicker styling.

Desired behavior

When the Datepicker renders a given month view (e.g., “January 2026”), any day cell that belongs to December 2025 or February 2026—but is displayed in the January grid—should be visually de-emphasized.

Proposed default behavior:

  • Apply reduced opacity (e.g., opacity-40) and/or muted text styling (e.g., text-gray-500) to out-of-month day cells.
  • Keep out-of-month days interactive (clickable) unless they are disabled by min/max date constraints.
  • Ensure selected styling overrides out-of-month styling so selection remains clearly visible.
Suggested API improvement
Add a theme token for out-of-month days

Extend the existing theme structure with an outside (or outOfMonth) style key for day items:

views: {
  days: {
    items: {
      item: {
        base: "...",
        selected: "...",
        disabled: "...",
        outside: "opacity-40 text-gray-500", // custom style
      },
    },
  },
}
Current Behaviour
Image
Expected Behaviour
Image

Context

Why this matters
  • Improved readability: Users can immediately distinguish which days belong to the current month vs. adjacent months.
  • Better ecosystem consistency: Aligns the flowbite-react Datepicker with the visual semantics users expect from Flowbite’s datepicker patterns.
  • Avoids brittle workarounds: Without a supported hook, consumers resort to DOM querying / MutationObservers to post-process day elements, which is fragile against internal markup changes.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.