WeekLinkTitle with date ranges

app/db/models/calendar.server.ts

@@ -1,8 +1,4 @@
-import {
-  databaseTimestampToDate,
-  dateToDatabaseTimestamp,
-  dateToWeekNumber,
-} from "~/utils/dates";
+import { dateToDatabaseTimestamp } from "~/utils/dates";
 import { sql } from "../sql";
 import type { CalendarEvent, CalendarEventDate, User } from "../types";
 

app/routes/calendar/index.tsx

@@ -20,6 +20,7 @@ import {
   weekNumberToDate,
 } from "~/utils/dates";
 import { discordFullName, makeTitle } from "~/utils/strings";
+import type { Unpacked } from "~/utils/types";
 import { resolveBaseUrl } from "~/utils/urls";
 import { actualNumber } from "~/utils/zod";
 
@@ -151,17 +152,7 @@ function WeekLinks() {
                   tabIndex={hidden ? -1 : 0}
                 >
                   <>
-                    <div>
-                      {week.number === data.currentWeek
-                        ? "This"
-                        : week.number - data.currentWeek === 1
-                        ? "Next"
-                        : week.number - data.currentWeek === -1
-                        ? "Last"
-                        : week.number}{" "}
-                      <br />
-                      Week
-                    </div>
+                    <WeekLinkTitle week={week} />
                     <div
                       className={clsx("calendar__event-count", {
                         invisible: !eventCounts,
@@ -180,6 +171,58 @@ function WeekLinks() {
   );
 }
 
+function WeekLinkTitle({
+  week,
+}: {
+  week: Unpacked<UseDataFunctionReturn<typeof loader>["weeks"]>;
+}) {
+  const data = useLoaderData<typeof loader>();
+  const { i18n } = useTranslation();
+
+  const relativeWeekIdentifier =
+    week.number === data.currentWeek
+      ? "This"
+      : week.number - data.currentWeek === 1
+      ? "Next"
+      : week.number - data.currentWeek === -1
+      ? "Last"
+      : null;
+
+  if (relativeWeekIdentifier) {
+    return (
+      <div className="stack xxs">
+        <div>{relativeWeekIdentifier}</div>
+        <div>Week</div>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <div>
+        {weekNumberToDate({
+          week: week.number,
+          year: week.year,
+        }).toLocaleDateString(i18n.language, {
+          day: "numeric",
+          month: "short",
+        })}
+      </div>
+      <div className="calendar__week__dash">-</div>
+      <div>
+        {weekNumberToDate({
+          week: week.number,
+          year: week.year,
+          position: "end",
+        }).toLocaleDateString(i18n.language, {
+          day: "numeric",
+          month: "short",
+        })}
+      </div>
+    </div>
+  );
+}
+
 function getEventsCountPerWeek(
   startTimes: UseDataFunctionReturn<typeof loader>["nearbyStartTimes"]
 ) {

app/styles/calendar.css

@@ -20,11 +20,11 @@
   height: calc(var(--full-size-week-height) - 2rem);
   flex-direction: column;
   justify-content: space-between;
-  padding: var(--s-2);
+  padding: var(--s-1-5);
   background-color: var(--theme-very-transparent);
   border-radius: var(--rounded);
   cursor: pointer;
-  font-size: var(--fonts-xxs);
+  font-size: var(--fonts-xxxs);
   font-weight: var(--bold);
   text-align: center;
 }
@@ -75,6 +75,10 @@
   font-size: var(--fonts-xxs);
 }
 
+.calendar__week__dash {
+  line-height: 0.8;
+}
+
 .calendar__events-container {
   background-color: var(--bg-lighter);
   margin-block-start: var(--s-8);

app/styles/common.css

@@ -119,6 +119,10 @@
   flex-direction: column;
 }
 
+.stack.xxs {
+  gap: var(--s-1);
+}
+
 .stack.xs {
   gap: var(--s-1-5);
 }

app/utils/dates.ts

@@ -16,15 +16,22 @@ export function dateToWeekNumber(date: Date) {
 export function weekNumberToDate({
   week,
   year,
+  position = "start",
 }: {
   week: number;
   year: number;
+  /** start = Date of Monday, end = Date of Sunday */
+  position?: "start" | "end";
 }) {
   // xxx: possible problem of mismatch when server time and local time don't match
   // gotta make sure events which belong to monday are still shown for sunday
   const result = new Date(Date.UTC(year, 0, 4));
+
   result.setDate(
     result.getDate() - (result.getDay() || 7) + 1 + 7 * (week - 1)
   );
+  if (position === "end") {
+    result.setDate(result.getDate() + 6);
+  }
   return result;
 }