feat: improve DatePicker UX with smart month navigation #21930
Conversation
- Add automatic navigation to next month when current month has no availability - Enhance includedDates logic to preserve selected date visibility - Implement useMoveToNextMonthOnNoAvailability hook with loading state handling - Only trigger auto-navigation for current month to avoid disrupting user intent
|
@Vansh5632 is attempting to deploy a commit to the cal Team on Vercel. A member of the Team first needs to authorize it. |
|
|
Graphite Automations"Add consumer team as reviewer" took an action on this PR • (06/19/25)1 reviewer was added to this PR based on Keith Williams's automation. "Add community label" took an action on this PR • (06/19/25)1 label was added to this PR based on Keith Williams's automation. "Add ready-for-e2e label" took an action on this PR • (06/23/25)1 label was added to this PR based on Keith Williams's automation. |
There was a problem hiding this comment.
cubic reviewed 1 file and found no issues. Review PR in cubic.dev.
React with 👍 or 👎 to teach cubic. Tag @cubic-dev-ai to give specific feedback.
|
Hey @Vansh5632. Thanks for the PR. Could you please add a loom video showing your fix? |
|
added the video of showing the working of this |
E2E results are ready! |
|
can anyone explain me the reason for the failing tests so i can fix that and make this PR ready for merging actually i am new to cal.com repo |
you can check the reason of failing tests by clicking on the particular failing test. |
WalkthroughThe change modifies the logic in the Estimated code review effort🎯 2 (Simple) | ⏱️ ~7 minutes Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
packages/features/bookings/Booker/components/DatePicker.tsxOops! Something went wrong! :( ESLint: 8.57.1 ESLint couldn't find the plugin "eslint-plugin-playwright". (The package "eslint-plugin-playwright" was not found when loaded as a Node module from the directory "".) It's likely that the plugin isn't installed correctly. Try reinstalling by running the following: The plugin "eslint-plugin-playwright" was referenced from the config file in ".eslintrc.js". If you still can't figure out the problem, please stop by https://eslint.org/chat/help to chat with the team. Note ⚡️ Unit Test Generation is now available in beta!Learn more here, or try it out under "Finishing Touches" below. ✨ Finishing Touches
🧪 Generate unit tests
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
packages/features/bookings/Booker/components/DatePicker.tsx (1)
36-48: Consider Day.js performance impact in date filtering operations.The code uses
dayjs(date).isSame(browsingDate, "month")for filtering dates andbrowsingDate.add(1, "month")for navigation. According to coding guidelines, Day.js operations like.isSame()and.add()can be slow in performance-critical code, especially in timezone mode.For better performance in this booking component, consider:
- Using
.utc()mode:dayjs(date).utc().isSame(browsingDate.utc(), "month")- Or using native Date operations for month comparisons
- const nonEmptyScheduleDaysInBrowsingMonth = nonEmptyScheduleDays.filter((date) => - dayjs(date).isSame(browsingDate, "month") - ); + const nonEmptyScheduleDaysInBrowsingMonth = nonEmptyScheduleDays.filter((date) => + dayjs(date).utc().isSame(browsingDate.utc(), "month") + );- onMonthChange(browsingDate.add(1, "month")); + onMonthChange(browsingDate.utc().add(1, "month"));
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
packages/features/bookings/Booker/components/DatePicker.tsx(4 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
**/*.{js,jsx,ts,tsx}
📄 CodeRabbit Inference Engine (.cursor/rules/review.mdc)
Flag excessive Day.js use in performance-critical code. Functions like .add, .diff, .isBefore, and .isAfter are slow, especially in timezone mode. Prefer .utc() for better performance. Where possible, replace with native Date and direct .valueOf() comparisons for faster execution. Recommend using native methods or Day.js .utc() consistently in hot paths like loops.
Files:
packages/features/bookings/Booker/components/DatePicker.tsx
🧠 Learnings (1)
packages/features/bookings/Booker/components/DatePicker.tsx (3)
Learnt from: CR
PR: calcom/cal.com#0
File: .cursor/rules/review.mdc:0-0
Timestamp: 2025-07-21T13:54:11.770Z
Learning: Applies to **/*.{js,jsx,ts,tsx} : Flag excessive Day.js use in performance-critical code. Functions like .add, .diff, .isBefore, and .isAfter are slow, especially in timezone mode. Prefer .utc() for better performance. Where possible, replace with native Date and direct .valueOf() comparisons for faster execution. Recommend using native methods or Day.js .utc() consistently in hot paths like loops.
Learnt from: Anshumancanrock
PR: #22570
File: apps/web/modules/signup-view.tsx:253-253
Timestamp: 2025-07-21T21:33:23.343Z
Learning: In signup-view.tsx, when checking if redirectUrl contains certain strings, using explicit && checks (redirectUrl && redirectUrl.includes()) is preferred over optional chaining (redirectUrl?.includes()) to ensure the result is always a boolean rather than potentially undefined. This approach provides cleaner boolean contracts for downstream conditional logic.
Learnt from: eunjae-lee
PR: #22106
File: packages/features/insights/components/FailedBookingsByField.tsx:65-71
Timestamp: 2025-07-15T12:59:34.389Z
Learning: In the FailedBookingsByField component (packages/features/insights/components/FailedBookingsByField.tsx), although routingFormId is typed as optional in useInsightsParameters, the system automatically enforces a routing form filter, so routingFormId is always present in practice. This means the data always contains only one entry, making the single-entry destructuring approach safe.
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: Install dependencies / Yarn install & cache
🔇 Additional comments (3)
packages/features/bookings/Booker/components/DatePicker.tsx (3)
102-109: LGTM! Clean implementation for including selected date.The useMemo hook correctly ensures the selected date is always included in the date picker, even when it has no availability. The Set usage prevents duplicates and the dependencies are appropriate.
143-143: PropincludedDatescorrectly matchesDatePickerComponentAPIThe
DatePickerPropsinterface inpackages/features/calendars/DatePicker.tsxdefines:export type DatePickerProps = { … includedDates?: string[]; … }and the component uses
props.includedDatesinternally. PassingincludedDates={includedDatesWithSelected}aligns with this definition.
104-106: No format mismatch found—selectedDate and nonEmptyScheduleDays are both “YYYY-MM-DD” strings.All calls to setSelectedDate use
date.format("YYYY-MM-DD"), anduseNonEmptyScheduleDayssimply returns the object keys (typed asstring[]) fromslots, which are generated by the server in the same “YYYY-MM-DD” format. No further changes needed.
|
closing as the pr doesn't solve the mentioned issue |
Made changes in the datepicker element for handling the situation
-Fixes: #21831
-Fixes: CAL- 5928
video:
Screencast.from.2025-06-21.19-53-54.mp4
Summary by cubic
Improved the DatePicker so it now keeps the selected date visible even if it has no availability, and automatically moves to the next month when the current month has no available dates.