diff --git a/client/src/components/Calendar.tsx b/client/src/components/Calendar.tsx index 8bba763..ba3fc5c 100644 --- a/client/src/components/Calendar.tsx +++ b/client/src/components/Calendar.tsx @@ -1,7 +1,7 @@ import React, { useState, useEffect, useRef } from 'react'; import { motion, AnimatePresence } from 'framer-motion'; import EventCard from './EventCard'; -import { parseISO, startOfDay, isSameDay, isAfter, format } from 'date-fns'; +import { parseISO, startOfDay, isSameDay, isAfter, format, startOfMonth } from 'date-fns'; import { events, Event } from '../eventData'; const formatTime = (dateString: string, time: string): string => { @@ -27,7 +27,10 @@ const EventPopup: React.FC<{ event: Event; position: { top: number; left: number ); const Calendar: React.FC = () => { - const [currentMonth, setCurrentMonth] = useState(new Date(2024, 10, 1)); + const [currentMonth, setCurrentMonth] = useState(() => { + const now = new Date(); + return startOfMonth(now); + }); const [selectedEvent, setSelectedEvent] = useState(null); const [popupPosition, setPopupPosition] = useState({ top: 0, left: 0 }); const [isPopupClosing, setIsPopupClosing] = useState(false); @@ -74,6 +77,30 @@ const Calendar: React.FC = () => { }; }, [selectedEvent]); + useEffect(() => { + const now = new Date(); + const currentMonthEvents = events.filter(event => { + const eventDate = parseISO(event.date); + return eventDate.getMonth() === now.getMonth() && eventDate.getFullYear() === now.getFullYear(); + }); + + if (currentMonthEvents.length === 0) { + // If no events in the current month, find the next month with events + let nextMonth = now; + while (true) { + nextMonth = new Date(nextMonth.getFullYear(), nextMonth.getMonth() + 1, 1); + const nextMonthEvents = events.filter(event => { + const eventDate = parseISO(event.date); + return eventDate.getMonth() === nextMonth.getMonth() && eventDate.getFullYear() === nextMonth.getFullYear(); + }); + if (nextMonthEvents.length > 0) { + setCurrentMonth(startOfMonth(nextMonth)); + break; + } + } + } + }, []); + const handleEventClick = (event: Event, e: React.MouseEvent) => { if (!isPopupClosing) { const rect = (e.target as HTMLElement).getBoundingClientRect();