6 Commits

Include renames

Author	SHA1	Message	Date
3 people	98b6d63164	refactor: apply biome formatting to packages/features (#27844) ... * refactor: apply biome formatting to packages/features (batch 1 - small subdirs) Format small subdirectories in packages/features: di, flags, holidays, oauth, settings, users, assignment-reason, selectedCalendar, hashedLink, host, form, form-builder, availability, data-table, pbac, schedules, troubleshooter, eventtypes, calendar-subscription, and root-level files. Also includes straggler apps/web BookEventForm.tsx. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * refactor: apply biome formatting to packages/features (batch 2 - medium subdirs) Format medium subdirectories in packages/features: auth, credentials, calendars, routing-forms, routing-trace, attributes, watchlist, calAIPhone, tasker, and webhooks. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * refactor: apply biome formatting to packages/features (batch 3 - bookings + insights) Format bookings and insights subdirectories in packages/features. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * refactor: apply biome formatting to packages/features (batch 4 - ee) Format packages/features/ee subdirectory covering billing, workflows, organizations, teams, managed-event-types, round-robin, dsync, integration-attribute-sync, and payments. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * refactor: apply biome formatting to packages/features (batch 5 - booking-audit part 1) Format booking-audit di, actions, common, dto, repository, and types subdirectories in packages/features/booking-audit. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * refactor: apply biome formatting to packages/features (batch 6 - booking-audit part 2) Format booking-audit service subdirectory in packages/features/booking-audit. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>	2026-02-11 15:47:14 +01:00
Eunjae LeeandGitHub	251d29f65b	fix: improve overlapping events with dynamic offsets and widths (#25310) ... ## 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
5 people	b01cb27c56	feat: improve overlapping events display in weekly calendar view (#24880) ... * 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
3 people	cf89598279	fix: Calendar View (#10514) ... Co-authored-by: Sean Brydon <sean@cal.com>	2023-08-09 12:19:01 +02:00
Jeroen ReumkensandGitHub	ca47a589ba	feat: weekly view for new booker. (#9389) ... * 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.	2023-06-09 09:38:18 +00:00
6 people	8fd5d6b5b5	Calendar Weekly Scheduler (#5653) ... * 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>	2022-12-14 13:36:10 +00:00