* feat: simplify date range picker to Airbnb-style selection
Co-Authored-By: eunjae@cal.com <hey@eunjae.dev>
* feat: apply Airbnb-style selection to allowPastDates branch
Co-Authored-By: eunjae@cal.com <hey@eunjae.dev>
* refactor: extract date range selection logic and add unit tests
- Extract date range selection logic into pure function (dateRangeLogic.ts)
- Remove unused allowPastDates parameter from selection logic
- Add comprehensive unit tests (11 test cases covering all scenarios)
- Simplify DateRangePicker component (30+ lines -> 5 lines)
- Improve separation of concerns: allowPastDates only controls calendar date restrictions
* style update
* feat: add hover highlighting for date range selection
When a start date is selected and user hovers over other dates,
the potential range between start and hovered date now shows
bg-emphasis background for better visual feedback.
Co-Authored-By: eunjae@cal.com <hey@eunjae.dev>
* memoize hovering range and update styles
---------
Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
* fix: preserve seatsPerTimeSlot during partial event type updates
When doing a partial update on the PATCH /v2/organizations/{orgId}/teams/{teamId}/event-types/{eventTypeId} endpoint, providing a partial body would reset seatsPerTimeSlot back to null because the transformSeatsApiToInternal function was always called even when seats was undefined.
This fix ensures that the seat options are only transformed when the seats field is explicitly provided in the update request, preserving existing values during partial updates.
Also adds e2e test to verify partial updates preserve seatsPerTimeSlot.
Co-Authored-By: morgan@cal.com <morgan@cal.com>
* fix: handle TypeScript union type narrowing for seatsPerTimeSlot
When seats is not provided in a partial update, the transformed body
may not have seatsPerTimeSlot property. This fix uses 'in' operator
to safely check for the property before accessing it.
Also fixes the e2e test to properly narrow the union type for seats
using type guards.
Co-Authored-By: morgan@cal.com <morgan@cal.com>
* refactor: simplify seatsPerTimeSlot handling per review feedback
Per supalarry's suggestion, instead of using 'in' operator checks in
multiple validation calls, we now return {seatsPerTimeSlot: undefined}
when seats is not provided. This keeps the validation code unchanged
and only requires modifying one line in the transformation.
Co-Authored-By: morgan@cal.com <morgan@cal.com>
---------
Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
* Add /router to isBookingPages
* Remove Dynamic Posthog Provider from AppProvider.tsx because that is only used by the pages router, and the pages router is only in use by the /router endpoint, which is a booking page and we havent implemented corresponding GeoProvider support for it
* refactor: replace TRPCError with ErrorWithCode in packages/features
This refactor moves error handling from throwing TRPCError directly in
packages/features to throwing ErrorWithCode instead. The conversion to
TRPCError now happens at the TRPC layer.
Changes:
- Add generic ErrorCode values (Unauthorized, Forbidden, NotFound,
BadRequest, InternalServerError) to errorCodes.ts
- Update getServerErrorFromUnknown to map new ErrorCodes to proper
HTTP status codes
- Create toTRPCError helper in packages/trpc/server/lib
- Create errorMappingMiddleware in packages/trpc/server/middlewares
- Migrate TRPCError throws in packages/features to ErrorWithCode:
- teamService.ts
- getEventTypeById.ts
- eventTypeRepository.ts
- OrganizationPermissionService.ts
- OrganizationPaymentService.ts
- sso.ts
- handleCreatePhoneCall.ts
- userCanCreateTeamGroupMapping.ts
This improves separation of concerns by making packages/features
transport-agnostic, allowing the same feature code to be reused from
tRPC, API routes, workers, etc.
Co-Authored-By: benny@cal.com <sldisek783@gmail.com>
* fix: remove isTrpcCall parameter and fix lint warning
- Remove isTrpcCall parameter from get.handler.ts call since the
feature layer no longer needs to know about tRPC
- Fix unsafe optional chaining lint warning in getEventTypesByViewer.ts
by precomputing usersSource variable
- Complete migration of getEventTypesByViewer.ts to ErrorWithCode
Co-Authored-By: benny@cal.com <sldisek783@gmail.com>
* revert
* add eslint rule
* add comment
* fix: add isTrpcCall back to getEventTypeById interface
The user reverted the removal of isTrpcCall parameter from the handler,
so we need to add it back to the interface to fix the type error.
Co-Authored-By: benny@cal.com <sldisek783@gmail.com>
* test: update teamService tests to expect ErrorWithCode instead of TRPCError
Co-Authored-By: benny@cal.com <sldisek783@gmail.com>
* refactor
* wip
* feat: integrate errorMappingMiddleware into base TRPC procedure
Co-Authored-By: benny@cal.com <sldisek783@gmail.com>
* connect middlewares
* revert
* revert
* refactor
* rename
* fix: handle ErrorWithCode in teams server-page error handling
The error handling was checking for TRPCError, but teamService now throws
ErrorWithCode. This caused the 'This invitation is not for your account'
error message to not be displayed when a wrong user tries to use an
invitation link.
Co-Authored-By: benny@cal.com <sldisek783@gmail.com>
* fix
* fix
* fix
---------
Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
* fix: allow false for custom field 'fieldRequired' by using z.boolean()
* updated to z.boolean().optional()
---------
Co-authored-by: Pallav <90088723+Pallava-Joshi@users.noreply.github.com>
* fix: integer to text comparison in routing insights query
Add explicit integer array cast to prevent PostgreSQL type mismatch error when comparing bookingUserId (integer) with user_id array values in getRoutedToPerPeriodData query
* add e2e tests
* refactor: remove LoadingInsight component and handle loading in ChartCard
- Enhanced ChartCard to render default loading UI when isPending is true
- Replaced all LoadingInsight usages with ChartCard that accepts isPending/isError props
- Removed LoadingInsight component and updated exports
- Updated 16 chart components to use the new pattern
- ChartCard now shows spinner and skeleton title during loading state
Co-Authored-By: eunjae@cal.com <hey@eunjae.dev>
* fix: make children prop optional in ChartCard when isPending is true
Co-Authored-By: eunjae@cal.com <hey@eunjae.dev>
* refactor: remove unused loadingState prop from ChartCard
- Remove loadingState prop and ChartLoadingState type export
- Simplify computedLoadingState to derive state only from isPending/isError
- No functional changes - loadingState was not being used by any components
- data-loading-state attribute behavior remains unchanged for E2E tests
Co-Authored-By: eunjae@cal.com <hey@eunjae.dev>
* refactor: remove duplicate isPending early returns from chart components
- Update all 16 chart components to use single ChartCard return pattern
- Gate children rendering with !isPending && isSuccess && data checks
- Prevents data processing code from executing during loading state
- Improves code consistency and maintainability across all charts
Co-Authored-By: eunjae@cal.com <hey@eunjae.dev>
* refactor: remove redundant !isPending check from chart conditionals
- Simplify conditional rendering to use just 'isSuccess && data' or 'isSuccess'
- In TanStack Query, isSuccess and isPending are mutually exclusive
- The !isPending check was redundant since isSuccess already implies !isPending
- Applied to all 16 chart components for consistency
- Components with safe defaults (data ?? []) use just 'isSuccess'
- Components requiring data check use 'isSuccess && data'
Co-Authored-By: eunjae@cal.com <hey@eunjae.dev>
* revert the mistake
* apply feedback
* apply feedback
* fix e2e
---------
Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
* fix: made playground page use same layout as other pages
* update: added feature key
* Change link display from table to list format
Refactor page layout to use a list instead of a table for links.
---------
Co-authored-by: Anik Dhabal Babu <81948346+anikdhabal@users.noreply.github.com>
* wip
* wip
* feature: Booking Tasker without DI yet
* feature: Booking Tasker with DI
* fix type check 1
* fix type check 2
* fix
* comment booking tasker for now
* fix: DI regularBookingService api v2
* fix: convert trigger.dev SDK imports to dynamic imports to fix unit tests
The unit tests were failing because BookingEmailAndSmsTriggerTasker.ts had static imports of trigger files that depend on @trigger.dev/sdk. This caused Vitest to try to resolve the SDK at module load time, even though it should be optional.
Changed all imports in BookingEmailAndSmsTriggerTasker.ts from static to dynamic (using await import()) so the trigger files are only loaded when the tasker methods are actually called, not at module load time during tests.
This fixes the 'Failed to load url @trigger.dev/sdk' errors that were causing 28+ test failures.
Co-Authored-By: morgan@cal.com <morgan@cal.com>
* fix unit tests
* keep inline smsAndEmailHandler.send calls
* chore: add team feature flag
* add satisfies ModuleLoader
* fix type check app flags
* move trigger in feature
* fix: add trigger.dev prisma generator
* fix: email app statuses
* fix: CalEvtBuilder unit test
* chore: improvements, schema, config, retry
* fixup! chore: improvements, schema, config, retry
* chore: cleanup code
* chore: cleanup code
* chore: clean code and give full payload
* remove log
* add booking notifications queue
* add attendee phone number for sms
* bump trigger to 4.1.0
* add missing booking seat data in attendee
* update config
* fix logger regular booking service
* fix: prisma as external deps of trigger
* fix yarn.lock
* revert change to example app booking page
* fix: resolve circular dependencies and improve cold start performance in trigger tasks
- Convert BookingRepository import to type-only in CalendarEventBuilder.ts to eliminate circular dependency risk
- Convert EventNameObjectType, CalendarEvent, and JsonObject imports to type-only in BookingEmailAndSmsTaskService.ts
- Use dynamic imports in all trigger notification tasks (confirm, request, reschedule, rr-reschedule) to reduce cold start time
- Move heavy imports (BookingEmailSmsHandler, BookingRepository, prisma, TriggerDevLogger, BookingEmailAndSmsTaskService) inside run functions
- Eliminates module-level prisma import which violates repo guidelines and adds cold start overhead
- Reduces initial module dependency graph by deferring heavy imports (email templates, workflows, large repositories) until task execution
Co-Authored-By: morgan@cal.com <morgan@cal.com>
* fix: improve cold start performance in reminderScheduler with dynamic imports
- Remove module-level prisma import (violates 'No prisma outside repositories' guideline)
- Use dynamic imports for UserRepository (1,168 lines) - only loaded when needed in EMAIL_ATTENDEE action
- Use dynamic imports for twilio provider (386 lines) - only loaded in cancelScheduledMessagesAndScheduleEmails
- Use dynamic imports for all manager functions by action type:
- scheduleSMSReminder (387 lines) - loaded only for SMS actions
- scheduleEmailReminder (459 lines) - loaded only for Email actions
- scheduleWhatsappReminder (266 lines) - loaded only for WhatsApp actions
- scheduleAIPhoneCall (478 lines) - loaded only for AI phone call actions
- Use dynamic imports for sendOrScheduleWorkflowEmails in cancelScheduledMessagesAndScheduleEmails
- Significantly reduces cold start time by deferring heavy module loading until execution paths need them
- Eliminates module-level prisma import that violated repository pattern guidelines
Co-Authored-By: morgan@cal.com <morgan@cal.com>
* fix: improve cold start performance in BookingEmailSmsHandler with dynamic imports
- Remove module-level imports of all email-manager functions (653 LOC + 30+ email templates)
- Add dynamic imports in each method (_handleRescheduled, _handleRoundRobinRescheduled, _handleConfirmed, _handleRequested, handleAddGuests)
- Defer heavy email-manager loading until method execution
- Verified no circular dependencies between email-manager and bookings
- Significantly reduces cold start time for RegularBookingService and BookingEmailAndSmsTaskService
Co-Authored-By: morgan@cal.com <morgan@cal.com>
* fix: use dynamic imports
* update yarn lock
* code review
* trigger config project ref in env
* update yarn lock
* add .env.example trigger variables
* add .env.example trigger variables
* fix: cleanup error handling and loggin
* fix: trigger config from env
* fix: small typo fix
* fix: ai review comments
* fix: ai review comments
* ai review
* prettier
---------
Co-authored-by: hbjORbj <sldisek783@gmail.com>
Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Benny JooGitHubDevin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>cubic-dev-ai[bot] <191113872+cubic-dev-ai[bot]@users.noreply.github.com>
* chore: Fix circular dependency in tanstack-table.d.ts
* fix: Re-export TextFilterOperator
* Unable to export non-type values from @calcom/types
* Refactor data-table types in a way that ensures type-safety as before
* Add FilterPopover and further fixups
* Fix further type errors missed earlier
* More hidden type errors
* Type error in useFilterValue
* add public client
* implement PKCE
* pass codeChallenge and codeChallengeMethod to handler
* fixes for secure oauth flow
* fix type error
* clean up refresh token endpoint
* only support S256
* fix type error
* remove comment
* add tests
* fix type errors in route.test.ts
* add missing support for refresh token
* add e2e test for public client refresh tokens
* allow pkce for confidential clients
* fix type error
* fix e2e
* fix option pkce for confidential clients
* e2e test improvements
* fix test
* remove only
* add delay
* fix e2e tests
* remove only
* don't skip pkce if codeChallenge is set
* add service functions for token endpoint
* use service function in refreshToken endpoint
* use repository
* remove return types
* e2e test fixes
* fix e2e test
* remove .only in e2e test
* remove pause
* fix error responses in token endpoints
* adjust tests to new error responses
* fix error responses
* e2e improvements
* redirect on error
* adjust tests
* Update apps/web/modules/auth/oauth2/authorize-view.tsx
Co-authored-by: cubic-dev-ai[bot] <191113872+cubic-dev-ai[bot]@users.noreply.github.com>
---------
Co-authored-by: CarinaWolli <wollencarina@gmail.com>
Co-authored-by: cubic-dev-ai[bot] <191113872+cubic-dev-ai[bot]@users.noreply.github.com>
## What does this PR do?
This PR implements attributes PBAC - router checks + UI
## Visual Demo (For contributors especially)
A visual demonstration is strongly recommended, for both the original and new change **(video / image - any one)**.
#### Video Demo (if applicable):
- Show screen recordings of the issue or feature.
- Demonstrate how to reproduce the issue, the behavior before and after the change.
#### Image Demo (if applicable):
- Add side-by-side screenshots of the original and updated change.
- Highlight any significant change(s).
## Mandatory Tasks (DO NOT REMOVE)
- [ ] I have self-reviewed the code (A decent size PR without self-review might be rejected).
- [ ] I have updated the developer docs in /docs if this PR makes changes that would require a [documentation change](https://cal.com/docs). If N/A, write N/A here and check the checkbox.
- [ ] I confirm automated tests are in place that prove my fix is effective or that my feature works.
## How should this be tested?
Enable PBAC on an org
Create a custom role -> advanced -> organizations -> "editUser"
Assign it to a user
impersonate user
test they have access to all things attributes
remove permissions
check they dont have permissions.
## Checklist
<!-- Remove bullet points below that don't apply to you -->
- I haven't read the [contributing guide](https://github.com/calcom/cal.com/blob/main/CONTRIBUTING.md)
- My code doesn't follow the style guidelines of this project
- I haven't commented my code, particularly in hard-to-understand areas
- I haven't checked if my changes generate no new warnings
<!-- This is an auto-generated description by cubic. -->
---
## Summary by cubic
Adds a new PBAC “editUsers” permission and read gating for Attributes, updating the UI and backend so users can view and edit attributes only when allowed.
- **New Features**
- Added CustomAction.EditUsers to the permission registry for organization-scoped attribute editing.
- Settings computes canViewAttributes and shows the Attributes tab only when allowed.
- Members page fetches Attributes permissions and exposes canViewAttributes and canEditAttributesForUser to the UI.
- User Edit Sheet hides attributes without read permission and shows attribute editing and the bulk “Mass Assign Attributes” action only with editUsers; other user edits depend on changeMemberRole.
- Attributes TRPC router gates create/edit/delete/toggle via PBAC and requires organization.attributes.editUsers for assign/bulk-assign; added a helper to create PBAC-aware procedures.
- **Migration**
- Run the new Prisma migration to seed the admin role with editUsers.
- If using custom roles, grant Edit Users under Attributes as needed.
<sup>Written for commit 856aa2e8e1521fc22cd71cb0fa6d720036efe8a2. Summary will update automatically on new commits.</sup>
<!-- End of auto-generated description by cubic. -->
* chore: refactor config files to prevent migration tool errors
* refactor: upgrade with the tailwind migration tool
* chore: restore pre-commit command + mc
* refactor(wip): update dependencies and migrate to Tailwind CSS v4 (mainly web)
* chore: resolve Tailwind v4 migration conflicts from merging main
* chore: remove unused Tailwind packages from config and update dependencies for v4 migration
* chore: uncomment Tailwind CSS utility classes in globals.css
* fix: resolve token conflicts between calcom and coss ui
* fix: textarea scrollbar
* Fix CUI-16
* fix: added @tailwindcss/forms plugin and cleaned up CSS classes in various components to remove unnecessary dark mode styles
* fix: selects and inputs of different sizes
* fix: remove unnecessary leading-20 class from modal titles in various components
* fix: update Checkbox component styles to remove unnecessary border on checked state
* fix: clean up styles in RequiresConfirmationController, Checkbox, and Radio components to enhance consistency
* fix: update button and filter component styles to remove unnecessary rounded classes for consistency
* fix: calendar
* fix: update KBarSearch
* fix: refine styles in Empty and Checkbox components for improved consistency
* Fix focus state email input
* fix: update button hover and active states to use 'not-disabled' instead of 'enabled'
* fix: line-height issues
* fix: update class name for muted background in BookingListItem component
* fix: sidebar spacing
* chore: update class names to use new Tailwind CSS color utilities
* fix embed
* chore: upgrade Tailwind CSS to version 4.1.16 and update related dependencies
* Map css variables and add a playground test for heavy css customization
* suggestion for coss-ui
* refactor: update CSS variable usage and clean up styles
- Replace instances of `--cal-brand-color` with `--cal-brand` in embed-related HTML files.
- Remove the now-unnecessary `addAppCssVars` function from the embed core.
- Import theme tokens in the embed core styles for better consistency.
- Clean up whitespace and formatting in CSS files for improved readability.
- Add a comment in `tokens.css` regarding its usage in both embed and webapp contexts.
* Handle within tokens.css instead of fixing coss-ui
* Remove initial, not needed. Also, remove tailwind.config.js as tailwidn scans the html automaically
* fix: examples app breaking
* fix: modal not resizing correctly
* feat: upgrade atoms to tailwind v4
* fix: atoms build breaking
* fix: atoms build breaking
* chore: upgrate examples/base to tailwind 4
* chore: update globals.css
* fix: add missing scheduler css variables
* fix: PlatformAdditionalCalendarSelector
* chore: update global styles
* chore: update tailwindcss and postcss dependencies to stable versions
* chore: remove unneeded class
* fix: dialog and toast animation
* fix: replace flex-shrink-0 with shrink-0 for consistent styling in various components
* fix: dialog modal for Apple connect
* add margin in SaveFilterSegmentButton
* Fix radix button nested states
* add cursor pointer to buttons but keep dsabled state
* Fix commandK selectors and adds cursor pointer
* Fix teams filter
* fix - round checkboxes
* fix filter checkbox
* fix select indicator's margin
* command group font size
* style: fix badge and tooltip radius
* chore: remove unneeded files
* Delete PR_REVIEW_MANAGED_EVENT_REASSIGNMENT.md
* remove ui-playground leftover
* fix: add missing react phone input styles in atoms
* Delete managed-event-reassignment-flow-and-architecture.mermaid
* fix: inter font not loading
* Add theme to skeleton container so that it can support dark mode
* fix: create custom stack-y-* utilities post tw4 upgrade
* fix: typo
* fix: atoms stack class + remove unused css file
* fix default radius valiue
* fix space-y in embed
* fix skeleton background
* Hardcode radius values to match production
* fix border in embed
* add missing externalThemeClass
* feat: create a custom stack-y-* utility
* fix: add stack utility to atom global css
* fix: Skeleton loader class modalbox
* Add stack-y utility in embed
* fix: add missing stack utilities in atoms globals.css
* update yarn.lock
* add popover portla
* update
---------
Co-authored-by: Sean Brydon <sean@cal.com>
Co-authored-by: Hariom Balhara <hariombalhara@gmail.com>
Co-authored-by: Ryukemeister <sahalrajiv6900@gmail.com>
Co-authored-by: cal.com <morgan@cal.com>
Co-authored-by: Eunjae Lee <hey@eunjae.dev>
Co-authored-by: Anik Dhabal Babu <adhabal2002@gmail.com>
* feat: google ads conversion tracking
* gaClientid
* store gclid in stripe metadata
* tracking only in the us
* track google campaign id as well
* rename gclid -> google ads
* fix: build
* fix
* refactor
* fix: type check
* fix: type check
* fix: type check
* fix: type check
* fix: store it in cookie
* refactor
* fix
* cleanup
* linked ads tracking
* refactor checkout session tracking
## What does this PR do?
This PR changes the order of creating the team -> paying -> invite users.
The old approach was create team -> invite -> pay. But we are matching the current implementation of how billing works with usage based billing
## How should this be tested?
Enable onboarding-v3 flag on your instance
Ensure you have stripe enabled + stripe:listen running
login as onboarding@example.com, onboarding
Go through the team setup flow
Pay
Invite
Ensure uers were added to team
Create a new account
disable billing
Test again
## Checklist
<!-- Remove bullet points below that don't apply to you -->
- I haven't read the [contributing guide](https://github.com/calcom/cal.com/blob/main/CONTRIBUTING.md)
- My code doesn't follow the style guidelines of this project
- I haven't commented my code, particularly in hard-to-understand areas
- I haven't checked if my changes generate no new warnings
2025-11-25 09:14:59 +00:00
Joe Au-YeungGitHubDevin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
* Change arg name from `bookingUId` to `bookingUid`
* Lint fix
* Use `BookingRepository` to find booking to reschedule
* Move early return further up if no booking is found
* Use `PermissionCheckService` if request rescheduling a team booking
* Remove redundent check
* Remove redundent eventType query
* Using `BookingRepository` to update the booking to rescheduled
* Update type in `getUsersCredentialsIncludeServiceAccountKey` to only
require params that are required
* Get booking organizer credentials
* Type fixes
* test: Add tests for team admin request reschedule with organizer credentials
- Add test for team admin requesting reschedule with proper permissions
- Add test verifying organizer's credentials are used (not requester's)
- Add test for team member without permissions (should fail)
These tests cover the fix in PR #24645 which ensures that when a team admin
requests a reschedule, the booking organizer's credentials are used to delete
calendar events instead of the requester's credentials.
Co-Authored-By: joe@cal.com <j.auyeung419@gmail.com>
* fix: Address code review comments for request reschedule
- Change user: true to user: { select: { id, email } } to only fetch required fields
- Change eventType include to select with explicit fields including teamId
- Remove sensitive information (user object, cancellationReason) from debug log
- All integration tests passing locally
Co-Authored-By: joe@cal.com <j.auyeung419@gmail.com>
* Type fix
* Remove businesss logic references from repository methods.
* Move business logic to handler
* Type fix
---------
Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
## What does this PR do?
Improves the visual presentation of overlapping calendar events in the weekly view with two key enhancements:
- **Dynamic startHour per scenario**: Each playground scenario now displays the calendar starting at an appropriate hour based
on its earliest event time, rather than always starting at 6am
- **Full width for non-overlapping events**: Single events and non-overlapping events now display at 100% width (previously
80%) for maximum visibility
## Key Changes
### Overlapping Event Layout Algorithm
Replaces the previous uniform-width, fixed-offset layout with an intelligent spread algorithm:
**Previous behavior:**
- All overlapping events: 80% width with 8% offset steps
- Events clustered on the left side
**New behavior:**
- **2 overlapping events**: 80% and 50% widths
- **3 overlapping events**: 55%, ~42%, and 33% widths
- **4+ overlapping events**: Progressive narrowing from 40% down to minimum 25%
- **Spread algorithm**: Events distribute across the full width with the last event aligned to the right edge
- **Right edge distribution**: `ri = Rmin + (Rmax - Rmin) × i/(n-1)` for even spacing
### Visual Improvements
- Single/non-overlapping events: **100% width** (was 80%)
- Overlapping events: **Variable widths** based on cascade position (leftmost events wider, rightmost narrower)
- Last overlapping event: **Aligned to right border** for maximum scatter
- Minimum width: **25%** maintained for readability
**Devin session:** https://app.devin.ai/sessions/168d2227f5304c49ae4d34d17da5b025
**Requested by:** eunjae@cal.com (@eunjae-lee)
## Visual Demo
https://github.com/user-attachments/assets/693546fa-448d-470a-b041-c08f4697c177
## Mandatory Tasks (DO NOT REMOVE)
- [x] I have self-reviewed the code
- [x] I have updated the developer docs in /docs if this PR makes changes that would require a documentation change. **N/A** - playground-only changes
- [x] I confirm automated tests are in place that prove my fix is effective or that my feature works.
## How should this be tested?
1. Navigate to `/settings/admin/playground/weekly-calendar`
2. Verify each scenario:
- **Non-Overlapping Events**: Both events should be 100% width, no offset
- **Touching Events**: Both events should be 100% width, no offset
- **Two Overlapping Events**: First event 80% width, second 50% width aligned to right
- **Three Overlapping Events**: Progressive narrowing with spread across full width
- **Four Overlapping Events**: Four events spread across full width
3. Verify startHour values:
- Most scenarios should start at 9am (events start at 10am)
- Dense day scenario should start at 8am (events start at 9am)
- Mixed statuses scenario should start at 1pm (events start at 2pm)
4. Test with real calendar data to ensure overlapping events look visually distinct
**Environment variables:** Standard Cal.com development setup
**Test data:** Use playground scenarios or create overlapping events in your calendar
## Human Review Checklist
**⚠️ CRITICAL ITEMS:**
1. **Visual verification in playground** (MOST IMPORTANT):
- Open `/settings/admin/playground/weekly-calendar`
- Verify non-overlapping events are 100% width (not 80%)
- Verify overlapping events spread properly across full width
- Verify last overlapping event aligns to right edge
- Verify each scenario starts at appropriate hour
2. **Algorithm correctness**:
- Single events: 100% width (was 80%)
- Two overlapping: 80%, 50% widths with last aligned to right
- Three overlapping: 55%, ~42%, 33% widths spread across full width
- Right-edge distribution: `ri = Rmin + (Rmax - Rmin) * i/(n-1)`
3. **Edge cases**:
- Test with 10+ overlapping events to ensure no overflow
- Verify minimum width (25%) is respected
- Verify backward compatibility: custom `baseWidthPercent`/`offsetStepPercent` should use legacy behavior
4. **Type safety**:
- `startHour` parameter now properly typed as `Hours` (union of 0-23)
- All scenarios use valid `Hours` values
**Known limitations:**
- Local visual testing was not completed due to environment issues
- Easing curve parameters (curveExponent: 1.3) were chosen based on examples but may need visual tuning
- No E2E tests for visual appearance (only unit tests for layout calculations)
## Checklist
- [x] I have read the [contributing guide](https://github.com/calcom/cal.com/blob/main/CONTRIBUTING.md)
- [x] My code follows the style guidelines of this project
- [x] I have commented my code, particularly in hard-to-understand areas
- [x] I have checked if my changes generate no new warnings
