feat: Add monthHeaderPosition prop for flexible calendar header placement#6092
Merged
martijnrusschen merged 2 commits intoHacker0x01:mainfrom Dec 4, 2025
Merged
Conversation
gnato
force-pushed
the
feature/month-header-placement
branch
from
0612bbf to
452bef6
Compare
Member
|
Test Suites: 1 failed |
Add new monthHeaderPosition prop that allows positioning the month header in three locations: top (default), middle (between day names and calendar), or bottom (at calendar bottom). This feature provides greater flexibility for calendar layout customization. Changes: - Add monthHeaderPosition prop to DatePicker, PopperComponent, and Calendar components - Implement conditional rendering logic in Calendar.renderDefaultHeader() - Add monthHeader and monthFooter props to Month component for content injection - Add CSS classes for middle/bottom header positions with proper triangle styling - Add .react-datepicker__header-wrapper for navigation button positioning - Include comprehensive test coverage for new functionality - Add documentation and live example to docs-site Technical implementation: - PropperComponent applies CSS classes based on header position - Calendar wraps header with navigation buttons for middle/bottom positions - Month component renders header/footer content at appropriate locations - SCSS handles triangle colors and navigation button positioning per position Test coverage includes unit tests for all three positions across components: calendar_test.test.tsx, month_header_position.test.tsx, and popper_component.test.tsx. All 167 tests passing with maintained coverage.
gnato
force-pushed
the
feature/month-header-placement
branch
from
452bef6 to
38ed65a
Compare
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #6092 +/- ##
=======================================
Coverage 99.22% 99.23%
=======================================
Files 30 30
Lines 3622 3644 +22
Branches 1553 1556 +3
=======================================
+ Hits 3594 3616 +22
Misses 27 27
Partials 1 1 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
- Add test for middle position with navigation buttons potentially hidden - Add test for bottom position with custom header - Improves branch coverage from 93.52% to 93.56%
Contributor
Author
@martijnrusschen they are passing now, thanks |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
This PR introduces a new
monthHeaderPositionprop that allows developers to control the placement of the month header within the calendar. The header can now be positioned at the top (default), middle (between day names and calendar days), or bottom of the calendar.Motivation
Provides greater flexibility for calendar layout customization, enabling developers to create more diverse calendar designs while maintaining all existing functionality.
Changes
Component Updates
monthHeaderPositionprop and passed it toPopperComponentmonthHeaderPositionand applies corresponding CSS classesmonthHeaderandmonthFooterprops for content injectionStyling
.react-datepicker-popper--header-middleand.react-datepicker-popper--header-bottomclasses.react-datepicker__header-wrapperfor proper navigation button positioning.react-datepicker__header--middleand.react-datepicker__header--bottommodifier classesDocumentation
docs/month_header_position.mdTesting
month_header_position.test.tsx(6 tests)popper_component.test.tsxwith 4 new tests for CSS class applicationcalendar_test.test.tsxwith 3 new tests for navigation button positioningAPI
Usage Example
Breaking Changes
None. This is a fully backward-compatible addition with
topas the default value.Screenshots/Demo
The interactive example can be viewed in the docs-site, allowing users to toggle between all three header positions.