* feat: make source required on EventBusyDetails for Troubleshooter display
- Make source a required property on EventBusyDetails type
- Update LimitManager to accept and store source when adding busy times
- Add user-friendly source names for all busy time types:
- 'Booking Limit' for booking limit busy times
- 'Duration Limit' for duration limit busy times
- 'Team Booking Limit' for team booking limit busy times
- 'Buffer Time' for seated event buffer times
- 'Calendar' for external calendar busy times
- Ensure all entries in detailedBusyTimes have source set
- Cover includeManagedEventsInLimits and teamBookingLimits branches
Co-Authored-By: hariom@cal.com <hariombalhara@gmail.com>
* feat: add limit value and unit metadata to busy time sources
- Include limit value and unit in source strings for Troubleshooter display
- Booking Limit: shows as 'Booking Limit: 5 per day'
- Duration Limit: shows as 'Duration Limit: 120 min per week'
- Team Booking Limit: shows as 'Team Booking Limit: 10 per month'
- Preserves existing calendar sources (e.g., 'google-calendar')
Co-Authored-By: hariom@cal.com <hariombalhara@gmail.com>
* feat: enhance busy time management with new limit sources
- Introduced new limit sources for busy times, including event booking and duration limits, with user-friendly titles for display.
- Updated LimitManager to accept and store detailed busy time information, including title and source.
- Refactored busy time addition logic across various services to utilize the new structure, improving clarity and maintainability.
* fixes
* feat: conditionally include source and translate busy time titles
- Add withSource parameter to conditionally include/exclude source from response
- Translate busy time titles on frontend using useLocale hook
- Source is only included when withSource=true (for Troubleshooter display)
Co-Authored-By: hariom@cal.com <hariombalhara@gmail.com>
* feat: enhance user availability service and busy time handling
- Updated LargeCalendar component to include event ID check for enabling busy times.
- Added translation for "busy" in common.json for better user experience.
- Refactored getUserAvailability service to include new method for fetching user availability with busy times from limits.
- Introduced parseLimits function to streamline booking and duration limit parsing.
- Improved error handling in user handler for better user feedback.
* refactor: remove unnecessary timeZone: undefined from addBusyTime calls
Co-Authored-By: hariom@cal.com <hariombalhara@gmail.com>
* feat: add buffer_time and calendar translation keys for busy times
Co-Authored-By: hariom@cal.com <hariombalhara@gmail.com>
* feat: add event source to calendar components and improve busy time handling
- Updated EventList component to include event source in data attributes for better tracking.
- Enhanced LargeCalendar component to pass event
* fix: add missing source property to Date Override calendar event
Co-Authored-By: hariom@cal.com <hariombalhara@gmail.com>
* fix: use 'date-override' as source for Date Override calendar events
Co-Authored-By: hariom@cal.com <hariombalhara@gmail.com>
* Avoid type assertion
* fix: pass both bookingLimits and durationLimits to getStartEndDateforLimitCheck (#27898)
* test: add unit tests for getUserAvailabilityIncludingBusyTimesFromLimits
Co-Authored-By: hariom@cal.com <hariombalhara@gmail.com>
* fix: pass both bookingLimits and durationLimits to getStartEndDateforLimitCheck
- Fix bug where bookingLimits || durationLimits was passed as single param
- Skip getBusyTimesForLimitChecks when eventType has no limits
- Remove as never casts, use proper typing for mock dependencies
- Replace expect.any(String) with exact ISO date assertions
Co-Authored-By: hariom@cal.com <hariombalhara@gmail.com>
* refactor: replace loose assertions with exact values in tests
Co-Authored-By: hariom@cal.com <hariombalhara@gmail.com>
---------
Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
* fix: address review feedback on busy time sources
- Fix t("busy") fallback to t("busy_time.busy") for correct translation lookup
- Add missing title property to buffer time entries for Troubleshooter display
- Use descriptive debug strings for buffer time source field
- Fix import ordering in LargeCalendar.tsx
Co-authored-by: Hariom Balhara <hariombalhara@gmail.com>
Co-Authored-By: unknown <>
* fix: preserve pre-existing busyTimesFromLimitsBookings from initialData
Address review feedback from @hariombalhara (comment #30, #31):
- Initialize busyTimesFromLimitsBookings from initialData instead of []
to avoid silently overwriting pre-existing data with an empty array
- Use conditional spread to only include busyTimesFromLimitsBookings
when it has a value
- Add test verifying pre-existing busyTimesFromLimitsBookings is
preserved and passed through to _getUserAvailability
- Add test verifying busyTimesFromLimitsBookings is not passed when
there are no limits and no initialData bookings
Co-authored-by: Hariom Balhara <hariombalhara@gmail.com>
Co-Authored-By: bot_apk <apk@cognition.ai>
* fix: pass fetched eventType to _getUserAvailability to avoid duplicate DB query
Addresses Devin Review comment r2863593564: the wrapper method fetches
eventType but wasn't passing it through, causing _getUserAvailability to
re-fetch the same eventType from the database.
Also adds a test verifying eventType is forwarded correctly.
Co-Authored-By: bot_apk <apk@cognition.ai>
---------
Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Co-authored-by: Udit Takkar <53316345+Udit-takkar@users.noreply.github.com>
Co-authored-by: bot_apk <apk@cognition.ai>
* feat: add keyboard shortcuts and tooltips to booking slideover buttons
Co-Authored-By: peer@cal.com <peer@cal.com>
* fix: remove duplicate useBookingLocation import and fix import ordering
- Removed duplicate import of useBookingLocation from non-existent
@calcom/web/modules/bookings/hooks/useBookingLocation path
- Fixed import ordering to satisfy biome organizeImports rules
- Removed unnecessary code comment
- Original feature by @PeerRich via Devin AI
Co-Authored-By: unknown <>
* use same style arrows for both button and remove bydefault focus from them
* fix join button tooltip hover
* fix: disable keyboard shortcuts when overlays/dialogs are open on BookingDetailsSheet
Co-Authored-By: unknown <>
* fix: use focus-based detection instead of selector-based overlay detection for keyboard shortcuts
Co-Authored-By: unknown <>
* fix: allow keyboard shortcuts when focus is on sheet ancestors
Co-Authored-By: unknown <>
* fix: use capture phase for keyboard handler to prevent Enter from activating focused buttons
Co-Authored-By: unknown <>
* fix: allow shortcuts when focus is on page elements outside any Radix portal
Co-Authored-By: unknown <>
* fix: handle calendar event clicks in onInteractOutside to prevent sheet close/reopen
Co-Authored-By: unknown <>
* fix: stop arrow key propagation to prevent Radix dropdown from opening during booking navigation
Co-Authored-By: eunjae@cal.com <hey@eunjae.dev>
* fix: always stop arrow key propagation when sheet is active, even at first/last booking
Co-Authored-By: eunjae@cal.com <hey@eunjae.dev>
* refactor: extract keyboard handler into testable utility with tests
Co-Authored-By: eunjae@cal.com <hey@eunjae.dev>
* fix: resolve type errors in keyboard handler config and test mocks
Co-Authored-By: eunjae@cal.com <hey@eunjae.dev>
* test: add e2e tests for booking sheet keyboard shortcuts
Co-Authored-By: eunjae@cal.com <hey@eunjae.dev>
* fix: replace text= locators with data-testid selectors in e2e tests
Co-Authored-By: eunjae@cal.com <hey@eunjae.dev>
* made 3 fixes: Fix 1 — Stabilize handleNext/handlePrevious/handleClose with useCallback
In BookingDetailsSheet.tsx, all three handler functions were plain arrow functions recreated on every render, causing the useEffect to tear down and re-attach the document keydown listener unnecessarily. Wrapped all three in useCallback with proper dependency arrays (the Zustand store functions they call).
Fix 2 — data-booking-list-item verified (no change needed)
Confirmed that data-booking-list-item is rendered on BookingListItem.tsx and data-booking-calendar-event is rendered on Event.tsx. The onInteractOutside handler in the final merged state correctly checks both selectors. No code change required.
Fix 3 — Removed dead code from JoinMeetingButton
Reverted JoinMeetingButton back to a plain function component:
Removed forwardRef wrapping (no caller passes a ref)
Removed showTooltip prop (unused — tooltip is handled by the parent BookingDetailsSheet)
Removed ref prop from the inner Button
Removed unused Tod forwardRef imports
---------
Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Co-authored-by: Dhairyashil <dhairyashil10101010@gmail.com>
Co-authored-by: eunjae@cal.com <hey@eunjae.dev>
Co-authored-by: Dhairyashil Shinde <93669429+dhairyashiil@users.noreply.github.com>
2026-02-19 22:32:43 +05:30
Rajiv SahalGitHubrajiv@cal.com <sahalrajiv6900@gmail.com>Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
* fix: decouple large calendar from features
* fix: move calendar to features since this is the better approach
* chore: move OOO slots to features
* feat: add DefaultOutOfOfficeSlot fallback for calendar OOO rendering
Co-Authored-By: rajiv@cal.com <sahalrajiv6900@gmail.com>
* chore: cleanup unused LargeCalendar component
---------
Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
2026-02-17 08:14:33 +00:00
Benny JooGitHubbenny@cal.com <sldisek783@gmail.com>benny@cal.com <sldisek783@gmail.com>Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
* display UTM parameters
* persist view (list | calendar) in localStorage
* move to next page on clicking "next" of last item in the page
improve navigation
^ Conflicts:
^ apps/web/modules/bookings/components/BookingCalendarContainer.tsx
* fix navigation on calendar view
* Delete apps/web/modules/bookings/NAVIGATION_IMPLEMENTATION.md
* avoid page size being 0
* check feature flag on user level
* use map to improve useBookingListData
* address feedback
* feat(bookings): add smart navigation for calendar view
- Add sort option to tRPC bookings.get schema and handler
- Create NAVIGATION_PROBE_WINDOW_MONTHS constant (3 months)
- Create useNearestFutureBooking hook to find nearest future booking
- Create useNearestPastBooking hook to find nearest past booking
- Update useCalendarNavigationCapabilities to use probe results
- Update BookingCalendarContainer to wire up probe hooks
This enables the booking details sheet to:
- Disable next/prev buttons when no bookings exist in that direction
- Jump directly to the week containing the nearest booking
Co-Authored-By: eunjae@cal.com <hey@eunjae.dev>
* fix type error
* feat: add booking selection state when using slideover (#25637)
* implement booking selection when using slideover
* remove pixel shift
* fix
* auto scroll to selected event on calendar
* make DateValues header sticky when scrolling
---------
Co-authored-by: Eunjae Lee <hey@eunjae.dev>
* prefetch previous / next weeks on calendar view
* clean up classes
* handle "fetched & but no data" situation more correctly in useCalendarAutoSelector
---------
Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Co-authored-by: sean-brydon <55134778+sean-brydon@users.noreply.github.com>
- Update weekly view to display OOO when showNotePublicly is true
- Update column view to include days with public notes in schedule
- Add notes and showNotePublicly props to weekly view calendar
- Disable show note publicly checkbox when notes field is empty
* use booking.uid instead of booking.id for url param
* show timezone on calendar
* fix type
* restore horizontal tab and remove header and subtitle
* clean up sidebar items
* fix event propagation from attendees
* fetch all statuses except for cancelled on calendar view
* clean up styles of the badges on BookingListItem
* fix useMediaQuery
* add close button to the header
* add assignment reason to the details sheet
* use separator row
* use ToggleGroup for the top bookings tab
* move ViewToggleButton
* resize the action button
* remove wrong prop
* fix type error
* fix type error
* hide view toggle button on mobile (and fix the breakpoint)
* remove unused e2e tests
* fix e2e tests
* hide toggle button when feature flag is off
* update skeleton
* improve attendees on booking list item and slide over
* improve attendee dropdown
* fix type error
* move query to containers
* select attendee email
* infinite fetching for calendar view
* update styles
* fix compatibility
* fix: add backward compatibility for status field in getAllUserBookings
* increase calendar height
* fix type error
* support Member filter only for admin / owners
* add debug log (TEMP)
* add event border color
* show Reject / Accept buttons on BookingDetailsSheet
* move description section to the top
* update When section
* update style of Who section
* add CancelBookingDialog WIP
* fix CancelBookingDialog
* increase clickable area
* add schedule info section WIP
* fix flaky reject button
* fixing reschedule info WIP
* add fromReschedule index to Booking
* improve rescheduled information
* improve reassignment
* fix type error
* fix unit test
* respect user's weekStart value on the booking calendar view
* update debug log
* improve payment section
* clean up
* fix log message
* reposition filters on list view
* fix bookings controller api2 e2e test
* clean up file by extracting logic into custom hooks
* rename files
* merge BookingCalendar into its container
* extract logic into separate hook files
* remove redundant logic
* rearrange items on calendar view
* add WeekPicker
* extract filter button
* responsive header on list view
* horizontal scroll for ToggleGroup WIP
* fix type error
* fix cancelling recurring event
* address feedback
* fix e2e tests
* fix unit test
* fix e2e tests
* make hover style more visible for ToggleGroup
* fix margin on CancelBookingDialog
* update styles on the slide over (mostly font weight)
* update style of CancelBookingDialog
* update styles
* update margin top for the header
* refactor getBookingDetails handler
* fix gap in who section
* auto-filter the current user on the calendar view
* calculate calendar height considering top banners
* improve booking details sheet interaction without overlay
* update calendar event styles
* update reject dialog style
* put uid first in the query params
* fix class name
* memoize functions in useMediaQuery
* query attendee with id instead of email
* update margins
* replace TRPCError with ErrorWithCode
* move calculation outside loop
* remove dead code
* 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>
## 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
## What does this PR do?
- Adds a welcome modal for new Cal.com users
- Implements timezone display in the weekly calendar view
- Creates a hook for fetching onboarding calendar events
## Visual Demo (For contributors especially)
#### Image Demo:
## Mandatory Tasks
- [x] I have self-reviewed the code
- [x] I have updated the developer docs in /docs
- [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. **Welcome Modal:**
- Create a new user account
- Verify the welcome modal appears with correct content
- Test the "Continue" button closes the modal
- Check that the modal can be triggered via URL parameter `?welcomeToCalcomModal=true`
2. **Timezone Display:**
- Go to the weekly calendar view
- Verify the timezone is displayed correctly when `showTimezone` is enabled
- Test with different timezones to ensure proper formatting
3. **Onboarding Calendar Events:**
- Test the hook by connecting a calendar during onboarding
- Verify events are fetched and displayed correctly
- Check that events refresh when new calendars are connected
## Checklist
- I have read the [contributing guide](https://github.com/calcom/cal.com/blob/main/CONTRIBUTING.md)
- My code follows the style guidelines of this project
- I have commented my code, particularly in hard-to-understand areas
- I have checked if my changes generate no new warnings
2025-11-11 10:47:22 +00:00
Eunjae LeeGitHubeunjae@cal.com <hey@eunjae.dev>Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>Sean Brydon
* feat: improve overlapping events display in weekly calendar view
- Add cascading layout algorithm for overlapping events
- First event at 80% width, subsequent events offset by 8%
- Implement hover behavior to bring events to front (z-index 100)
- Extract overlap logic into reusable utility functions
- Add comprehensive unit tests for overlap detection and layout calculation
- Sort events by start time, then by duration for consistent rendering
Co-Authored-By: eunjae@cal.com <hey@eunjae.dev>
* feat: add weekly calendar playground page for testing overlapping events
- Create comprehensive playground page with 8 test scenarios
- Include two overlapping, three cascading, non-overlapping, same start time, chain overlaps, dense day, touching events, and mixed statuses
- Add focused view with scenario selector and grid view for side-by-side comparison
- Update playground index to include weekly calendar link
- Each scenario includes description, expected behavior, and collapsible event data
Co-Authored-By: eunjae@cal.com <hey@eunjae.dev>
* update base props
* remove unneccessary things
* fix: isolate Calendar store instances to prevent shared state
- Refactor useCalendarStore to use Zustand's createStore with React Context
- Each Calendar component now creates its own isolated store instance
- Maintains backward compatibility with global store fallback
- Fixes issue where multiple Calendar instances on same page shared state
This allows the playground page to render multiple Calendar instances
without state conflicts between them.
Co-Authored-By: eunjae@cal.com <hey@eunjae.dev>
* fix: prevent event overflow in dense overlap scenarios
- Dynamically compress offset step based on overlap group size
- Ensure leftOffset + width never exceeds 100% to prevent bleeding into next day
- Add width clamping as safety guard against rounding errors
- Add 3 new tests for overflow prevention with dense event scenarios
Fixes issue where 10+ overlapping events would cascade beyond day boundary
and bleed into the next day's column. The algorithm now calculates the
maximum safe step size per overlap group while maintaining visual cascade.
Co-Authored-By: eunjae@cal.com <hey@eunjae.dev>
* remove global store
* fix: comprehensive overflow prevention with safety margin and CSS fix
- Add safetyMarginPercent (0.5%) to prevent rounding and CSS box model overflow
- Implement floor3 rounding for width to guarantee left + width <= 100 - safetyMargin
- Calculate width from rounded left offset to avoid rounding mismatch
- Remove inset-x-1 class conflict that was setting both left and right positioning
- Change from marginLeft to left positioning for proper control
- Add test for 20+ overlapping events to verify no overflow
- Update existing tests to verify safety margin is respected
This fixes the slight overflow issue reported by the user where events were
still bleeding into adjacent day columns despite the initial dynamic step
compression fix. The root cause was a combination of:
1. CSS conflict: inset-x-1 class setting both left and right positioning
2. Rounding mismatch: width calculated from unrounded left offset
3. No safety margin for CSS box model effects (borders, padding)
All 21 tests now pass including new safety margin verification.
Co-Authored-By: eunjae@cal.com <hey@eunjae.dev>
* feat: update Dense Day scenario to 20+ events
- Increase from 11 to 21 overlapping events in Dense Day scenario
- Update title from '10+ Events' to '20+ Events'
- Add 10 more diverse events with staggered start times
- Better stress test for overflow prevention with safety margin
This provides a more comprehensive test case for the overflow prevention
fix and matches the user's request for 20+ events instead of 10+.
Co-Authored-By: eunjae@cal.com <hey@eunjae.dev>
* WIP
* feat: enhance event tooltip to show full event details
- Replace simple title-only tooltip with rich content tooltip
- Display event title, time range, description, and status
- Add color indicator matching the event's visual style
- Set min-width (200px) and max-width (300px) for better readability
- Use inverted theme colors for better contrast in tooltip
Co-Authored-By: eunjae@cal.com <hey@eunjae.dev>
* faster animation
* feat: position tooltip based on day of week
- Show tooltip on right side for Monday-Thursday (days 1-4)
- Show tooltip on left side for Friday-Sunday (days 5-0)
- Calculate day of week using dayjs from event start date
Co-Authored-By: eunjae@cal.com <hey@eunjae.dev>
* add margin for tooltip
* feat: add event duration layout test scenario
- Add new scenario with events of varying durations (3, 7, 15, 20, 30, 53 minutes)
- Test layout logic where eventDuration > 30 changes flex direction
- Events ≤30min show horizontal layout (title and time inline)
- Events >30min show vertical layout (title and time stacked)
Co-Authored-By: eunjae@cal.com <hey@eunjae.dev>
* update styles
* feat: add minimum height of 15px for events
- Ensure very short events (e.g., 3 minutes) are still visible
- Use CSS max() to apply minimum height while respecting duration-based height
- Prevents events from becoming too small to interact with
Co-Authored-By: eunjae@cal.com <hey@eunjae.dev>
* update playground
* do not mutate
* pre-compute some values
---------
Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Co-authored-by: Sean Brydon <sean@cal.com>
2025-11-05 15:56:24 +00:00
Eunjae LeeGitHubeunjae@cal.com <hey@eunjae.dev>Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
* feat: implement booking calendar view with weekly layout
- Create reusable WeekCalendarView component that displays bookings in a weekly calendar format
- Replace EmptyScreen in BookingsCalendar with the new calendar view
- Calendar view includes:
- Week navigation with Today, Previous, and Next buttons
- 7-day week view with time slots from 12 AM to 11 PM
- Bookings displayed as colored blocks positioned by time
- Support for event type colors and status-based colors
- Responsive design that fills the viewport
- Hover tooltips showing booking details
- Filters remain functional at the top of the view
Co-Authored-By: eunjae@cal.com <hey@eunjae.dev>
* refactor: use existing Calendar component from weeklyview
- Replace custom calendar implementation with the existing Calendar component
- Use parseEventTypeColor to properly handle event type colors
- Simplify implementation by leveraging existing calendar infrastructure
- Maintain week navigation and filtering functionality
Co-Authored-By: eunjae@cal.com <hey@eunjae.dev>
* fix imports
* fix: replace isSameOrAfter with isAfter || isSame
- isSameOrAfter method does not exist in dayjs
- Use combination of isAfter and isSame instead
Co-Authored-By: eunjae@cal.com <hey@eunjae.dev>
* remove useBookerTime dependency from weekly calendar view
* modify date range filters
* initial callback
* sort events
* clean up FilterBar
* add showBackgroundPattern
* update styles
* update style
* update styles
* fix type error
* fix error
* update styles
* update styles
* update event colors
* rename component
* persist weekStart on the url
* use FilterBar
* apply feedback
* extract BorderColor type
* use client
* clean up
* adjust styles
* color-code events
* rename borderColor to color
* restore class name
* add feature flag
* update class name
---------
Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
2025-10-31 11:13:41 +00:00
Eunjae LeeGitHubeunjae@cal.com <hey@eunjae.dev>Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
* refactor: make timezone a required prop in Calendar component
- Remove useBookerTime hook from Calendar.tsx
- Add timezone as required prop in CalendarState type
- Update all parent components to pass timezone prop:
- packages/features/bookings/Booker/components/LargeCalendar.tsx
- packages/features/calendar-view/LargeCalendar.tsx
- packages/features/troubleshooter/components/LargeCalendar.tsx
- All parent components now use useTimePreferences hook to get timezone
Co-Authored-By: eunjae@cal.com <hey@eunjae.dev>
* use right implementation
* remove a line
* use user's timezone instead of booker timezone
* get timezone from calendar store
---------
Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Found via `codespell -q 3 -S "*.svg,./apps/web/public/static/locales,./packages/app-store/stripepayment/lib/currencyOptions.ts,./packages/lib/freeEmailDomainCheck/freeEmailDomains.ts" -L afterall,atleast,datea,fo,incase,ist,nam,notin,optionel,perview,reccuring`
Closes#19219
* feat(appStore): add isOAuth config
* refactor(appStore): EventTypeAppSettngsInterface
* refactor(qr_code): split EventTypeAppCardInterface and EventTypeAppSettingsInterface
* feat(appStore): redirect to onboarding for stripe and basecam
* fix(ui/ScrollableArea): overflow indicator not working
* feat(apps): new install app flow
* fix(configureStep): get disabled props for settings
* fix: getAppInstallsBySlug now use teamIds
* chore: Alby to AppSettingsInterface
* chore: Giphy to appsettings interface
* chore: GTM migration
* chore: GT4 - migration
* chore: fathom migration
* chore: paypal
* feat: basecamp migration
* feat: metapixel migration
* feat:plausable
* feat:stripe
* fix merge issues
* fix merge issues in new app install flow steps
* wip: callback to onboarding
* fix: imports
* fix: more imports
* feat: use redirect to onboarding on install flow
* feat: New app install flow 2 (#14077)
* fix: redirect to event-type after oauth flow
* When clicking on install new app button, only redirect to the new app install flow if it is an oAuth app or an app that extends the EventType feature in it's config
* code refactor, skip event-type step
* removed extra consoles
* so that no one can change the eventTypeId in url
* theme support enabled
* only pass eventTypeId instead of whole evetType obj to OmniInstallAppButton
* fix: clicking on event-type gives error and redirects to /apps
* saved appOnboardingRedirectUrl to OAuth State
* fix: a user having no team breaks the onboarding flow
* add optional chaining to appMetadata.extendsFeature and appMetadata.isOAuth;
* encode appOnboardingRedirectUrl
* fix: dark theme ui issues
* skip configure step if no-event types
if user/team does not have event-type then skip configure step and goto apps/installed/[category]
* exclude calendars from apps- onboarding flow
* Update getAppOnboardingRedirectUrl.ts
* fix: On configure step, inputs aren't showing errors
* change route from `apps/onboarding` to `apps/installation`
* fix: flow not correctly working for teams
* should only allow team ADMIN or OWER to install an app to team
* Prevent two payment apps to be enabled
* removed loading state
* Fix type error
* undo new-app-flow from OmniInstallAppButton
* remove OAuth Step, handle step numbering
* fix: redirect url
* getAppOnboardingRedirectUrl refactor
* for debugging
* Revert "for debugging"
This reverts commit b9362c1a8f47f2280e684c213d7ec08d04a8ac4c.
* fix: added toaster
* feat: added support to select multiple events (almost)
* hide button
* Move inner form outside outer form using portal
Due to limitations with nested forms in React Hook Form, moved the inner form outside the outer form using a portal to ensure proper form handling.
* submit buttons refs madness
* removed configure step
we had to use query params to manage selected event-types, between routes which was causing 2 issues:
* each time we selected or unselected an event the whole page was reloaded including getserversideprops being called again and again
* the form was reloaded causing more issues
* removed extra unwanted code
* small fix
* fix: type error
* fix: types
* implemented suggested changes
* removed step footer
* fixed error.message
* removed commented styles
* removed step footer
* fix: Display team event types instead of user's on event types step when team selected
* fix: typo
* removed shouldLockDisableProps
* refactor setUpdatedEventTypesStatus, fix type
* removed extra code
* can't delete while saving
* added translations
* fix: loading in select account step, fix handle onSelect params type
* Fix typo
---------
Co-authored-by: Joe Au-Yeung <j.auyeung419@gmail.com>
* fix: type errors
* fix: failing tests
---------
Co-authored-by: sean-brydon <sean@cal.com>
Co-authored-by: Keith Williams <keithwillcode@gmail.com>
Co-authored-by: Joe Au-Yeung <j.auyeung419@gmail.com>
Co-authored-by: Somay Chauhan <somaychauhan98@gmail.com>
* fix: Test flakiness due to unfilled name/email
* Better toast-success checks
* Revert "test: Create E2E tests for bookings with custom/required Phone + other questions (#11502)"
This reverts commit 614741d207.
* Revert "test: Create E2E tests for bookings with custom/required Multiple Emails + other questions (teste2e-multipleEmailQuestion) (#11565)"
This reverts commit d1d50b0d91.
* Revert "test: Create E2E tests for bookings with custom/required Long Text + other questions (teste2e-longTextQuestion) (#11559)"
This reverts commit 96810b5ba1.
* Revert "test: Check the webhook event tab and your funtionalities (#12433)"
This reverts commit 9db9204088.
* Re-instate regularBookings
* Fixtures used by other tests
* Removed dead code from regularBookings.ts
---------
Co-authored-by: Udit Takkar <53316345+Udit-takkar@users.noreply.github.com>
* Get `onErrorReturnTo` URL
* If no code return to previous page
* On invalid permissions, return to previous page
* When not enough permissions given, invalidate the credential created
* Type fix
* Stripe go back to previous page on cancel
* Clean up console.logs
* Add early returns when redirecting
---------
Co-authored-by: sean-brydon <55134778+sean-brydon@users.noreply.github.com>
Co-authored-by: Udit Takkar <53316345+Udit-takkar@users.noreply.github.com>
* Inital UI + layout setup
* use booker approach of grid
* event-select - sidebar + store work
* adds get schedule by event-type-slug
* Calendar toggle
* Load schedule from event slug
* Add busy events to calendar
* useschedule
* Store more event info than just slug
* Add date override to calendar
* Changes sizes on smaller screens
* add event title as a tooltip
* Ensure header navigation works
* Stop navigator throwing errors on inital render
* Correct br
* Event duration fixes
* Add getMoreInfo if user is authed with current request.username
* Add calendar color map wip
* Add WIP comments for coloured outlines
* Revert more info changes
* Calculate date override correctly
* Add description option
* Fix inital schedule data not being populated
* Nudge overlap over to make it clearer
* Fix disabled state
* WIP on math logic
* Event list overlapping events logic
* NIT about width
* i18n + manage calendars link
* Delete old troubleshooter
* Update packages/features/calendars/weeklyview/components/event/EventList.tsx
* Remove t-slots
* Fix i18n & install calendar action
* sm:imrovments
* NITS
* Fix types
* fix: back button
* Month prop null as we control from query param
* Add head SEO
* Fix headseo import
* Fix date override tests
* Add correct start/end time for weekly calendar by looking at calendar's availability
* Always show 24h in weekly calendar, added scroll functionality, current time and events in correct timezone
* Improved current time style
* Show slots for every minute, so also odd timeslots due to offsets work
* Show correct timeformat for weekly view on left side time stamps
* Fix data attr for debug
* Position events differently so we can accomodate for offset start times.
* Removed schedule from public event api, because we don't use it anymore
* Fixed alignment of timeslots in weekview calendar.
* Added loading spinner to weekly calendar
* Force weekly view calendar hour labels to show 00 minutes, also for gmt x.5 timezones that are offset 30 mins.
* Change event duration blocks in weekly calendar when user changes duration in multi duration event
* Improved week view slot time label alignments for shorter durations
---------
Co-authored-by: Peer Richelsen <peeroke@gmail.com>
* WIP on weekly view for new booker.
* Set responsive grid height for booker weekly view.
* Fixed types
* Ensure you can't click on disabled dates in weekly calendar
* CAL-1916: Improvements for blocked out parts background blocks, made the lines connect by using a shared background.
* Margin, padding and color tweaks for new booker CAL-1911
* Made week view have more days visible by default
* Fix to prevent layout switch from breaking when clicking same layout twice.
* migrate from react-icons to lucide-react
* replace react-icon with lucide-dev: Webhook Icon
* add lucide transformer
* Fix LinkIcon import
* Update yarn.lock to include monorepo deps
* Migrated icons in ChargeCardDialog
* Port Storybook to new icons as well
* Adjust Info & Globe icons size to match react-icons size
---------
Co-authored-by: Alex van Andel <me@alexvanandel.com>
