use DateRangePicker component

apps/web/components/out-of-office/DateRangePicker/DateSelect.css

@@ -1,110 +0,0 @@
-.custom-date > .tremor-DateRangePicker-root > .tremor-DateRangePicker-button {
-    box-shadow: none;
-    width: 100%;
-    background-color: transparent;
-  }
-  
-  /* Media query for screens larger than 768px */
-  @media (max-width: 639) {
-    .custom-date > .tremor-DateRangePicker-root > .tremor-DateRangePicker-button {
-      max-width: 400px;
-    }
-  }
-  
-  .recharts-cartesian-grid-horizontal line{
-    @apply stroke-emphasis
-  }
-  
-  .tremor-DateRangePicker-button button{
-    @apply !h-9 !max-h-9 border-default hover:border-emphasis
-  }
-  
-  .tremor-DateRangePicker-calendarButton,
-  .tremor-DateRangePicker-dropdownButton {
-    @apply border-subtle bg-default focus-within:ring-emphasis hover:border-subtle dark:focus-within:ring-emphasis hover:bg-subtle text-sm leading-4 placeholder:text-sm placeholder:font-normal focus-within:ring-0;
-  }
-  
-  .tremor-DateRangePicker-dropdownModal{
-    @apply divide-none
-  }
-  
-  .tremor-DropdownItem-root{
-    @apply !h-9 !max-h-9 bg-default hover:bg-subtle text-default hover:text-emphasis
-  }
-  
-  .tremor-DateRangePicker-calendarButtonText,
-  .tremor-DateRangePicker-dropdownButtonText {
-    @apply text-default;
-  }
-  
-  .tremor-DateRangePicker-calendarHeaderText{
-    @apply !text-default
-  }
-  
-  .tremor-DateRangePicker-calendarHeader svg{
-    @apply text-default
-  }
-  
-  .tremor-DateRangePicker-calendarHeader button{
-    @apply hover:bg-emphasis shadow-none focus:ring-0
-  }
-  
-  
-  .tremor-DateRangePicker-calendarHeader button:hover svg{
-    @apply text-emphasis
-  }
-  
-  .tremor-DateRangePicker-calendarButtonIcon{
-    @apply text-default
-  }
-  
-  .tremor-DateRangePicker-calendarModal,
-  .tremor-DateRangePicker-dropdownModal {
-    @apply bg-default border-subtle shadow-dropdown
-  }
-  
-  .tremor-DateRangePicker-calendarBodyDate button{
-    @apply text-default  hover:bg-emphasis
-  }
-  
-  .tremor-DateRangePicker-calendarBodyDate button:disabled,
-  .tremor-DateRangePicker-calendarBodyDate button[disabled]{
-    @apply opacity-25
-  }
-  
-  .tremor-DateRangePicker-calendarHeader button{
-    @apply border-default text-default
-  }
-  
-  .tremor-DateRangePicker-calendarBodyDate .bg-gray-100{
-    @apply bg-subtle
-  }
-  
-  .tremor-DateRangePicker-calendarBodyDate .bg-gray-500{
-    @apply !bg-brand-default text-inverted
-  }
-  
-  
-  .tremor-Card-root {
-    @apply p-5 bg-default;
-  }
-  
-  .tremor-TableCell-root {
-    @apply pl-0;
-  }
-  
-  .recharts-responsive-container {
-    @apply -mx-4;
-  }
-  .tremor-Card-root > p {
-    @apply mb-2 text-base font-semibold;
-  }
-  
-  .tremor-Legend-legendItem {
-    @apply ml-2;
-  }
-  
-  .tremor-TableBody-root {
-    @apply divide-subtle;
-  }
-  

apps/web/components/out-of-office/DateRangePicker/index.tsx

@@ -1,47 +0,0 @@
-import type { BookingRedirectForm } from "@pages/settings/my-account/out-of-office";
-import { DateRangePicker } from "@tremor/react";
-import type { UseFormSetValue } from "react-hook-form";
-
-import dayjs from "@calcom/dayjs";
-import { useLocale } from "@calcom/lib/hooks/useLocale";
-
-import "./DateSelect.css";
-
-interface IOutOfOfficeDateRangeSelectProps {
-  dateRange: [Date | null, Date | null, null];
-  setDateRange: React.Dispatch<React.SetStateAction<[Date | null, Date | null, null]>>;
-  setValue: UseFormSetValue<BookingRedirectForm>;
-}
-
-const OutOfOfficeDateRangePicker = (props: IOutOfOfficeDateRangeSelectProps) => {
-  const { t } = useLocale();
-  const { dateRange, setDateRange, setValue } = props;
-  return (
-    <div className="custom-date">
-      <DateRangePicker
-        value={dateRange}
-        defaultValue={dateRange}
-        onValueChange={(datesArray) => {
-          const [start, end] = datesArray;
-
-          if (start) {
-            setDateRange([start, end as Date | null, null]);
-          }
-          if (start && end) {
-            setValue("startDate", start.toISOString());
-            setValue("endDate", end.toISOString());
-          }
-        }}
-        color="gray"
-        options={undefined}
-        enableDropdown={false}
-        placeholder={t("select_date_range")}
-        enableYearPagination={true}
-        minDate={dayjs().startOf("d").toDate()}
-        maxDate={dayjs().add(2, "y").endOf("d").toDate()}
-      />
-    </div>
-  );
-};
-
-export { OutOfOfficeDateRangePicker };

