feat: add range of dates for availability over-ride by Pradumn27 · Pull Request #10462 · calcom/cal.com

Pradumn27 · 2023-07-29T15:02:48Z

What does this PR do?

This PR adds the functionality to select a range of dates when selecting the overrides for availability.

Fixes #7909
/claim #7909

Screen.Recording.2023-07-29.at.7.41.50.PM.mov

Type of change

New feature (non-breaking change which adds functionality)

How should this be tested?

Go To the availabilities tab
Click on add override
Now click on 2 separate dates and check that all the dates in between got selected
Add the override
save it and see that the override is applied to the availabilities

Mandatory Tasks

Make sure you have self-reviewed the code. A decent size PR without self-review might be rejected.

Technical Details

Have changed the DatePickers selected param to also accept an array of dates
This array is used for selecting a range of dates
Have omitted to select a range of dates when editing because it made sense that a user only changes the time range or switches to another single date when editing a single entity.

vercel · 2023-07-29T15:02:54Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
ui	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 12, 2023 7:16am

vercel · 2023-07-29T15:02:55Z

@Pradumn27 is attempting to deploy a commit to the cal Team on Vercel.

A member of the Team first needs to authorize it.

github-actions · 2023-07-29T15:02:59Z

Thank you for following the naming conventions! 🙏

Pradumn27 · 2023-07-29T15:04:48Z

apps/web/pages/availability/[schedule].tsx

          workingHours={workingHours}
          excludedDates={excludedDates}
-          onChange={(ranges) => append({ ranges })}
+          onChange={(ranges) => ranges.forEach((range) => append({ ranges: [range] }))}


We're now accepting an array of ranges for accommodating multiple date overrides

Pradumn27 · 2023-07-29T15:06:53Z

packages/features/schedules/components/DateOverrideInputDialog.tsx

+  const onDateChange = (newDate: Dayjs) => {
+    if (!value && selectedDates.length === 1 && yyyymmdd(selectedDates[0]) !== yyyymmdd(newDate)) {
+      const currentSelectedDate = selectedDates[0];
+
+      const updatedSelectedDates: Dayjs[] = [];
+
+      // Determine the start and end dates for the loop
+      const startDate = currentSelectedDate.isBefore(newDate) ? currentSelectedDate : newDate;
+      const endDate = currentSelectedDate.isBefore(newDate) ? newDate : currentSelectedDate;
+
+      // Loop from startDate to endDate and add each date to updatedSelectedDates
+      let currentDate = startDate;
+
+      while (!currentDate.isAfter(endDate, "day")) {
+        if (!excludedDates || !excludedDates.includes(yyyymmdd(currentDate))) {
+          updatedSelectedDates.push(currentDate);
+        }
+        currentDate = currentDate.add(1, "day");
+      }
+
+      setSelectedDates(updatedSelectedDates);
+
+      return;
+    }
+
+    setSelectedDates([newDate]);
+  };


In this function we're checking whether a user has selected a single date already, post that we verify whether it is an editing override on the basis of this we either select the range of dates between the selected dates or just select this single date.

Pradumn27 · 2023-07-29T15:07:18Z

packages/features/schedules/components/DateOverrideInputDialog.tsx

+        if (!datesUnavailable) {
+          selectedDates.map((date) => {
+            values.range.map((item) => {
+              datesInRanges.push({
+                start: date
+                  .hour(item.start.getUTCHours())
+                  .minute(item.start.getUTCMinutes())
+                  .utc(true)
+                  .toDate(),
+                end: date.hour(item.end.getUTCHours()).minute(item.end.getUTCMinutes()).utc(true).toDate(),
+              });
+            });
+          });
+        }


Here we're simply mapping all selected dates to all selected time ranges

github-actions · 2023-07-29T15:11:51Z

📦 Next.js Bundle Analysis for @calcom/web

This analysis was generated by the Next.js Bundle Analysis action. 🤖

This PR introduced no changes to the JavaScript bundle! 🙌

emrysal · 2023-07-31T17:39:10Z

UX wise I think it makes more sense to instead of a range allow selection of individual dates, multiple select if you will.

Pradumn27 · 2023-07-31T18:15:16Z

UX wise I think it makes more sense to instead of a range allow selection of individual dates, multiple select if you will.

Hmm that's a good point, will be more flexible for the user, will make the change, thanks for the review @emrysal

Pradumn27 · 2023-07-31T18:35:05Z

Have made the change @emrysal now we are doing multiple select instead of range select:

Screen.Recording.2023-07-31.at.11.59.04.PM.mov

emrysal

Tested, looks good! 🚀

wesleymatosdev · 2023-08-11T12:52:43Z

packages/features/schedules/components/DateOverrideInputDialog.tsx

+          selectedDates.map((date) => {
+            values.range.map((item) => {
+              datesInRanges.push({
+                start: date
+                  .hour(item.start.getUTCHours())
+                  .minute(item.start.getUTCMinutes())
+                  .utc(true)
+                  .toDate(),
+                end: date.hour(item.end.getUTCHours()).minute(item.end.getUTCMinutes()).utc(true).toDate(),
+              });
+            });
+          });


