feat: stylize calendar

Closes #130, #109
one-zero-eight · Mar 3, 2024 · 5a2d7e9 · 5a2d7e9
1 parent b85303c
commit 5a2d7e9
Show file tree

Hide file tree

Showing 2 changed files with 112 additions and 18 deletions.
diff --git a/app/globals-calendar.css b/app/globals-calendar.css
@@ -1,5 +1,5 @@
 :root {
-  --fc-neutral-bg-color: #efe2ff;
+  --fc-neutral-bg-color: rgba(149, 52, 244, 0.2);
   --fc-page-bg-color: theme("colors.base");
   --fc-border-color: theme("colors.inactive/0.5");
   --fc-list-event-hover-bg-color: theme("colors.primary.hover");
@@ -11,17 +11,13 @@
   --fc-button-text-color: theme("colors.text.main");
 }
 
-.dark {
-  --fc-neutral-bg-color: #31273b;
-}
-
 .fc {
   .fc-timegrid-slot-minor {
     @apply border-t-0;
   }
 
   .fc-timegrid-slot-label {
-    @apply relative top-[-0.5rem] border-t-0 pr-1 align-top text-xs text-inactive;
+    @apply relative top-[-0.5rem] border-t-0 pr-1 align-top text-xs text-gray-500;
   }
 
   .fc-header-toolbar.fc-toolbar {
@@ -48,10 +44,18 @@
     }
   }
 
-  .fc-col-header-cell-cushion,
+  .fc-col-header-cell-cushion {
+    @apply text-lg text-gray-500;
+  }
+
+  .fc-day-today {
+    .fc-col-header-cell-cushion {
+      @apply font-medium text-text-main;
+    }
+  }
+
   .week-cell {
-    /* Force word wrapping */
-    word-spacing: 3000px;
+    @apply text-xs text-gray-500;
   }
 
   .fc-list-empty-cushion {
@@ -83,7 +87,23 @@
     @apply hidden;
   }
 
-  .fc-timeGridWeek-view .fc-daygrid-body {
-    @apply bg-[var(--fc-neutral-bg-color)];
+  .fc-timegrid-now-indicator-line {
+    @apply rounded-full !border-2;
+  }
+
+  .fc-timegrid-now-indicator-arrow {
+    @apply w-full border-none pr-2 text-right text-xs font-medium text-[red];
+  }
+
+  .fc-day-today {
+    background-color: unset !important;
+  }
+
+  .fc-day-today .fc-daygrid-day-number {
+    @apply inline-flex h-7 w-fit items-center justify-center rounded-md bg-red-500 px-1 font-medium text-white;
+  }
+
+  .fc-timegrid-event-harness-inset .fc-timegrid-event {
+    @apply shadow-none;
   }
 }
diff --git a/components/common/calendar/Calendar.tsx b/components/common/calendar/Calendar.tsx
@@ -129,9 +129,23 @@ function Calendar({
             eventContent: renderEventListMonth,
           },
           timeGridWeek: {
-            // Show weekday and date in day header
-            dayHeaderFormat: "ddd D",
             eventContent: renderEventTimeGridWeek,
+            weekNumbers: false,
+            // Show weekday and date in day header
+            dayHeaderContent: (arg) => {
+              if (!arg.isToday) {
+                return moment(arg.date).format("ddd D");
+              }
+              // If today, show date in red circle
+              return (
+                <>
+                  {moment(arg.date).format("ddd")}{" "}
+                  <div className="inline-flex w-fit items-center justify-center rounded-md bg-red-500 px-1 text-white">
+                    {moment(arg.date).format("D")}
+                  </div>
+                </>
+              );
+            },
           },
           dayGridMonth: {
             eventContent: renderEventDayGridMonth,
@@ -140,6 +154,29 @@ function Calendar({
         allDayText="" // Remove text in all day row
         // displayEventEnd={true} // Display end time
         nowIndicator={true} // Display current time as line
+        nowIndicatorContent={(arg) => {
+          if (
+            arg.date.getUTCHours() === 0 &&
+            arg.date.getUTCMinutes() === 0 &&
+            arg.date.getUTCSeconds() === 0
+          )
+            return null; // It's a line, not a label
+          // Fix timezone
+          const text = moment(Number(arg.date) - 3 * 60 * 60 * 1000).format(
+            "HH:mm",
+          );
+          const isNearTimeLabel =
+            arg.date.getUTCMinutes() < 15 || arg.date.getUTCMinutes() > 45;
+          if (!isNearTimeLabel) {
+            return <div>{text}</div>;
+          } else {
+            return (
+              <div className="-mt-6 flex h-12 translate-y-2 items-center justify-end bg-base">
+                {text}
+              </div>
+            );
+          }
+        }}
         firstDay={1} // From Monday
         navLinks={false} // Dates are clickable
         weekNumbers={true} // Display numbers of weeks
@@ -150,7 +187,7 @@ function Calendar({
         contentHeight="auto" // Do not add scrollbar
         stickyHeaderDates={false}
         eventInteractive={true} // Make event tabbable
-        eventClassNames="cursor-pointer text-sm" // Show that events are clickable
+        eventClassNames="cursor-pointer text-sm rounded-md !bg-transparent border-0 overflow-clip"
         eventClick={(info) => {
           info.jsEvent.preventDefault();
           // We should check prev value via argument because 'eventElement' may be outdated in current closure
@@ -199,10 +236,47 @@ function renderEventListMonth({ event }: EventContentArg) {
   );
 }
 
-function renderEventTimeGridWeek({ event }: EventContentArg) {
+function renderEventTimeGridWeek({
+  event,
+  borderColor,
+  backgroundColor,
+  timeText,
+}: EventContentArg) {
+  const border =
+    borderColor !== "undefined"
+      ? borderColor
+      : backgroundColor !== "undefined"
+        ? backgroundColor
+        : "#9A2EFF";
+  const background =
+    backgroundColor !== "undefined"
+      ? backgroundColor
+      : borderColor !== "undefined"
+        ? borderColor
+        : "#9A2EFF";
   return (
-    <div className="h-full overflow-clip text-left">
-      <span className="line-clamp-2">{event.title}</span>
+    <div
+      className="h-full border-l-4 p-1 text-left"
+      style={{
+        borderLeftColor: border,
+        backgroundColor: `color-mix(in srgb, ${background} 40%, transparent)`,
+        color: `color-mix(in srgb, ${background} 75%, rgb(var(--color-text)))`,
+      }}
+    >
+      <span
+        className="line-clamp-2 text-sm font-medium"
+        style={{
+          color: `color-mix(in srgb, ${background} 60%, rgb(var(--color-text)))`,
+        }}
+      >
+        {event.title}
+      </span>
+      {timeText && (
+        <span className="line-clamp-2 text-xs text-opacity-50">
+          {" "}
+          {timeText}
+        </span>
+      )}
       <span className="line-clamp-2 text-xs">
         {event.extendedProps.location}
       </span>
@@ -222,7 +296,7 @@ function renderEventDayGridMonth({
         className="fc-daygrid-event-dot"
         style={{ borderColor: borderColor || backgroundColor }}
       />
-      <div className="fc-event-title w-full max-w-full text-xs">
+      <div className="fc-event-title w-full max-w-full text-xs text-text-main">
         {event.title || <>&nbsp;</>}
       </div>
       {timeText && (