fix: #15833 [CAL-4055] Same first slot in different timezones #15840

vijayraghav-io · 2024-07-19T20:11:41Z

What does this PR do?

Fixes [CAL-4055] Not able to book a time on a date that is earlier than today(but actually is today in the browsing timezone) #15833
Fixes CAL-4055(Linear issue number - should be visible at the bottom of the GitHub issue description)

After Changes -
https://www.loom.com/share/d3e067e558184cd2aa7e62ca2e48c770?sid=76ab6332-5e38-4421-8247-e76991fa4751

Root cause -
The minDate, used to set the start date in getAvailableDatesInMonth was using browserDate, updated this to calculate today's date in selected timezone.

cal.com/packages/features/calendars/lib/getAvailableDatesInMonth.ts

Line 10 in a74522a

minDate = new Date(),

Mandatory Tasks (DO NOT REMOVE)

I have self-reviewed the code (A decent size PR without self-review might be rejected).
N/A-I have added a Docs issue here if this PR makes changes that would require a documentation change. 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.

vercel · 2024-07-19T20:11:47Z

@vijayraghav-io is attempting to deploy a commit to the cal Team on Vercel.

A member of the Team first needs to authorize it.

graphite-app · 2024-07-19T20:15:11Z

Graphite Automations

"Add community label" took an action on this PR • (07/19/24)

1 label was added to this PR based on Keith Williams's automation.

"Add consumer team as reviewer" took an action on this PR • (07/19/24)

1 reviewer was added to this PR based on Keith Williams's automation.

anikdhabal · 2024-07-20T04:58:36Z

