seems to kinda work

components/booking/DatePicker.tsx

@@ -19,7 +19,6 @@ dayjs.extend(timezone);
 // FIXME prop types
 function DatePicker({
   weekStart,
-  onDatePicked,
   workingHours,
   organizerTimeZone,
   eventLength,
@@ -177,35 +176,42 @@ function DatePicker({
         {days.map((day, idx) => (
           <div
             key={day === null ? `e-${idx}` : `day-${day.date}`}
+            className="w-full relative"
             style={{
               paddingTop: "100%",
-            }}
-            className="w-full relative">
+            }}>
             {day === null ? (
               <div key={`e-${idx}`} />
             ) : (
-              <Link href={`/${router.query.user}/${router.query.type}?date=2021-11-10%2B0000`}>
-                <a>{day.date}</a>
+              <Link
+                href={`/${router.query.user}/${router.query.type}?date=${encodeURIComponent(
+                  inviteeDate().date(day.date).format("YYYY-MM-DDZZ")
+                )}`}>
+                <a
+                  className={classNames(
+                    "rounded-sm text-center border border-transparent absolute inset-0",
+                    "hover:border hover:border-brand dark:hover:border-white",
+                    day.disabled
+                      ? "text-gray-400 font-light hover:border-0 cursor-default"
+                      : "dark:text-white text-primary-500 font-medium",
+                    date && date.isSame(inviteeDate().date(day.date), "day")
+                      ? "bg-brand text-white-important"
+                      : !day.disabled
+                      ? " bg-gray-100 dark:bg-gray-600"
+                      : ""
+                  )}
+                  onClick={(e) => {
+                    if (day.disabled) {
+                      e.preventDefault();
+                    }
+                  }}
+                  data-testid="day"
+                  data-disabled={day.disabled}>
+                  <span className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
+                    {day.date}
+                  </span>
+                </a>
               </Link>
-              // <button
-              //   onClick={() => onDatePicked(inviteeDate().date(day.date))}
-              //   disabled={day.disabled}
-              //   className={classNames(
-              //     "absolute w-full top-0 left-0 right-0 bottom-0 rounded-sm text-center mx-auto",
-              //     "hover:border hover:border-brand dark:hover:border-white",
-              //     day.disabled
-              //       ? "text-gray-400 font-light hover:border-0 cursor-default"
-              //       : "dark:text-white text-primary-500 font-medium",
-              //     date && date.isSame(inviteeDate().date(day.date), "day")
-              //       ? "bg-brand text-white-important"
-              //       : !day.disabled
-              //       ? " bg-gray-100 dark:bg-gray-600"
-              //       : ""
-              //   )}
-              //   data-testid="day"
-              //   data-disabled={day.disabled}>
-              //   {day.date}
-              // </button>
             )}
           </div>
         ))}

components/booking/pages/AvailabilityPage.tsx

@@ -194,7 +194,6 @@ const AvailabilityPage = ({ profile, eventType, workingHours }: Props) => {
                   periodEndDate={eventType?.periodEndDate}
                   periodDays={eventType?.periodDays}
                   periodCountCalendarDays={eventType?.periodCountCalendarDays}
-                  onDatePicked={changeDate}
                   workingHours={workingHours}
                   weekStart={profile.weekStart || "Sunday"}
                   eventLength={eventType.length}