From a96f8d3cf26622b589b5fd0fe2337471341d3621 Mon Sep 17 00:00:00 2001
From: Donkoko <nbonev@duck.com>
Date: Thu, 25 Jul 2024 19:00:48 +0300
Subject: [PATCH 1/3] adjusting styling of calendar events to work with custom
 content

---
 app/routes/_layout+/calendar.tsx | 142 ++++++++++++++++---------------
 app/styles/layout/calendar.css   |   1 +
 app/utils/calendar.ts            |   5 +-
 3 files changed, 78 insertions(+), 70 deletions(-)

diff --git a/app/routes/_layout+/calendar.tsx b/app/routes/_layout+/calendar.tsx
index 3ccc17c5f..5583cf4ed 100644
--- a/app/routes/_layout+/calendar.tsx
+++ b/app/routes/_layout+/calendar.tsx
@@ -1,11 +1,18 @@
 import { useState, useRef, useCallback } from "react";
-import type { EventHoveringArg } from "@fullcalendar/core/index.js";
+import type {
+  EventContentArg,
+  EventHoveringArg,
+} from "@fullcalendar/core/index.js";
 import dayGridPlugin from "@fullcalendar/daygrid";
 import listPlugin from "@fullcalendar/list";
 import FullCalendar from "@fullcalendar/react";
 import type { BookingStatus } from "@prisma/client";
 import { HoverCardPortal } from "@radix-ui/react-hover-card";
-import { ChevronLeftIcon, ChevronRightIcon } from "@radix-ui/react-icons";
+import {
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  DotIcon,
+} from "@radix-ui/react-icons";
 import type { LoaderFunctionArgs, MetaFunction } from "@remix-run/node";
 import { json } from "@remix-run/node";
 import { Link, useLoaderData } from "@remix-run/react";
@@ -25,10 +32,15 @@ import {
 } from "~/components/shared/hover-card";
 import { Spinner } from "~/components/shared/spinner";
 import { UserBadge } from "~/components/shared/user-badge";
+import When from "~/components/when/when";
 import { useViewportHeight } from "~/hooks/use-viewport-height";
 import calendarStyles from "~/styles/layout/calendar.css?url";
 import { appendToMetaTitle } from "~/utils/append-to-meta-title";
-import { statusClassesOnHover } from "~/utils/calendar";
+import {
+  getStatusClasses,
+  isOneDayEvent,
+  statusClassesOnHover,
+} from "~/utils/calendar";
 import { getWeekStartingAndEndingDates } from "~/utils/date-fns";
 import { makeShelfError } from "~/utils/error";
 import { data, error } from "~/utils/http.server";
@@ -38,6 +50,7 @@ import {
 } from "~/utils/permissions/permission.data";
 import { requirePermission } from "~/utils/roles.server";
 import { bookingStatusColorMap } from "./bookings";