packages/features/calendars/DatePicker.tsx

  const includedDates = getAvailableDatesInMonth({
    browsingDate: browsingDate.toDate(),
-    minDate,
+    minDate: getTodaysDateInTimeZone(timezone),


Hey, instead of setting the minimum date here, can we modify or pass it from the Datepicker? This way, we eliminate the need for an extra prop like timezone and also minDate prop used.

As explained below anyway we will have to pass one of the prop, if its minDate, we will have to pass from DatePickerComponent which is in packages/features/bookings/Booker/Components/DatePicker.tsx.

FYR, there are two different DatePicker.tsx files.
So this should be ok.

anikdhabal · 2024-07-20T05:00:07Z

packages/features/calendars/DatePicker.tsx

@@ -414,6 +423,7 @@ const DatePicker = ({
          slots={!isBookingInPast ? slots : {}}
          includedDates={!isBookingInPast ? includedDates : []}
          isBookingInPast={isBookingInPast}
+          timezone={timezone}


Instead of passing the timezone, can we set or modify the minDate from here?

Explained, refer other comments.

anikdhabal · 2024-07-20T05:02:57Z

packages/features/bookings/Booker/components/DatePicker.tsx

@@ -38,6 +39,7 @@ export const DatePicker = ({
    shallow
  );
  const nonEmptyScheduleDays = useNonEmptyScheduleDays(schedule?.data?.slots);
+  const { timezone } = useTimePreferences();


Hey @vijayraghav-io, can we do the same directly inside the DatePickerComponent instead of passing it from here?

Yes, i started with having useTimePreferences() inside <Days component, everything works fine w.r.t this fix and functionality.

But when i ran the complete tests, the test "date-override-list.test.tsx" fails without even showing proper error message.
I found it in really hard way spending so much time, then finally found that - useTimePreferences() inside Days() component or even inside getTodaysDateInTimeZone.ts was causing this test to fail.

components/DatePicker.tsx is the nearest parent component which was not throwing this test fail.

anikdhabal · 2024-07-20T05:10:01Z

packages/features/calendars/lib/getTodaysDateInTimeZone.ts

+  // 'todayDateInPreferredTZ' is dayjs date, we need to convert this into type 'Date',
+  // as input required for getAvailableDatesInMonth() is 'Date' type.
+  const offsetMinutes = dayjs().utcOffset();
+  const jsDate = new Date(`${todayDateInPreferredTZ.format("YYYY-MM-DDTHH:mm:ss")}Z`); // UTC format


Instead of jsDate can we set localDate or currentDate ?

i am intending to be Date of type Date (JS/TS native object), as we can also get date from Dayjs().toDate() but this will again give date in local timezone

anikdhabal · 2024-07-20T06:10:11Z

packages/features/calendars/lib/getTodaysDateInTimeZone.ts

+// Example :
+// Consider browser current date-time is - "Sat Jul 20 2024 01:00:00 AM (Asia/Kolkata GMT +5:30)".
+// And, if preferred timezone is "Pacific/Pago GMT -11:00", we need to get today's date as "Fri Jul 19".
+export function getTodaysDateInTimeZone(selectedTimeZone: string | undefined): Date {


selectedTimeZone must not be undefined

This should not be an issue, because always there will be a timezone selection in booking page and also there is a default value provided here

cal.com/packages/features/bookings/lib/timePreferences.ts

Line 27 in 5becc95

timezone: localStorage.getItem(timezoneLocalStorageKey) || dayjs.tz.guess() || "Europe/London",

| undefined was added for typechecks ,because DatePicker prop should have timezone as optional , to be compatible with dependent components

anikdhabal

Can we add a unit test for this?

anikdhabal

@vijayraghav-io great works. Left some comment. Let me know what you think?

vijayraghav-io · 2024-07-20T09:30:27Z

Can we add a unit test for this?

Yes i am adding

vijayraghav-io · 2024-07-20T09:31:09Z

@vijayraghav-io great works. Left some comment. Let me know what you think?

Thankyou! replied inline

vijayraghav-io · 2024-07-20T17:54:55Z

Scenario of first day in month:

https://www.loom.com/share/f917aa77fc4f442aadb7d31b94be7435?sid=0a61481c-d67b-4154-b68f-66ee6a19c490

vijayraghav-io · 2024-07-30T03:38:23Z

@emrysal , can you please share your comments/reviews

…833_cal4055

vijayraghav-io · 2024-08-09T06:11:58Z

reminding to please review or approve if reviewed

Co-authored-by: Carina Wollendorfer <[email protected]>

…833_cal4055

vijayraghav-io · 2024-10-03T07:38:13Z

Could we also fix this dot that is shown on the current day?
Everything else looks good to me 🙏

Thankyou! 🙏 , Sure have fixed the dot to show as per selected timezone's 'today' and verified.

github-actions · 2024-10-18T00:21:18Z

This PR is being marked as stale due to inactivity.

vijayraghav-io · 2024-10-21T10:57:34Z

Gentle Reminder!

github-actions · 2024-10-24T16:21:08Z

E2E results are ready!

Workflow #45375.1 latest results

anikdhabal · 2024-10-29T13:10:22Z

packages/features/calendars/lib/getTodaysDateInTimeZone.ts

+  // 'todayDateInPreferredTZ' is dayjs date, we need to convert this into type 'Date',
+  // as input required for getAvailableDatesInMonth() is 'Date' type.


Could you pls remove this extra comment

reduced the overall comments

anikdhabal · 2024-10-29T13:11:29Z

packages/features/calendars/lib/getTodaysDateInTimeZone.ts

+// with new Date(), we get browser's current date.
+// The below function gets today's date w.r.t to selected timezone.
+// Example :
+// Consider browser current date-time is - "Sat Jul 20 2024 01:00:00 AM (Asia/Kolkata GMT +5:30)".
+// And, if preferred timezone is "Pacific/Pago GMT -11:00", we need to get today's date as "Fri Jul 19".


reduced to 1-2 lines, as i feel it's important and also for someone who is sees/reviews this code for first time.
The question may come for anybody seeing this for first time, why not use already existing function to get current date in timezone.
That's why had added detailed explanation, now reduced to just 2 lines.

anikdhabal · 2024-10-29T13:13:22Z

packages/features/calendars/DatePicker.tsx

+  // We need to set minDate to today's (or current) date w.r.t selected timezone.
+  // If we just do new Date(), we get browser's current date.
+  // getTodaysDateInTimeZone() function gets today's date w.r.t to selected timezone.
+  // Returned Date will be of type Date (native TS/JS Date type).
+  // As getAvailableDatesInMonth() function requires minDate in TS/JS Date type.


No need to explain everything in detail in a comment; just add important points if necessary. Instead try to self-review the code with explanations.

removed this and added as self review comment

vijayraghav-io · 2024-10-30T05:31:16Z

packages/features/calendars/DatePicker.tsx

@@ -309,6 +321,8 @@ const DatePicker = ({
    };
    scrollToTimeSlots?: () => void;
  }) => {
+  const minDate = getTodaysDateInTimeZone(selectedTimeZone);


We need to set minDate to today's (or current) date w.r.t selected timezone.
If we just do new Date(), we get browser's current date.
getTodaysDateInTimeZone() function gets today's date w.r.t to selected timezone.
Returned Date will be of type Date (native TS/JS Date type).
As getAvailableDatesInMonth() function requires minDate in TS/JS Date type.

vijayraghav-io · 2024-11-01T14:59:39Z

@anikdhabal , have addressed your latest comments.

…833_cal4055

…dateBookingRefs_credCreate

…833_cal4055

vijayraghav-io added 2 commits July 20, 2024 00:33

update to set mindate per timezone

6aac5da

extracted to sep func

e9bd4c9

graphite-app bot requested a review from a team July 19, 2024 20:11

graphite-app bot added the community Created by Linear-GitHub Sync label Jul 19, 2024

github-actions bot added bookings area: bookings, availability, timezones, double booking 🐛 bug Something isn't working labels Jul 19, 2024

dosubot bot added the ui area: UI, frontend, button, form, input label Jul 19, 2024

vijayraghav-io changed the title ~~fix: #15833 [CAL-4055] Not able to book a time on a date that is earlier than today~~ fix: #15833 [CAL-4055] Same first slot in different timezones Jul 19, 2024

anikdhabal reviewed Jul 20, 2024

View reviewed changes

anikdhabal requested changes Jul 20, 2024

View reviewed changes

anikdhabal requested a review from hariombalhara July 20, 2024 06:14

hariombalhara requested a review from emrysal July 20, 2024 06:51

Souptik2001 mentioned this pull request Jul 20, 2024

fix: [CAL-4055] Fix booker timezone switching previous date issue #15843

Closed

3 tasks

vijayraghav-io added 2 commits July 20, 2024 15:33

added unit tests

86a44a4

updated testcases

9987946

vijayraghav-io mentioned this pull request Jul 20, 2024

[CAL-4055] Not able to book a time on a date that is earlier than today(but actually is today in the browsing timezone) #15833

Open

PeerRich added this to the Community Only milestone Jul 31, 2024

keithwillcode requested a review from a team July 31, 2024 15:09

Merge branch 'main' of https://github.com/calcom/cal.com into fix_#15…

036a20d

…833_cal4055

github-actions bot added the High priority Created by Linear-GitHub Sync label Aug 9, 2024

vijayraghav-io and others added 3 commits October 3, 2024 07:34

Update packages/features/calendars/DatePicker.tsx

282cceb

Co-authored-by: Carina Wollendorfer <[email protected]>

Merge branch 'main' of https://github.com/calcom/cal.com into fix_#15…

a3fed9b

…833_cal4055

update to show dot (for today) as per timezone selected

b20696f

CarinaWolli requested a review from anikdhabal October 3, 2024 13:42

github-actions bot added the Stale label Oct 18, 2024

github-actions bot removed the Stale label Oct 23, 2024

anikdhabal added the ready-for-e2e label Oct 24, 2024

anikdhabal reviewed Oct 29, 2024

View reviewed changes

reduced comments

1a516a3

vijayraghav-io commented Oct 30, 2024

View reviewed changes

Merge branch 'main' of https://github.com/calcom/cal.com into fix_#15…

103a8d7

…833_cal4055

keithwillcode assigned emrysal Nov 6, 2024

keithwillcode added Medium priority Created by Linear-GitHub Sync and removed High priority Created by Linear-GitHub Sync labels Nov 13, 2024

keithwillcode modified the milestones: Community Only, v4.7, v4.8 Nov 13, 2024

dosubot bot removed this from the v4.8 milestone Nov 29, 2024

Merge branch 'main' of https://github.com/calcom/cal.com into feat_up…

b1e1eee

…dateBookingRefs_credCreate

github-actions bot added the High priority Created by Linear-GitHub Sync label Jan 26, 2025

vijayraghav-io added 2 commits January 27, 2025 14:22

Merge branch 'main' of https://github.com/calcom/cal.com into fix_#15…

5a566c5

…833_cal4055

Merge branch 'main' of https://github.com/calcom/cal.com into fix_#15…

1609ed0

…833_cal4055

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: #15833 [CAL-4055] Same first slot in different timezones #15840

fix: #15833 [CAL-4055] Same first slot in different timezones #15840

vijayraghav-io commented Jul 19, 2024 •

edited by anikdhabal

Loading

vercel bot commented Jul 19, 2024

graphite-app bot commented Jul 19, 2024

anikdhabal Jul 20, 2024

vijayraghav-io Jul 20, 2024

anikdhabal Jul 20, 2024

vijayraghav-io Jul 20, 2024

anikdhabal Jul 20, 2024

vijayraghav-io Jul 20, 2024 •

edited

Loading

anikdhabal Jul 20, 2024 •

edited

Loading

vijayraghav-io Jul 20, 2024

anikdhabal Jul 20, 2024 •

edited

Loading

vijayraghav-io Jul 20, 2024 •

edited

Loading

anikdhabal left a comment

anikdhabal left a comment

vijayraghav-io commented Jul 20, 2024

vijayraghav-io commented Jul 20, 2024

vijayraghav-io commented Jul 20, 2024

vijayraghav-io commented Jul 30, 2024

vijayraghav-io commented Aug 9, 2024 •

edited

Loading

vijayraghav-io commented Oct 3, 2024 •

edited

Loading

github-actions bot commented Oct 18, 2024

vijayraghav-io commented Oct 21, 2024

github-actions bot commented Oct 24, 2024 •

edited

Loading

anikdhabal Oct 29, 2024

vijayraghav-io Oct 30, 2024

anikdhabal Oct 29, 2024

vijayraghav-io Oct 30, 2024

anikdhabal Oct 29, 2024

vijayraghav-io Oct 30, 2024

vijayraghav-io Oct 30, 2024

vijayraghav-io commented Nov 1, 2024

		// 'todayDateInPreferredTZ' is dayjs date, we need to convert this into type 'Date',
		// as input required for getAvailableDatesInMonth() is 'Date' type.

fix: #15833 [CAL-4055] Same first slot in different timezones #15840

Are you sure you want to change the base?

fix: #15833 [CAL-4055] Same first slot in different timezones #15840

Conversation

vijayraghav-io commented Jul 19, 2024 • edited by anikdhabal Loading

What does this PR do?

Mandatory Tasks (DO NOT REMOVE)

vercel bot commented Jul 19, 2024

graphite-app bot commented Jul 19, 2024

Graphite Automations

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

vijayraghav-io Jul 20, 2024 • edited Loading

Choose a reason for hiding this comment

anikdhabal Jul 20, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

anikdhabal Jul 20, 2024 • edited Loading

Choose a reason for hiding this comment

vijayraghav-io Jul 20, 2024 • edited Loading

Choose a reason for hiding this comment

anikdhabal left a comment

Choose a reason for hiding this comment

anikdhabal left a comment

Choose a reason for hiding this comment

vijayraghav-io commented Jul 20, 2024

vijayraghav-io commented Jul 20, 2024

vijayraghav-io commented Jul 20, 2024

vijayraghav-io commented Jul 30, 2024

vijayraghav-io commented Aug 9, 2024 • edited Loading

vijayraghav-io commented Oct 3, 2024 • edited Loading

github-actions bot commented Oct 18, 2024

vijayraghav-io commented Oct 21, 2024

github-actions bot commented Oct 24, 2024 • edited Loading

E2E results are ready!

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

vijayraghav-io commented Nov 1, 2024

vijayraghav-io commented Jul 19, 2024 •

edited by anikdhabal

Loading

vijayraghav-io Jul 20, 2024 •

edited

Loading

anikdhabal Jul 20, 2024 •

edited

Loading

anikdhabal Jul 20, 2024 •

edited

Loading

vijayraghav-io Jul 20, 2024 •

edited

Loading

vijayraghav-io commented Aug 9, 2024 •

edited

Loading

vijayraghav-io commented Oct 3, 2024 •

edited

Loading

github-actions bot commented Oct 24, 2024 •

edited

Loading