fix: correct usage of customHeaderCount to keep arrows on any monthsShown prop

[johannrp27]

fix: correct usage of customHeaderCount to keep arrows on any monthsShown prop

name: Pull Request
about: Create a pull request to improve this repository
title: Correct usage of customHeaderCount to keep arrows on any monthsShown prop
labels: docs
assignees: johannrp27

Description

Linked issue: #(issue number)

Problem
If you follow the example of Custom-header-with-two-months-displayed it actually works ONLY if monthsShown is set to 2. When you set more or less monthsShown values, the arrows does not look good. See reference image.

Changes
I found a patch by using monthsShown number. This value has to be stored to use within customHeader alongside customHeaderCount, and invert the style statement condition.

Screenshots

Current issue

After patch

To reviewers

Contribution checklist

• I have followed the contributing guidelines.
• I have added sufficient test coverage for my changes.
• I have formatted my code with Prettier and checked for linting issues with ESLint for code readability.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 96.99%. Comparing base (32f68ac) to head (5f23baa).
Report is 6 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #5618   +/-   ##
=======================================
  Coverage   96.99%   96.99%           
=======================================
  Files          30       30           
  Lines        3363     3363           
  Branches     1404     1419   +15     
=======================================
  Hits         3262     3262           
  Misses        101      101           

☔ 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.