cal.com
cal.com copied to clipboard
feat: add time shift badge for recurring events with shifted local times
What does this PR do?
- Fixes #25237
- Fixes CAL-6776
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):
https://github.com/user-attachments/assets/d884d71e-2de3-48e9-88e4-558682b7fcdd
- Add time-shift detection helper
- IIntroduce getTimeShiftFlags in packages/lib/timeShift.ts to identify recurring occurrences whose local start time (HH:mm) differs from the first occurrence in the target timezone.
- Handles DST transitions, timezone changes, and other scenarios where the same UTC time maps to a different local time.
- Add unit tests in packages/lib/tests/timeShift.test.ts covering DST transitions and non-shifting scenarios.
- Display time shift on booking page
- Extend EventOccurences in packages/features/bookings/components/event-meta/Occurences.tsx to use getTimeShiftFlags alongside parseRecurringDates.getTimeShiftFlags alongside parseRecurringDates.
- Display an orange Time shift badge next to occurrences whose local start time differs from the first occurrence.
- Display time shift on booking success page
- Update RecurringBookings in apps/web/modules/bookings/views/bookings-single-view.tsx to compute shift flags for recurring dates using getTimeShiftFlags.
- Show the same orange Time shift badge beside shifted instances in both the main list and the expanded "+ more" section.
- Localization
- Add time_shift translation key to apps/web/public/static/locales/en/common.json for the badge label.
- Behaviour
- For recurring events, only occurrences with a different local start time (compared to the first occurrence) are highlighted with the badge, helping users identify when meeting times shift due to DST or timezone changes.
Mandatory Tasks (DO NOT REMOVE)
- [x] 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. If N/A, write N/A here and check the checkbox.
- [x] I confirm automated tests are in place that prove my fix is effective or that my feature works.
How should this be tested?
- Are there environment variables that should be set?
- What are the minimal test data to have?
- What is expected (happy path) to have (input and output)?
- Any other important info that could help to test that PR
Checklist
- I haven't read the contributing guide
- 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
@KartikLabhshetwar is attempting to deploy a commit to the cal Team on Vercel.
A member of the Team first needs to authorize it.
Hello, I discussed the UI with a team member and it currently feels a bit cluttered. Could we:
- Add the badge only to the first date that has the timeshift, and
- Slightly reduce the badge size so it aligns neatly on the same line as the time (considering responsive behavior for small screens as well)?
hi @dhairyashiil
i have made the changes asked,
here is the demo:
https://github.com/user-attachments/assets/8696e21f-3ab1-4256-8467-32f455a91671