+import { tw } from "~/utils/tw";
 
 export function links() {
   return [{ rel: "stylesheet", href: calendarStyles }];
@@ -245,71 +258,7 @@ const Calendar = () => {
               eventMouseEnter={handleEventMouseEnter}
               eventMouseLeave={handleEventMouseLeave}
               windowResize={handleWindowResize}
-              eventContent={(args) => {
-                const hoveredBooking = args.event
-                  .extendedProps as CalendarExtendedProps;
-
-                const startTime = format(
-                  new Date(hoveredBooking.start),
-                  "hh:mm"
-                );
-
-                return (
-                  <HoverCard openDelay={0} closeDelay={0}>
-                    <HoverCardTrigger className="inline-block w-full truncate">
-                      {startTime} | {args.event.title}
-                    </HoverCardTrigger>
-
-                    <HoverCardPortal>
-                      <HoverCardContent
-                        className="pointer-events-none md:w-96"
-                        side="top"
-                      >
-                        <div className="flex w-full items-center gap-x-2 text-xs text-gray-600">
-                          <DateS
-                            date={hoveredBooking.start}
-                            options={DATE_FORMAT_OPTIONS}
-                          />
-                          <ArrowRightIcon className="size-3 text-gray-600" />
-                          <DateS
-                            date={hoveredBooking.end}
-                            options={DATE_FORMAT_OPTIONS}
-                          />
-                        </div>
-
-                        <p className="mb-3 text-sm font-medium">
-                          {hoveredBooking.name}
-                        </p>
-
-                        <div className="mb-3 flex items-center gap-2">
-                          <Badge
-                            color={bookingStatusColorMap[hoveredBooking.status]}
-                          >
-                            <span className="block lowercase first-letter:uppercase">
-                              {hoveredBooking.status}
-                            </span>
-                          </Badge>
-
-                          <UserBadge
-                            imgClassName="rounded-full"
-                            name={hoveredBooking.custodian.name}
-                            img={
-                              hoveredBooking?.custodian.image ??
-                              "/static/images/default_pfp.jpg"
-                            }
-                          />
-                        </div>
-
-                        {hoveredBooking.description ? (
-                          <div className="wordwrap rounded border border-gray-200 bg-gray-25 p-2 text-gray-500">
-                            {hoveredBooking.description}
-                          </div>
-                        ) : null}
-                      </HoverCardContent>
-                    </HoverCardPortal>
-                  </HoverCard>
-                );
-              }}
+              eventContent={renderEventCard}
               eventTimeFormat={{
                 hour: "numeric",
                 minute: "2-digit",
@@ -326,3 +275,60 @@ const Calendar = () => {
 };
 
 export default Calendar;
+
+const renderEventCard = (args: EventContentArg) => {
+  const event = args.event;
+  const booking = event.extendedProps as CalendarExtendedProps;
+  const _isOneDayEvent = isOneDayEvent(booking.start, booking.end);
+
+  return (
+    <HoverCard openDelay={0} closeDelay={0}>
+      <HoverCardTrigger asChild>
+        <div className={tw("inline-block truncate bg-transparent")}>
+          <When truthy={_isOneDayEvent}>
+            <div className="fc-daygrid-event-dot inline-block" />
+          </When>
+          <DateS
+            date={booking.start}
+            options={{
+              timeStyle: "short",
+            }}
+          />{" "}
+          | {args.event.title}
+        </div>
+      </HoverCardTrigger>
+
+      <HoverCardPortal>
+        <HoverCardContent className="pointer-events-none md:w-96" side="top">
+          <div className="flex w-full items-center gap-x-2 text-xs text-gray-600">
+            <DateS date={booking.start} options={DATE_FORMAT_OPTIONS} />
+            <ArrowRightIcon className="size-3 text-gray-600" />
+            <DateS date={booking.end} options={DATE_FORMAT_OPTIONS} />
+          </div>
+
+          <p className="mb-3 text-sm font-medium">{booking.name}</p>
+
+          <div className="mb-3 flex items-center gap-2">
+            <Badge color={bookingStatusColorMap[booking.status]}>
+              <span className="block lowercase first-letter:uppercase">
+                {booking.status}
+              </span>
+            </Badge>
+
+            <UserBadge
+              imgClassName="rounded-full"
+              name={booking.custodian.name}
+              img={booking?.custodian.image ?? "/static/images/default_pfp.jpg"}
+            />
+          </div>
+
+          {booking.description ? (
+            <div className="wordwrap rounded border border-gray-200 bg-gray-25 p-2 text-gray-500">
+              {booking.description}
+            </div>
+          ) : null}
+        </HoverCardContent>
+      </HoverCardPortal>
+    </HoverCard>
+  );
+};
diff --git a/app/styles/layout/calendar.css b/app/styles/layout/calendar.css
index 651625571..8987f5b02 100644
--- a/app/styles/layout/calendar.css
+++ b/app/styles/layout/calendar.css
@@ -27,6 +27,7 @@
 
 .fc-event-main {
   color: inherit !important;
+  /* @apply !max-h-[20px]; */
 }
 .fc-event-title {
   font-weight: inherit !important;
diff --git a/app/utils/calendar.ts b/app/utils/calendar.ts
index cc3c6fcd3..f5047fefe 100644
--- a/app/utils/calendar.ts
+++ b/app/utils/calendar.ts
@@ -12,9 +12,10 @@ export function getStatusClasses(
     "!font-normal",
     "py-[2px] px-[5px]",
     "hover:cursor-pointer",
+    "max-h-[24px]",
   ];
   if (oneDayEvent) {
-    classes.push(" [&>.fc-event-title]:!truncate bg-transparent");
+    classes.push(" [&>.fc-event-title]:!truncate !bg-transparent");
   }
   let statusClasses: string[] = [];
   switch (status) {
@@ -86,7 +87,7 @@ export const statusClassesOnHover: Record<BookingStatus, string> = {
   COMPLETE: "md:!bg-success-100",
 };
 
-export function isOneDayEvent(from: Date, to: Date) {
+export function isOneDayEvent(from: Date | string, to: Date | string) {
   const start = new Date(from);
   const end = new Date(to);
 

From 777d30384559249b230d43f4c04c06b279320390 Mon Sep 17 00:00:00 2001
From: Donkoko <nbonev@duck.com>
Date: Thu, 25 Jul 2024 21:47:54 +0300
Subject: [PATCH 2/3] adjusting styles

---
 app/routes/_layout+/calendar.tsx | 15 +++------------
 app/utils/calendar.ts            | 10 +++++-----
 2 files changed, 8 insertions(+), 17 deletions(-)

diff --git a/app/routes/_layout+/calendar.tsx b/app/routes/_layout+/calendar.tsx
index 5583cf4ed..c04c1e002 100644
--- a/app/routes/_layout+/calendar.tsx
+++ b/app/routes/_layout+/calendar.tsx
@@ -8,15 +8,10 @@ import listPlugin from "@fullcalendar/list";
 import FullCalendar from "@fullcalendar/react";
 import type { BookingStatus } from "@prisma/client";
 import { HoverCardPortal } from "@radix-ui/react-hover-card";
-import {
-  ChevronLeftIcon,
-  ChevronRightIcon,
-  DotIcon,
-} from "@radix-ui/react-icons";
+import { ChevronLeftIcon, ChevronRightIcon } from "@radix-ui/react-icons";
 import type { LoaderFunctionArgs, MetaFunction } from "@remix-run/node";
 import { json } from "@remix-run/node";
 import { Link, useLoaderData } from "@remix-run/react";
-import { format } from "date-fns";
 import { ClientOnly } from "remix-utils/client-only";
 import FallbackLoading from "~/components/dashboard/fallback-loading";
 import { ArrowRightIcon } from "~/components/icons/library";
@@ -36,11 +31,7 @@ import When from "~/components/when/when";
 import { useViewportHeight } from "~/hooks/use-viewport-height";
 import calendarStyles from "~/styles/layout/calendar.css?url";
 import { appendToMetaTitle } from "~/utils/append-to-meta-title";
-import {
-  getStatusClasses,
-  isOneDayEvent,
-  statusClassesOnHover,
-} from "~/utils/calendar";
+import { isOneDayEvent, statusClassesOnHover } from "~/utils/calendar";
 import { getWeekStartingAndEndingDates } from "~/utils/date-fns";
 import { makeShelfError } from "~/utils/error";
 import { data, error } from "~/utils/http.server";
@@ -49,8 +40,8 @@ import {
   PermissionEntity,
 } from "~/utils/permissions/permission.data";
 import { requirePermission } from "~/utils/roles.server";
-import { bookingStatusColorMap } from "./bookings";
 import { tw } from "~/utils/tw";
+import { bookingStatusColorMap } from "./bookings";
 
 export function links() {
   return [{ rel: "stylesheet", href: calendarStyles }];
diff --git a/app/utils/calendar.ts b/app/utils/calendar.ts
index f5047fefe..e9fb6d7e3 100644
--- a/app/utils/calendar.ts
+++ b/app/utils/calendar.ts
@@ -26,7 +26,7 @@ export function getStatusClasses(
         "md:!text-gray-700",
         "md:bg-gray-50",
         "md:border-gray-200",
-        "[&>div.fc-daygrid-event-dot]:!border-gray-700",
+        "[&_.fc-daygrid-event-dot]:!border-gray-700",
         "[&_.fc-list-event-dot]:!border-gray-700",
         "md:focus:!bg-gray-100",
       ];
@@ -36,7 +36,7 @@ export function getStatusClasses(
         "md:!text-blue-700",
         "md:bg-blue-50",
         "md:border-blue-200",
-        "[&>div.fc-daygrid-event-dot]:!border-blue-700",
+        "[&_.fc-daygrid-event-dot]:!border-blue-700",
         "[&_.fc-list-event-dot]:!border-blue-700",
         "md:focus:!bg-blue-100",
       ];
@@ -46,7 +46,7 @@ export function getStatusClasses(
         "md:!text-purple-700",
         "md:bg-purple-50",
         "md:border-purple-200",
-        "[&>div.fc-daygrid-event-dot]:!border-purple-700",
+        "[&_.fc-daygrid-event-dot]:!border-purple-700",
         "[&_.fc-list-event-dot]:!border-purple-700",
         "md:focus:!bg-purple-100",
       ];
@@ -56,7 +56,7 @@ export function getStatusClasses(
         "md:!text-warning-700",
         "md:bg-warning-50",
         "md:border-warning-200",
-        "[&>div.fc-daygrid-event-dot]:!border-warning-700",
+        "[&_.fc-daygrid-event-dot]:!border-warning-700",
         "[&_.fc-list-event-dot]:!border-warning-700",
         "md:focus:!bg-warning-100",
       ];
@@ -66,7 +66,7 @@ export function getStatusClasses(
         "md:!text-success-700",
         "md:bg-success-50",
         "md:border-success-200",
-        "[&>div.fc-daygrid-event-dot]:!border-success-700",
+        "[&_.fc-daygrid-event-dot]:!border-success-700",
         "[&_.fc-list-event-dot]:!border-success-700",
         "md:focus:!bg-success-100",
       ];

From d4f92be1ebc8abf6df73a29b9aafff909561b84f Mon Sep 17 00:00:00 2001
From: Donkoko <nbonev@duck.com>
Date: Fri, 26 Jul 2024 09:29:37 +0300
Subject: [PATCH 3/3] finish fixing styling

---
 app/components/shared/user-badge.tsx | 2 +-
 app/routes/_layout+/calendar.tsx     | 8 +++-----
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/app/components/shared/user-badge.tsx b/app/components/shared/user-badge.tsx
index c4ce8a1bb..c1c1ca0fd 100644
--- a/app/components/shared/user-badge.tsx
+++ b/app/components/shared/user-badge.tsx
@@ -13,7 +13,7 @@ export const UserBadge = ({
   imgClassName,
   name,
 }: UserBadgeProps) => (
-  <div className="max-w-[250px]">
+  <div className="h-6 max-w-[250px]">
     <span
       className={tw(
         "ml-1 inline-flex w-max items-center rounded-2xl bg-gray-100 px-2 py-0.5",
diff --git a/app/routes/_layout+/calendar.tsx b/app/routes/_layout+/calendar.tsx
index c04c1e002..49abd8ff1 100644
--- a/app/routes/_layout+/calendar.tsx
+++ b/app/routes/_layout+/calendar.tsx
@@ -106,7 +106,7 @@ export const DATE_FORMAT_OPTIONS = {
 } as const;
 
 // Calendar Component
-const Calendar = () => {
+export default function Calendar() {
   const { title } = useLoaderData<typeof loader>();
   const { isMd } = useViewportHeight();
   const [startingDay, endingDay] = getWeekStartingAndEndingDates(new Date());
@@ -263,9 +263,7 @@ const Calendar = () => {
       </div>
     </>
   );
-};
-
-export default Calendar;
+}
 
 const renderEventCard = (args: EventContentArg) => {
   const event = args.event;
@@ -297,7 +295,7 @@ const renderEventCard = (args: EventContentArg) => {
             <DateS date={booking.end} options={DATE_FORMAT_OPTIONS} />
           </div>
 
-          <p className="mb-3 text-sm font-medium">{booking.name}</p>
+          <div className="mb-3 mt-1 text-sm font-medium">{booking.name}</div>
 
           <div className="mb-3 flex items-center gap-2">
             <Badge color={bookingStatusColorMap[booking.status]}>