Skip to content

Conversation

@gnato
Copy link
Contributor

@gnato gnato commented Dec 3, 2025

Description

Adds renderCustomDayName prop to DatePicker component, enabling custom rendering of weekday names in the calendar header (similar to existing renderCustomHeader functionality).

Motivation

Provides developers with flexibility to customize day name display, such as adding emojis, icons, or custom styling based on the displayed month position when showing multiple months.

Changes

  • Added ReactDatePickerCustomDayNameProps interface
  • Added renderCustomDayName prop to Calendar component
  • Added customDayNameCount parameter (similar to customHeaderCount)
  • Added 7 comprehensive test cases
  • Added example in docs-site
  • Exported new interface in public API

Example Usage

<DatePicker
  monthsShown={2}
  renderCustomDayName={({ shortName, fullName, customDayNameCount }) => (
    <span style={{ fontWeight: customDayNameCount === 0 ? 'bold' : 'normal' }}>
      {shortName}
    </span>
  )}
/>

@codecov
Copy link

codecov bot commented Dec 3, 2025

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 99.22%. Comparing base (b198c49) to head (33b0fa2).
⚠️ Report is 20 commits behind head on main.

Additional details and impacted files
@@            Coverage Diff             @@
##             main    #6091      +/-   ##
==========================================
+ Coverage   99.14%   99.22%   +0.08%     
==========================================
  Files          30       30              
  Lines        3612     3620       +8     
  Branches     1548     1535      -13     
==========================================
+ Hits         3581     3592      +11     
+ Misses         29       27       -2     
+ Partials        2        1       -1     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@gnato gnato force-pushed the feature/render-custom-day-name branch from 2d7195d to 020abad Compare December 3, 2025 09:31
Add ability to customize day name rendering in calendar header similar
to renderCustomHeader. Includes customDayNameCount parameter to support
different styling when displaying multiple months.

- Add ReactDatePickerCustomDayNameProps interface
- Extend Calendar header() method with customDayNameCount parameter
- Add comprehensive test coverage (7 test cases)
- Include example in docs-site demonstrating usage
@gnato gnato force-pushed the feature/render-custom-day-name branch from 020abad to 33b0fa2 Compare December 3, 2025 12:57
@martijnrusschen martijnrusschen merged commit 6b2ff59 into Hacker0x01:main Dec 4, 2025
6 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants