Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(CalendarDay): fix margin-bottom calculation wrong for calendar days #13271

Open
wants to merge 6 commits into
base: main
Choose a base branch
from

Conversation

phil668
Copy link

@phil668 phil668 commented Dec 17, 2024

PR Description

This PR fixes an incorrect margin calculation logic in the CalendarDay component that determines the last row of days. The fix improves the accuracy of row position detection, particularly for edge cases like March 2025.

Issue

Description

When the calendar displays March 2025 in range selection mode, the second-to-last row has a margin-bottom: 0, causing inconsistent spacing between rows.
image

Reproduction

https://codesandbox.io/p/github/phil668/vant-bug-reproduction/main?import=true

Expected Behavior

  • Days 23-29 (second-to-last row) should have margin-bottom: 4
  • Days 30-31 (last row) should have margin-bottom: 0

Current Behavior

  • Days 23-29 (second-to-last row) have margin-bottom: 0

Root Cause

The current logic uses offset + date > 28 to determine if a day is in the last row, which proves inaccurate in certain scenarios. For example, in March 2025:

  • March 1st falls on Saturday (offset = 6)
  • When reaching March 23rd, the condition 6 + 23 > 28 evaluates to true
  • However, March 23rd is actually in the second-to-last row, not the last row
  // packages\vant\src\calendar\CalendarDay.tsx
  if (offset + (item.date?.getDate() || 1) > 28) {
     style.marginBottom = 0;
  }

@inottn
Copy link
Collaborator

inottn commented Dec 17, 2024

Why was this PR closed?

@phil668
Copy link
Author

phil668 commented Dec 18, 2024

Why was this PR closed?

Because unit tests failed,I am afraid my changes might be incorrect .I will submit this PR after the unit tests pass.

@phil668 phil668 reopened this Dec 18, 2024
@codecov-commenter
Copy link

codecov-commenter commented Dec 18, 2024

Codecov Report

Attention: Patch coverage is 83.33333% with 1 line in your changes missing coverage. Please review.

Project coverage is 89.66%. Comparing base (ec5b45b) to head (90ac03d).
Report is 4 commits behind head on main.

Files with missing lines Patch % Lines
packages/vant/src/calendar/utils.ts 80.00% 1 Missing ⚠️
Additional details and impacted files
@@            Coverage Diff             @@
##             main   #13271      +/-   ##
==========================================
+ Coverage   89.60%   89.66%   +0.06%     
==========================================
  Files         257      257              
  Lines        7013     7018       +5     
  Branches     1736     1736              
==========================================
+ Hits         6284     6293       +9     
+ Misses        384      381       -3     
+ Partials      345      344       -1     

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

@phil668
Copy link
Author

phil668 commented Dec 18, 2024

@inottn
Hi, Due to previous incorrect margin-bottom calculation logic, the unit test snapshots were inaccurate. For example, when 2010/1/24 is located in the second-to-last row, its margin-bottom should not be 0. Therefore, I have updated the calendar component's unit test snapshots. Is this acceptable?
image
image

@inottn
Copy link
Collaborator

inottn commented Dec 20, 2024

Of course, this is exactly what snapshot testing is for.

@inottn
Copy link
Collaborator

inottn commented Dec 20, 2024

LGTM. PRs are usually processed in batches on the weekends. Thank you for your contribution in advance.

@phil668
Copy link
Author

phil668 commented Dec 20, 2024

LGTM. PRs are usually processed in batches on the weekends. Thank you for your contribution in advance.

thx :D

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.

3 participants