feat: multi-day events

src/components/Calendar.css

@@ -1,99 +1,128 @@
 /* src/components/Calendar.css */
 .react-calendar {
-    width: 100%;
-    max-width: 800px;
-    background-color: #1a1a1a; /* Slightly darker background */
-    border: none;
-    color: white;
-    font-family: Arial, sans-serif;
-    padding: 1rem; /* Add padding to the calendar */
-    border-radius: 8px; /* Optional: Add rounded corners */
-  }
-
-  .react-calendar__navigation {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 1rem;
-    background-color: #1a1a1a; /* Slightly darker background */
-    color: white;
-  }
-
-  .react-calendar__month-view__weekdays {
-    text-align: center;
-    font-weight: bold;
-    color: #ccc;
-  }
-
-  .react-calendar__month-view__days__day {
-    text-align: center;
-    padding: 1rem;
-    border-radius: 8px;
-    cursor: pointer;
-    aspect-ratio: 1 / 1; /* Make the tiles square */
-    color: white; /* Ensure all days are white */
-  }
+  width: 100%;
+  max-width: 800px;
+  background-color: #1a1a1a;
+  border: none;
+  color: white;
+  font-family: Arial, sans-serif;
+  padding: 1rem;
+  border-radius: 8px;
+}
 
-  .react-calendar__tile {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    height: 100%;
-  }
-
-  .react-calendar__tile > abbr {
-    position: relative;
-    z-index: 1;
-  }
-
-  .react-calendar__tile--now {
-    background: #333;
-    color: white;
-  }
-
-  .react-calendar__tile--active {
-    background: #3a3a3a;
-    color: white;
-  }
-
-  .react-calendar__tile--hover {
-    background: #444;
-  }
-
-  .react-calendar__month-view__days__day--weekend {
-    color: white; /* Ensure weekend numbers are not red */
-  }
-
-  .event-dot {
-    position: absolute;
-    top: calc(50% + 12px);  /* Position it 12px below the center */
-    left: 50%;
-    transform: translateX(-50%);
-    width: 6px;
-    height: 6px;
-    background-color: red;
-    border-radius: 50%;
-  }
-
-  /* Ensure the layout doesn't change with window size */
-  @media screen and (max-width: 600px) {
-    .event-dot {
-      top: calc(50% + 8px);  /* Adjust for smaller screens */
-    }
-  }
+.react-calendar__navigation {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem;
+  background-color: #1a1a1a;
+  color: white;
+}
+
+.react-calendar__month-view__weekdays {
+  text-align: center;
+  font-weight: bold;
+  color: #ccc;
+}
+
+.react-calendar__month-view__days__day {
+  text-align: center;
+  padding: 1rem;
+  border-radius: 8px;
+  cursor: pointer;
+  aspect-ratio: 1 / 1;
+  color: white;
+}
 
