feat: Improving Booking Visibility at Month-End #22770

CarinaWolli · 2025-07-28T09:43:19Z

What does this PR do?

Improves the booking visibility at the end of the month according to the designs: https://www.figma.com/design/wleA2SR6rn60EK7ORxAfMy/Cal.com-New-Features

Remove first week and show beginning of next month: https://www.loom.com/share/f2f77905d4274ac486934949b9d5d3e9

Fixes Improving Booking Visibility at Month-End #22712
Fixes CAL-6145

coderabbitai · 2025-07-28T09:43:26Z

"""

Walkthrough

The changes introduce enhancements to the booking calendar's end-of-month visibility. The DatePicker component and its subcomponents now support a new isCompact prop, enabling distinct rendering for compact (sidebar) and main monthly views. The calendar grid dynamically adjusts: after the second week of the month in the main view, it starts from day 8 and includes days from the next month, visually labeled. The booking store's setSelectedDate method now accepts a preventMonthSwitching parameter to control month transitions. Prefetch logic for next month's data is updated to consider the new layout behaviors. Comprehensive tests are added to verify these UI changes.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~18 minutes

Assessment against linked issues

Objective	Addressed	Explanation
Implement end-of-month calendar UI showing days from next month with visual distinction (#22712, CAL-6145)	✅
Add logic to switch calendar grid after the second week in main month view (#22712, CAL-6145)	✅
Ensure sidebar (compact) calendar always shows traditional full-month grid (#22712, CAL-6145)	✅
Update booking logic to prevent/allow month switching based on view (#22712, CAL-6145)	✅

Assessment against linked issues: Out-of-scope changes

No out-of-scope changes were found.
"""

Note

⚡️ Unit Test Generation is now available in beta!

Learn more here, or try it out under "Finishing Touches" below.

📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between aa91dcd and d46ea8b.

📒 Files selected for processing (1)

packages/features/calendars/DatePicker.tsx (12 hunks)

🚧 Files skipped from review as they are similar to previous changes (1)

packages/features/calendars/DatePicker.tsx

⏰ 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

✨ Finishing Touches

📝 Generate Docstrings

🧪 Generate unit tests

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch feat/end-of-month-UI

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

Review comments: Directly reply to a review comment made by CodeRabbit. Example:
- I pushed a fix in commit <commit_id>, please review it.
- Explain this complex logic.
- Open a follow-up GitHub issue for this discussion.
Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
- @coderabbitai explain this code block.
- @coderabbitai modularize this function.
PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
- @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
- @coderabbitai read src/utils.ts and explain its main purpose.
- @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
- @coderabbitai help me debug CodeRabbit configuration file.

Support

Need 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)

@coderabbitai pause to pause the reviews on a PR.
@coderabbitai resume to resume the paused reviews.
@coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
@coderabbitai full review to do a full review from scratch and review all the files again.
@coderabbitai summary to regenerate the summary of the PR.
@coderabbitai generate docstrings to generate docstrings for this PR.
@coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
@coderabbitai generate unit tests to generate unit tests for this PR.
@coderabbitai resolve resolve all the CodeRabbit review comments.
@coderabbitai configuration to show the current CodeRabbit configuration for the repository.
@coderabbitai help to get help.

Other keywords and placeholders

Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (`.coderabbit.yaml`)

You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
Please see the configuration documentation for more information.
If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

Visit our Documentation for detailed information on how to use CodeRabbit.
Join our Discord Community to get help, request features, and share feedback.
Follow us on X/Twitter for updates and announcements.

vercel · 2025-07-28T10:27:16Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

2 Skipped Deployments

Name	Status	Preview	Comments	Updated (UTC)
cal	⬜️ Ignored (Inspect)			Jul 30, 2025 3:54pm
cal-eu	⬜️ Ignored (Inspect)			Jul 30, 2025 3:54pm

linear · 2025-07-28T11:11:09Z

CAL-6145 Improving Booking Visibility at Month-End

Ryukemeister

looks good on platform side, tested the booker in the examples app and it seems to work well!

* remove first weeks and add last * fix added last week * prefetch availability of next month * don't switch month * On hover show month * only show new UI in monthly view * show month tooldtip only when needed * show month on first day of month * remove isFirstDayOfNextMonth * fix prefetching next month * fix datePicker tests * preventMonthSwitching in monthly view * add tests * code clean up * code clean up * code clena up for ooo days * push first day of month * remove bg color for the month badge * fix text colour * remove not needed * use object param * revert: use object param * use object param * fix DatePicker tests --------- Co-authored-by: CarinaWolli <wollencarina@gmail.com> Co-authored-by: Sean Brydon <sean@cal.com> Co-authored-by: Eunjae Lee <hey@eunjae.dev>