Since you're using .map, it would make more sense if you do something like

Suggested change

selectedDates.map((date) => {

values.range.map((item) => {

datesInRanges.push({

start: date

.hour(item.start.getUTCHours())

.minute(item.start.getUTCMinutes())

.utc(true)

.toDate(),

end: date.hour(item.end.getUTCHours()).minute(item.end.getUTCMinutes()).utc(true).toDate(),

});

});

});

datesInRanges.push(

...selectedDates.map((date) =>

values.range.map((item) => ({

start: date

.hour(item.start.getUTCHours())

.minute(item.start.getUTCMinutes())

.utc(true)

.toDate(),

end: date.hour(item.end.getUTCHours()).minute(item.end.getUTCMinutes()).utc(true).toDate(),

}))

)

Or maybe map directly on line 138, since we already have a map there anyways

* feat: add range of dates for availability over-ride * chore: changed range select to multiple select --------- Co-authored-by: Alex van Andel <me@alexvanandel.com>

* Init + get timezone + offset data agh * Add 12/24h mode - style correctly * User users timezone + working hours. Still some stuff to figure out * Multiple working hours * move calc to once per day * Demo with two users and differnt timezones * availabillity control tab via search params * WIP hover overlay * THIS WORKS ISH * fix: multiple duration getSchedule calls [CAL-2336] (#10709) Co-authored-by: Omar López <zomars@me.com> * New Crowdin translations by Github Action * fix: If the input type "Name" is selected, the label can't be changed from our default label "Your Name" (#10618) Co-authored-by: Carina Wollendorfer <30310907+CarinaWolli@users.noreply.github.com> * New Crowdin translations by Github Action * test: Create unit tests for react components in packages/ui/components/form/step (#10442) Co-authored-by: gitstart-calcom <gitstart@users.noreply.github.com> Co-authored-by: Keith Williams <keithwillcode@gmail.com> * feat: element call app added (#10585) Co-authored-by: Hariom Balhara <hariombalhara@gmail.com> * New Crowdin translations by Github Action * New Crowdin translations by Github Action * fix: e2e test for rescheduling overlapping time (#10721) Co-authored-by: CarinaWolli <wollencarina@gmail.com> * feat: mailhog fixture (#10606) * feat: mailhog fixture * fix: nodemailer to dispatch emails with e2e env * fix: remove space from email subject * feat: fixture getFirstEventAsOwner * feat: assert email subjects * fix: and enable dynamic booking test (#10642) * fix and enable dynamic booking test * remove page pause --------- Co-authored-by: Alex van Andel <me@alexvanandel.com> * fix: Broken team events if a user with the same name exists (#10724) * fix: Broken team events if a user with the same name exists * Fix tests + fix usernameList optionality * Try to list calendars, if not continue (#10720) Co-authored-by: Omar López <zomars@me.com> * v3.1.9 * link to org settings (#10718) * feat: app paypal payment (#8797) Co-authored-by: sean-brydon <55134778+sean-brydon@users.noreply.github.com> Co-authored-by: Omar López <zomars@me.com> * fix: RTL issues on booking pages + email confirmation (#10526) Co-authored-by: Peer Richelsen <peeroke@gmail.com> * fix: merge conflict * Fixing org slug (#10538) * fix: paypal build fixes * Fix avatar for org in Shell top (#10712) * feat: add range of dates for availability over-ride (#10462) * feat: add range of dates for availability over-ride * chore: changed range select to multiple select --------- Co-authored-by: Alex van Andel <me@alexvanandel.com> * fix: border issue for time slots (#10577) Co-authored-by: Raghul D <v-raghuld@microsoft.com> * style: Fix text wrapping issue in button (#10725) Co-authored-by: Omar López <zomars@me.com> * New Crowdin translations by Github Action * fix: App Install Dropdown Sort Properly [CAL-2285] (#10672) Co-authored-by: Peer Richelsen <peeroke@gmail.com> * fix: link escaping in booking page (#10360) Co-authored-by: Hariom Balhara <hariombalhara@gmail.com> * chore: fix refund i18n message (#10731) * chore: remove tailwind-scrollbar warning (#10523) Co-authored-by: Udit Takkar <53316345+Udit-takkar@users.noreply.github.com> * New Crowdin translations by Github Action * chore: Simplified date overrides (#10728) * chore: Simplified date overrides * Fixed a test that had a date override that wasn't at midnight utc * Wrote test that showed a fixed Europe/Brussels * Lint fix * New Crowdin translations by Github Action * Fix offset time + fetching correct dates * Deal with awkward minute offsets * remove store overhead * Format H based on tz * Cleanup store logic * Cleanup * Remove comments * Remove comments * Remove yarn.lock * Dark mode & v-align text fixes * Move ButtonGroup to the left to prevent chevron from jumping * Shift based on timezone (non-hour) and have 15min granularity in hour display background color --------- Co-authored-by: Leo Giovanetti <hello@leog.me> Co-authored-by: Omar López <zomars@me.com> Co-authored-by: Crowdin Bot <support+bot@crowdin.com> Co-authored-by: Zain Gulbaz <zaingulbaz8@gmail.com> Co-authored-by: Carina Wollendorfer <30310907+CarinaWolli@users.noreply.github.com> Co-authored-by: GitStart-Cal.com <121884634+gitstart-calcom@users.noreply.github.com> Co-authored-by: gitstart-calcom <gitstart@users.noreply.github.com> Co-authored-by: Keith Williams <keithwillcode@gmail.com> Co-authored-by: Suyash Srivastava <suyashsrivastava5053@gmail.com> Co-authored-by: Hariom Balhara <hariombalhara@gmail.com> Co-authored-by: CarinaWolli <wollencarina@gmail.com> Co-authored-by: Shivam Kalra <shivamkalra98@gmail.com> Co-authored-by: alannnc <alannnc@gmail.com> Co-authored-by: Alex van Andel <me@alexvanandel.com> Co-authored-by: Joe Au-Yeung <65426560+joeauyeung@users.noreply.github.com> Co-authored-by: Peer Richelsen <peeroke@gmail.com> Co-authored-by: Anik Dhabal Babu <81948346+anikdhabal@users.noreply.github.com> Co-authored-by: Pradumn Kumar <pradumn@tealfeed.com> Co-authored-by: Raghul <123321540+Raghul18@users.noreply.github.com> Co-authored-by: Raghul D <v-raghuld@microsoft.com> Co-authored-by: ABDERRAHMANI IDRISSI HAMZA <97639117+idrissi-hamza@users.noreply.github.com> Co-authored-by: Nafees Nazik <84864519+G3root@users.noreply.github.com> Co-authored-by: Danila <daniil.demidovich@gmail.com> Co-authored-by: Udit Takkar <53316345+Udit-takkar@users.noreply.github.com>

feat: add range of dates for availability over-ride

741dc5b

algora-pbc bot mentioned this pull request Jul 29, 2023

[CAL-1324] /availability - date overrides: Allow user to select multiple days #7909

Closed

Merge branch 'main' into feat/multiple-date-ovverides

95c276d

Pradumn27 commented Jul 29, 2023

View reviewed changes

vercel bot deployed to Preview – ui July 29, 2023 15:12 View deployment

chore: changed range select to multiple select

3325a68

vercel bot deployed to Preview – ui July 31, 2023 18:35 View deployment

Merge branch 'main' into feat/multiple-date-ovverides

23489eb

vercel bot deployed to Preview – ui July 31, 2023 20:00 View deployment

Merge branch 'main' into feat/multiple-date-ovverides

4a9d965

vercel bot deployed to Preview – ui August 2, 2023 20:21 View deployment

emrysal self-requested a review August 10, 2023 17:33

Merge branch 'main' into feat/multiple-date-ovverides

72ff041

vercel bot deployed to Preview – ui August 10, 2023 17:39 View deployment

emrysal approved these changes Aug 10, 2023

View reviewed changes

Merge branch 'main' into feat/multiple-date-ovverides

ab4d6e0

emrysal enabled auto-merge (squash) August 10, 2023 17:49

vercel bot deployed to Preview – ui August 10, 2023 17:56 View deployment

Merge branch 'main' into feat/multiple-date-ovverides

beaf0d8

vercel bot deployed to Preview – ui August 11, 2023 07:41 View deployment

wesleymatosdev reviewed Aug 11, 2023

View reviewed changes

wesleymatosdev approved these changes Aug 11, 2023

View reviewed changes

Merge branch 'main' into feat/multiple-date-ovverides

71d39ec

vercel bot deployed to Preview – ui August 12, 2023 07:16 View deployment

emrysal merged commit 9c45da5 into calcom:main Aug 12, 2023

Conversation

Pradumn27 commented Jul 29, 2023

What does this PR do?

Type of change

How should this be tested?

Mandatory Tasks

Technical Details

Uh oh!

vercel bot commented Jul 29, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

vercel bot commented Jul 29, 2023

Uh oh!

github-actions bot commented Jul 29, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Pradumn27 Jul 29, 2023

Choose a reason for hiding this comment

Uh oh!

Pradumn27 Jul 29, 2023

Choose a reason for hiding this comment

Uh oh!

Pradumn27 Jul 29, 2023

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Jul 29, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📦 Next.js Bundle Analysis for @calcom/web

Uh oh!

emrysal commented Jul 31, 2023

Uh oh!

Pradumn27 commented Jul 31, 2023

Uh oh!

Pradumn27 commented Jul 31, 2023

Uh oh!

emrysal left a comment

Choose a reason for hiding this comment

Uh oh!

wesleymatosdev Aug 11, 2023

Choose a reason for hiding this comment

Uh oh!

wesleymatosdev Aug 11, 2023

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

vercel bot commented Jul 29, 2023 •

edited

Loading

github-actions bot commented Jul 29, 2023 •

edited

Loading

github-actions bot commented Jul 29, 2023 •

edited

Loading