-  .react-calendar__navigation button {
-    min-width: 44px;
-    background: none;
-    border: none;
-    color: inherit;
-    font-size: 16px;
-    margin-top: 8px;
-    cursor: pointer;
+.react-calendar__tile {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+}
+
+.react-calendar__tile > abbr {
+  position: relative;
+  z-index: 1;
+}
+
+.react-calendar__tile--now {
+  background: #333;
+  color: white;
+}
+
+.react-calendar__tile--active {
+  background: #3a3a3a;
+  color: white;
+}
+
+.react-calendar__tile--hover {
+  background: #444;
+}
+
+.react-calendar__month-view__days__day--weekend {
+  color: white;
+}
+
+.event-dot {
+  position: absolute;
+  top: calc(50% + 12px);  /* Position it 12px below the center */
+  left: 50%;
+  transform: translateX(-50%);
+  width: 6px;
+  height: 6px;
+  background-color: red;
+  border-radius: 50%;
+}
+
+.event-start,
+.event-middle,
+.event-end {
+  position: absolute;
+  top: calc(50% + 14px);  /* Position it 12px below the center */
+  height: 6px;
+  height: 2px;  /* Make the line thinner */
+  background-color: red;
+  border-radius: 50%;
+}
+
+.event-start {
+  left: 50%;
+  right: 0;
+}
+
+.event-middle {
+  left: 0;
+  right: 0;
+}
+
+.event-end {
+  left: 0;
+  right: 50%;
+}
+
+/* Ensure the layout doesn't change with window size */
+@media screen and (max-width: 600px) {
+  .event-dot,
+  .event-start,
+  .event-middle,
+  .event-end {
+    top: calc(50% + 8px);
   }
-
-  .react-calendar__navigation button:disabled {
-    background-color: #f0f0f0;
-  }
+}
+
+.react-calendar__navigation button {
+  min-width: 44px;
+  background: none;
+  border: none;
+  color: inherit;
+  font-size: 16px;
+  margin-top: 8px;
+  cursor: pointer;
+}
+
+.react-calendar__navigation button:disabled {
+  background-color: #f0f0f0;
+}

src/components/Calendar.js

@@ -43,11 +43,35 @@ function CustomCalendar({ onSelectEvent, onDoubleClickDay, activeStartDate, sele
 
   const tileContent = ({ date, view }) => {
     if (view === 'month') {
-      const hasEvent = events.some(event => 
-        new Date(event.startDate).toDateString() === date.toDateString()
-      );
-      if (hasEvent) {
-        return <div className="event-dot"></div>;
+      const event = events.find(event => {
+        const eventStartDate = new Date(event.startDate);
+        const eventEndDate = new Date(event.endDate);
+
+        // Strip the time component by setting hours, minutes, seconds, and milliseconds to zero
+        eventStartDate.setHours(0, 0, 0, 0);
+        eventEndDate.setHours(0, 0, 0, 0);
+        date.setHours(0, 0, 0, 0);
+
+        return date >= eventStartDate && date <= eventEndDate;
+      });
+
+      if (event) {
+        const eventStartDate = new Date(event.startDate);
+        const eventEndDate = new Date(event.endDate);
+
+        eventStartDate.setHours(0, 0, 0, 0);
+        eventEndDate.setHours(0, 0, 0, 0);
+
+        if (eventStartDate.getTime() === eventEndDate.getTime()) {
+          // Single-day event
+          return <div className="event-dot"></div>;
+        } else if (date.getTime() === eventStartDate.getTime()) {
+          return <div className="event-start"></div>;
+        } else if (date.getTime() === eventEndDate.getTime()) {
+          return <div className="event-end"></div>;
+        } else {
+          return <div className="event-middle"></div>;
+        }
       }
     }
     return null;

src/components/EventList.js

@@ -1,7 +1,7 @@
 // src/components/EventList.js
 import React, { useState, useEffect, useRef } from 'react';
 import styled from 'styled-components';
-import { format } from 'date-fns';
+import { format, isSameDay } from 'date-fns';
 
 const ListContainer = styled.div`
   background-color: #1e1e1e;
@@ -123,7 +123,13 @@ function EventList({ onSelectEvent, events }) {
         {currentEvents.map((event) => (
           <EventItem key={event.id} onClick={() => onSelectEvent(event)}>
             <EventTitle>{event.title}</EventTitle>
-            <EventDate>{format(new Date(event.startDate), 'dd/MM/yyyy HH:mm')}</EventDate>
+            <EventDate>
+              {format(new Date(event.startDate), 'dd/MM/yyyy HH:mm')}
+              {!isSameDay(new Date(event.startDate), new Date(event.endDate)) &&
+                ` - ${format(new Date(event.endDate), 'dd/MM/yyyy HH:mm')}`}
+              {isSameDay(new Date(event.startDate), new Date(event.endDate)) &&
+                `-${format(new Date(event.endDate), 'HH:mm')}`}
+            </EventDate>
           </EventItem>
         ))}
       </EventsWrapper>