* fix: resolve username constraint violation in removeMember - Update username to - format when removing users from organizations - Fix unique constraint violation on (username, organizationId) when organizationId is null - Add test case to verify username format change and successful removal - Fix skipped test by adding proper imports and removing describe.skip Co-Authored-By: anik@cal.com <adhabal2002@gmail.com> * test: update removeMember test to verify constraint violation scenario - Create two users with same username (one with null orgId, one with orgId) - Verify removing org user updates username without unique constraint error - Test ensures username gets updated to - format Co-Authored-By: anik@cal.com <adhabal2002@gmail.com> * test: add comprehensive unit tests for handleInstantMeeting - Revert previous removeMember changes - Add full test coverage for instant meeting functionality - Test team validation, booking creation, token generation - Test webhook triggers and browser notifications - Mock external dependencies for isolated unit tests - Translation issue to be addressed in future iteration Co-Authored-By: anik@cal.com <adhabal2002@gmail.com> * update * Update handleInstantMeeting.test.ts * fix: redir parameter for connect atoms (#22815) * encode redirect url to make sure it has all parameters * add changesets * feat: Support an array response for a field when used as `Value of Field` (#22740) * Passing tests and fixed * self review addressed adn more tests * fix: flaky e2e (#22819) * fix: merge working hours when adjacent (#21912) * fix: Adjacency issue when working hours connect over multiple days * Add tests to validate the new merging of day end logic * Update to correct annotation. Co-authored-by: cubic-dev-ai[bot] <191113872+cubic-dev-ai[bot]@users.noreply.github.com> * Implement subsequent date ranges for date overrides also * The map needs to be updated on successful resolve. * test: add failing test for overlapping ranges with same end time Demonstrates bug where overlapping working hour ranges (6:00-10:00 and 8:00-10:00) lose the earlier portion (6:00-8:00), showing only 8:00 and 9:00 slots instead of all 4 slots (6:00, 7:00, 8:00, 9:00). Related to Carina's comment on PR #21912. Co-Authored-By: alex@cal.com <me@alexvanandel.com> * fix: properly merge overlapping ranges with same end time Fixes bug where overlapping working hour ranges with the same end time (e.g., 6:00-10:00 and 8:00-10:00) would lose the earlier portion of the first range. The merging logic now correctly preserves the earliest start time when ranges overlap and share the same end time. This ensures all expected time slots are available (6:00, 7:00, 8:00, 9:00) instead of losing the earlier slots (6:00, 7:00). Resolves the issue identified in Carina's comment on PR #21912. Co-Authored-By: alex@cal.com <me@alexvanandel.com> * perf: optimize overlapping range detection from O(n²) to O(n) Replaces Object.keys().find() with Map-based lookup for ranges with same end time. This optimization handles 2000+ date ranges efficiently, reducing complexity from 4M operations to linear time while maintaining the same merging behavior. Performance improvement for high-volume event types with many availability ranges. Co-Authored-By: alex@cal.com <me@alexvanandel.com> --------- Co-authored-by: cubic-dev-ai[bot] <191113872+cubic-dev-ai[bot]@users.noreply.github.com> Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> * feat: Improving Booking Visibility at Month-End (#22770) * remove first weeks and add last * fix added last week * prefetch availability of next month * don't switch month * On hover show month * only show new UI in monthly view * show month tooldtip only when needed * show month on first day of month * remove isFirstDayOfNextMonth * fix prefetching next month * fix datePicker tests * preventMonthSwitching in monthly view * add tests * code clean up * code clean up * code clena up for ooo days * push first day of month * remove bg color for the month badge * fix text colour * remove not needed * use object param * revert: use object param * use object param * fix DatePicker tests --------- Co-authored-by: CarinaWolli <wollencarina@gmail.com> Co-authored-by: Sean Brydon <sean@cal.com> Co-authored-by: Eunjae Lee <hey@eunjae.dev> * chore: Refactor logs (#22824) * Refactor logs * Add specific info to log * fix: Errors in org onboarding in some edge cases (#22711) * Automatically enable migration of a team that conflicts with Orgs slug * Allow changing the orgs slug and name if user goes back and changes it * avoid crashing on some scenarios * Revert "Allow changing the orgs slug and name if user goes back and changes it" This reverts commit f8872b0. * fix: handle unpublished teams gracefully in org migration - Change 'No oldSlug for team' from error to warning for unpublished teams - Keep 'No slug for team' as error since org onboarding ensures teams have names - Add test for migrating unpublished teams without oldSlug - Add clarifying comments about when each condition can occur * feat: enable PBAC checking on organization settings page (#22467) * refactor: convert checkBookingLimits to class service with dependency injection (#22768) * refactor: convert checkBookingLimits to class service with dependency injection - Create CheckBookingLimitsService class following AvailableSlotsService pattern - Add countBookingsByEventTypeAndDateRange method to BookingRepository - Move direct prisma calls from service to repository layer - Implement dependency injection with proper DI tokens and modules - Update all usage points to use the new service through DI - Maintain backward compatibility with error-throwing wrapper functions - Update tests to use the new service pattern - Resolve TODO comment in AvailableSlotsService for DI integration Co-Authored-By: morgan@cal.com <morgan@cal.com> * chore: DI CheckBookingLimitsService in v2 slots service * chore: bump libraries * chore: create getCheckBookingLimitsService * refactor: convert checkBookingAndDurationLimits to service class with DI - Create CheckBookingAndDurationLimitsService class following DI pattern - Add DI tokens and module for the new service - Update booking-limits container to provide the new service - Refactor handleNewBooking.ts to use service through DI - Maintain backward compatibility with deprecated function export - Preserve all existing functionality while improving code organization Co-Authored-By: morgan@cal.com <morgan@cal.com> * chore: CheckBookingAndDurationLimitsService * chore: bump platform libs --------- Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Co-authored-by: morgan@cal.com <morgan@cal.com> Co-authored-by: Morgan <33722304+ThyMinimalDev@users.noreply.github.com> * fix: Return empty available days if error querying calendar (#22828) * Return a busy block placeholder if calendar throws an error * Refactor `getCalendarsEvents` to return an object with a success prop * Throw error in `getBusyTimes` if failed to fetch calendar availability * Return empty available days if error getting busy times * yeet. * Type fix * Fix type error in getLuckyUsers * Type fixes * Type fix * Type fix * Fix test * Fix test mocks * Refactor calendars.service to use new calendarBusyTimesQuery --------- Co-authored-by: Alex van Andel <me@alexvanandel.com> * chore: release v5.5.9 * include mobile layout (#22836) Co-authored-by: CarinaWolli <wollencarina@gmail.com> * test: fix handleInstantMeeting test with setupAndTeardown and proper mocking - Add setupAndTeardown() for proper test environment setup - Use mockNoTranslations() to fix translation function mocking - Simplify NextApiRequest mock to resolve TypeScript errors - Both test cases now pass successfully Co-Authored-By: anik@cal.com <adhabal2002@gmail.com> * fix typo --------- Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Co-authored-by: Rajiv Sahal <sahalrajiv-extc@atharvacoe.ac.in> Co-authored-by: Hariom Balhara <hariombalhara@gmail.com> Co-authored-by: Alex van Andel <me@alexvanandel.com> Co-authored-by: cubic-dev-ai[bot] <191113872+cubic-dev-ai[bot]@users.noreply.github.com> Co-authored-by: Carina Wollendorfer <30310907+CarinaWolli@users.noreply.github.com> Co-authored-by: CarinaWolli <wollencarina@gmail.com> Co-authored-by: Sean Brydon <sean@cal.com> Co-authored-by: Eunjae Lee <hey@eunjae.dev> Co-authored-by: Joe Au-Yeung <65426560+joeauyeung@users.noreply.github.com> Co-authored-by: sean-brydon <55134778+sean-brydon@users.noreply.github.com> Co-authored-by: morgan@cal.com <morgan@cal.com> Co-authored-by: Morgan <33722304+ThyMinimalDev@users.noreply.github.com>

CarinaWolli added 9 commits July 24, 2025 11:45

remove first weeks and add last

b66dc57

fix added last week

8cab3a8

prefetch availability of next month

2dc274b

don't switch month

c5d4887

On hover show month

3db3e63

only show new UI in monthly view

51935ac

show month tooldtip only when needed

919f452

show month on first day of month

27b0f59

remove isFirstDayOfNextMonth

8b0b60d

keithwillcode added consumer core area: core, team members only labels Jul 28, 2025

vercel bot deployed to Preview – dev July 28, 2025 10:03 View deployment

CarinaWolli added 2 commits July 28, 2025 12:19

fix prefetching next month

e36908d

fix datePicker tests

8d0b64e

vercel bot deployed to Preview – dev July 28, 2025 10:45 View deployment

preventMonthSwitching in monthly view

82cf512

vercel bot deployed to Preview – dev July 28, 2025 11:11 View deployment

CarinaWolli added 🧹 Improvements Improvements to existing features. Mostly UX/UI High priority Created by Linear-GitHub Sync labels Jul 28, 2025

add tests

4abf9ab

github-actions bot added the enterprise area: enterprise, audit log, organisation, SAML, SSO label Jul 28, 2025

vercel bot deployed to Preview – dev July 28, 2025 12:06 View deployment

CarinaWolli added 3 commits July 28, 2025 14:06

code clean up

b02b23c

code clean up

1c1a089

code clena up for ooo days

77c8e3a

CarinaWolli marked this pull request as ready for review July 28, 2025 12:39

CarinaWolli requested a review from a team as a code owner July 28, 2025 12:39

CarinaWolli requested a review from eunjae-lee July 29, 2025 15:43

Ryukemeister previously approved these changes Jul 29, 2025

View reviewed changes

vercel bot deployed to Preview – dev July 29, 2025 16:21 View deployment

revert: use object param

d90ca3f

CarinaWolli dismissed Ryukemeister’s stale review via d90ca3f July 29, 2025 16:28

vercel bot deployed to Preview – dev July 29, 2025 17:09 View deployment

CarinaWolli added 2 commits July 30, 2025 09:18

use object param

823f995

fix DatePicker tests

aa91dcd

CarinaWolli marked this pull request as draft July 30, 2025 07:39

fix line height

5d0e1cd

vercel bot deployed to Preview – dev July 30, 2025 07:57 View deployment

design improvements

d46ea8b

CarinaWolli marked this pull request as ready for review July 30, 2025 09:43

CarinaWolli enabled auto-merge (squash) July 30, 2025 11:11

eunjae-lee previously approved these changes Jul 30, 2025

View reviewed changes

CarinaWolli dismissed eunjae-lee’s stale review via d46ea8b July 30, 2025 13:27

eunjae-lee approved these changes Jul 30, 2025

View reviewed changes

Ryukemeister approved these changes Jul 30, 2025

View reviewed changes

vercel bot deployed to Preview – dev July 30, 2025 14:09 View deployment

Merge branch 'main' into feat/end-of-month-UI

8b5b6a6

vercel bot deployed to Preview – dev July 30, 2025 15:15 View deployment

Merge branch 'main' into feat/end-of-month-UI

e138297

vercel bot deployed to Preview – dev July 30, 2025 16:11 View deployment

CarinaWolli merged commit 7fef683 into main Jul 30, 2025
37 checks passed

CarinaWolli deleted the feat/end-of-month-UI branch July 30, 2025 16:20

coderabbitai bot mentioned this pull request Jul 31, 2025

fix: add new end of month UI to mobile #22836

Merged

coderabbitai bot mentioned this pull request Jul 31, 2025

fix: minor UI improvements for end of month design #22837

Merged

coderabbitai bot mentioned this pull request Aug 11, 2025

fix: multiple widgets for Booker atom #22925

Open

3 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat: Improving Booking Visibility at Month-End #22770

feat: Improving Booking Visibility at Month-End #22770

Uh oh!

CarinaWolli commented Jul 28, 2025 •

edited

Loading

Uh oh!

coderabbitai bot commented Jul 28, 2025 •

edited

Loading

Chat

Support

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

CodeRabbit Configuration File (`.coderabbit.yaml`)

Documentation and Community

Uh oh!

vercel bot commented Jul 28, 2025 •

edited

Loading

Uh oh!

linear bot commented Jul 28, 2025

Uh oh!

Ryukemeister left a comment

Uh oh!

Uh oh!

Uh oh!

feat: Improving Booking Visibility at Month-End #22770

feat: Improving Booking Visibility at Month-End #22770

Uh oh!

Conversation

CarinaWolli commented Jul 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What does this PR do?

Uh oh!

coderabbitai bot commented Jul 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Estimated code review effort

Assessment against linked issues

Assessment against linked issues: Out-of-scope changes

Chat

Support

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

CodeRabbit Configuration File (.coderabbit.yaml)

Documentation and Community

Uh oh!

vercel bot commented Jul 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

linear bot commented Jul 28, 2025

Uh oh!

Ryukemeister left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

CarinaWolli commented Jul 28, 2025 •

edited

Loading

coderabbitai bot commented Jul 28, 2025 •

edited

Loading

CodeRabbit Configuration File (`.coderabbit.yaml`)

vercel bot commented Jul 28, 2025 •

edited

Loading