apps/web/pages/settings/my-account/out-of-office/index.tsx

@@ -1,6 +1,6 @@
 import { Trash2 } from "lucide-react";
 import React, { useState } from "react";
-import { useForm, useFormState } from "react-hook-form";
+import { Controller, useForm, useFormState } from "react-hook-form";
 
 import dayjs from "@calcom/dayjs";
 import { getLayout } from "@calcom/features/settings/layouts/SettingsLayout";
@@ -9,15 +9,22 @@ import { useHasTeamPlan } from "@calcom/lib/hooks/useHasPaidPlan";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import useMeQuery from "@calcom/trpc/react/hooks/useMeQuery";
-import { Button, Meta, showToast, Select, SkeletonText, UpgradeTeamsBadge, Switch } from "@calcom/ui";
+import {
+  Button,
+  Meta,
+  showToast,
+  Select,
+  SkeletonText,
+  UpgradeTeamsBadge,
+  Switch,
+  DateRangePicker,
+} from "@calcom/ui";
 import { TableNew, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@calcom/ui";
 
 import PageWrapper from "@components/PageWrapper";
-import { OutOfOfficeDateRangePicker } from "@components/out-of-office/DateRangePicker";
 
 export type BookingRedirectForm = {
-  startDate: string;
-  endDate: string;
+  dateRange: { startDate: Date; endDate: Date };
   toTeamUserId: number | null;
 };
 
@@ -25,18 +32,20 @@ const OutOfOfficeSection = () => {
   const { t } = useLocale();
   const utils = trpc.useContext();
 
-  const [dateRange, setDateRange] = useState<[Date | null, Date | null, null | null]>([
-    dayjs().startOf("d").toDate(),
-    dayjs().add(1, "d").endOf("d").toDate(),
-    null,
-  ]);
   const [profileRedirect, setProfileRedirect] = useState(false);
   const [selectedMember, setSelectedMember] = useState<{ label: string; value: number | null } | null>(null);
 
-  const { handleSubmit, setValue } = useForm<BookingRedirectForm>({
+  const [dateRange] = useState<{ startDate: Date; endDate: Date }>({
+    startDate: dayjs().startOf("d").toDate(),
+    endDate: dayjs().add(1, "d").endOf("d").toDate(),
+  });
+
+  const { handleSubmit, setValue, getValues, control } = useForm<BookingRedirectForm>({
     defaultValues: {
-      startDate: dateRange[0]?.toISOString(),
-      endDate: dateRange[1]?.toISOString(),
+      dateRange: {
+        startDate: dateRange.startDate,
+        endDate: dateRange.endDate,
+      },
       toTeamUserId: null,
     },
   });
@@ -121,11 +130,22 @@ const OutOfOfficeSection = () => {
               )}
               <div className="w-1/2 lg:w-1/3">
                 <p className="text-emphasis mb-1 block text-sm font-medium">{t("time_range")}</p>
-
-                <OutOfOfficeDateRangePicker
-                  dateRange={dateRange}
-                  setValue={setValue}
-                  setDateRange={setDateRange}
+                <Controller
+                  name="dateRange"
+                  control={control}
+                  defaultValue={dateRange}
+                  render={() => (
+                    <DateRangePicker
+                      startDate={getValues("dateRange").startDate}
+                      endDate={getValues("dateRange").endDate}
+                      onDatesChange={({ startDate, endDate }) => {
+                        setValue("dateRange", {
+                          startDate,
+                          endDate,
+                        });
+                      }}
+                    />
+                  )}
                 />
               </div>
             </div>

packages/trpc/server/routers/loggedInViewer/outOfOffice.handler.ts

@@ -18,12 +18,13 @@ type TBookingRedirect = {
 };
 
 export const outOfOfficeCreate = async ({ ctx, input }: TBookingRedirect) => {
-  if (!input.startDate || !input.endDate) {
+  const { startDate, endDate } = input.dateRange;
+  if (!startDate || !endDate) {
     throw new TRPCError({ code: "BAD_REQUEST", message: "start_date_and_end_date_required" });
   }
 
-  const inputStartTime = dayjs(input.startDate).startOf("day");
-  const inputEndTime = dayjs(input.endDate).endOf("day");
+  const inputStartTime = dayjs(startDate).startOf("day");
+  const inputEndTime = dayjs(endDate).endOf("day");
   const offset = dayjs(inputStartTime).utcOffset();
 
   // If start date is after end date throw error
@@ -137,8 +138,8 @@ export const outOfOfficeCreate = async ({ ctx, input }: TBookingRedirect) => {
   const createdRedirect = await prisma.outOfOfficeEntry.create({
     data: {
       uuid: uuidv4(),
-      start: dayjs(input.startDate).startOf("day").toISOString(),
-      end: dayjs(input.endDate).endOf("day").toISOString(),
+      start: dayjs(startDate).startOf("day").toISOString(),
+      end: dayjs(endDate).endOf("day").toISOString(),
       userId: ctx.user.id,
       toUserId: toUserId,
       createdAt: new Date(),

packages/trpc/server/routers/loggedInViewer/outOfOffice.schema.ts

@@ -1,8 +1,10 @@
 import { z } from "zod";
 
 export const ZOutOfOfficeInputSchema = z.object({
-  startDate: z.string(),
-  endDate: z.string(),
+  dateRange: z.object({
+    startDate: z.date(),
+    endDate: z.date(),
+  }),
   toTeamUserId: z.number().nullable(),
 });