Update calendar.
This commit is contained in:
parent
0374a3e9a8
commit
c32e8b9afa
1 changed files with 29 additions and 2 deletions
|
|
@ -1,7 +1,7 @@
|
||||||
import React, { useState, useEffect, useRef } from 'react';
|
import React, { useState, useEffect, useRef } from 'react';
|
||||||
import { motion, AnimatePresence } from 'framer-motion';
|
import { motion, AnimatePresence } from 'framer-motion';
|
||||||
import EventCard from './EventCard';
|
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';
|
import { events, Event } from '../eventData';
|
||||||
|
|
||||||
const formatTime = (dateString: string, time: string): string => {
|
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 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<Event | null>(null);
|
const [selectedEvent, setSelectedEvent] = useState<Event | null>(null);
|
||||||
const [popupPosition, setPopupPosition] = useState({ top: 0, left: 0 });
|
const [popupPosition, setPopupPosition] = useState({ top: 0, left: 0 });
|
||||||
const [isPopupClosing, setIsPopupClosing] = useState(false);
|
const [isPopupClosing, setIsPopupClosing] = useState(false);
|
||||||
|
|
@ -74,6 +77,30 @@ const Calendar: React.FC = () => {
|
||||||
};
|
};
|
||||||
}, [selectedEvent]);
|
}, [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) => {
|
const handleEventClick = (event: Event, e: React.MouseEvent) => {
|
||||||
if (!isPopupClosing) {
|
if (!isPopupClosing) {
|
||||||
const rect = (e.target as HTMLElement).getBoundingClientRect();
|
const rect = (e.target as HTMLElement).getBoundingClientRect();
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue