day headers

app/calendar/components/CalendarPage.tsx

@@ -15,10 +15,7 @@ export default function CalendarPage() {
   const [modalIsOpen, setModalIsOpen] = useState(false);
   const [filter, setFilter] = useState("");
 
-  console.log("events", events.data);
-
-  let lastPrintedWeek: number | null = null;
-  const thisWeekNumber = getWeekNumber(new Date());
+  let lastPrintedDate: [number, number, Date] | null = null;
 
   return (
     <>
@@ -40,20 +37,30 @@ export default function CalendarPage() {
         m="3rem 0 2rem"
       />
       {(events.data ?? []).map((event) => {
-        const weekNumber = getWeekNumber(event.date);
-        const printWeekHeader = weekNumber !== lastPrintedWeek;
+        const printDateHeader =
+          !lastPrintedDate ||
+          (lastPrintedDate[0] !== event.date.getDate() &&
+            lastPrintedDate[1] !== event.date.getMonth());
 
-        if (printWeekHeader) {
-          lastPrintedWeek = weekNumber;
+        if (printDateHeader) {
+          lastPrintedDate = [
+            event.date.getDate(),
+            event.date.getMonth(),
+            event.date,
+          ];
         }
 
+        const differenceInDays = Math.floor(
+          (lastPrintedDate![2].getTime() - new Date().getTime()) /
+            (1000 * 60 * 60 * 24)
+        );
+
         return (
           <Fragment key={event.id}>
-            {printWeekHeader && (
+            {printDateHeader && (
               <Box my={10}>
                 <SubText>
-                  Week {weekNumber}{" "}
-                  {thisWeekNumber === weekNumber && <>({t`This week`})</>}
+                  {event.date.toLocaleDateString()} {getTime(differenceInDays)}
                 </SubText>
               </Box>
             )}
@@ -71,18 +78,9 @@ export default function CalendarPage() {
   );
 }
 
-function getWeekNumber(d: Date) {
-  // Copy date so don't modify original
-  d = new Date(Date.UTC(d.getFullYear(), d.getMonth(), d.getDate()));
-  // Set to nearest Thursday: current date + 4 - current day number
-  // Make Sunday's day number 7
-  d.setUTCDate(d.getUTCDate() + 4 - (d.getUTCDay() || 7));
-  // Get first day of year
-  const yearStart = new Date(Date.UTC(d.getUTCFullYear(), 0, 1));
-  // Calculate full weeks to nearest Thursday
-  const weekNo = Math.ceil(
-    ((d.getTime() - yearStart.getTime()) / 86400000 + 1) / 7
-  );
-  // Return array of year and week number
-  return weekNo;
+function getTime(days: number) {
+  if (days < 1) return t`(Today)`;
+  if (days === 1) return t`(Tomorrow)`;
+
+  return "";
 }

app/calendar/components/EventInfo.tsx

@@ -17,12 +17,7 @@ interface EventInfoProps {
 }
 
 const TournamentInfo = ({ event }: EventInfoProps) => {
-  const {
-    secondaryBgColor,
-    themeColorHex,
-    gray,
-    themeColorShade,
-  } = useMyTheme();
+  const { secondaryBgColor, gray, themeColorShade } = useMyTheme();
   const [expanded, setExpanded] = useState(false);
   const [showModal, setShowModal] = useState(false);
   const poster = event.poster;
@@ -46,7 +41,7 @@ const TournamentInfo = ({ event }: EventInfoProps) => {
           <Heading fontFamily="'Rubik', sans-serif" size="lg">
             {event.name}
           </Heading>
-          <Flex flexWrap="wrap" justifyContent="center" mt={1}>
+          <Flex flexWrap="wrap" justifyContent="center" mt={3} mb={2}>
             {event.tags.map((tag) => {
               const tagInfo = TAGS.find((tagObj) => tagObj.code === tag)!;
               return (