* 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>
## 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
2025-11-24 12:01:05 +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>
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
* 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>
* storybook v2 init
* Merge config into storybook vite build
* Remove path
* Storybook config tweaks
* Added styles and settings for storybook v2, and started working on button documentation and examples.
* Badges + flex wrap on mobile
* Breadcrumbs+button+avatar
* Checkbox
* Input + moving files around
* WIP table
* WIP table grid
* Replaced imports for new components.
* Added first steps for varianttable.
* Small alignment fix.
* Custom Args Table - With scrollbar
* Adding table to components that need it + darkmode
* Add intro
* Fix types
* Remove V1 storybook and replace with V2
* Fix badge type error
* Fixed storybook dependencies
* Added cover image to storybook
* Remove vita from ts config, we dont use vite.
* Fixed button import.
* Explained postcss pseudo plugin.
* Fixed badge import.
* Add Avatar Stories
* ButtonGroup Stories
* Fixed imports
* Add checkbox stories
* Inital state plannning
* Inital state combined with passed in props
* Start of UI work
* Able to change dates?
* Add dynamic hour props
* Get grid system setup correctly
* Show events on grid
* Weird sizing issue but events placed correctly gridstart
* CAL styled calendar event component
* availability WIP ish
* Blocking days! + Block days < today
* Kinda working time line
* Rename grid stop + formatting
* Handle sorting events if required.
* Add util for getting startDate bassed on weekday
* Remove event stories for now
* Implement gridstops per hour to be dyamic
* New CSS Grid + offsetbased positoning
* Fix weird Z-Index issues on hover
* Implement blocklist again with new format
* Side by side events working - styling needs work
* New design of overlap
* Overlapping? Working :O
* Cleanup
* WIP hover state
* Werid border issue
* fix translate issue
* Kinda working with overflow
* Fix overflow
* Progressive date blocking
* Cleanup
* Fix double render of blocked list
* WIP mobile implementaiton
* Trying to fix CSS
* Extract CSS to styles.css to allow media queries
* Improve documentation - allow args to be changed in storybook
* Fix hover showing even if disabled
* WIP cols auto approach
* Merge blocking dates
* Fix zindex
* Fix hover position
* Fix Z-Index issues on hover and blocking events
* Re add onclick handler
* Fix overlapping blocking dates
* Fix scaling for datevalues columns
* Date values closer to DS
* Blocked List Tidy up
* Storybook + file tidy up
* Little tidy up
* Fix offsets
* Remove event hover
* Fix random bg-red-500
* Fix import
* FIx blocking cells appearing above start Date
* Fix truncation
* Fix border overlap
* Overlap a little nicer
* Condtional 80% sizing
* Nitpicks
* Fix today height and top breaking
* Add text left to time stamp
* Support string dates
* Add shalow to reduce re-renders
* Rename to Calendar instead of scheduler
* Fix 3 overlapping events
* Fix merge type error
* Fix destructuring
* NITS
* Move to features package
Co-authored-by: Jeroen Reumkens <hello@jeroenreumkens.nl>
Co-authored-by: zomars <zomars@me.com>
Co-authored-by: Peer Richelsen <peeroke@gmail.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
