Fix calendar date display

Improve calendar functionality to allow switching between yearly and monthly views. Display submission deadlines and conference dates as lines at the bottom of each date, similar to the original AI deadlines website. Address broken calendar dates.

src/pages/Calendar.tsx

@@ -1,341 +1,218 @@
+
 import { useState } from "react";
-import Header from "@/components/Header";
 import conferencesData from "@/data/conferences.yml";
 import { Conference } from "@/types/conference";
-import { Calendar as CalendarIcon, Tag, CircleDot, Globe, Clock } from "lucide-react";
+import { Calendar as CalendarIcon, Tag } from "lucide-react";
 import { Calendar } from "@/components/ui/calendar";
-import { parseISO, format, isValid, isSameMonth } from "date-fns";
+import { parseISO, format, isValid, isSameMonth, isSameYear, isSameDay } from "date-fns";
+import { Toggle } from "@/components/ui/toggle";
 
 const CalendarPage = () => {
   const [selectedDate, setSelectedDate] = useState<Date | undefined>(new Date());
-  const [hoveredDate, setHoveredDate] = useState<Date | undefined>(undefined);
-  const [searchQuery, setSearchQuery] = useState("");
+  const [isYearView, setIsYearView] = useState(false);
   
-  // Handle month change
-  const handleMonthChange = (date: Date) => {
-    setSelectedDate(date);
-  };
-
   // Helper function to safely parse dates
-  const safeParseISO = (dateString: string | undefined | number | Date): Date | null => {
+  const safeParseISO = (dateString: string | undefined | number): Date | null => {
     if (!dateString || dateString === 'TBD') return null;
-    
-    // If it's already a Date object, return it
-    if (dateString instanceof Date) {
-      return isValid(dateString) ? dateString : null;
-    }
-    
     const dateStr = typeof dateString === 'number' ? dateString.toString() : dateString;
     
     try {
-      // First try to parse the date directly
-      let parsedDate = parseISO(dateStr);
-      
-      // If that fails, try to parse various date formats
-      if (!isValid(parsedDate)) {
-        // Try to parse formats like "July 11-19, 2025" or "Sept 9-12, 2025"
-        const match = dateStr.match(/([A-Za-z]+)\s+(\d+)(?:-\d+)?,\s*(\d{4})/);
-        if (match) {
-          const [_, month, day, year] = match;
-          const normalizedDate = `${year}-${month}-${day.padStart(2, '0')}`;
-          parsedDate = parseISO(normalizedDate);
-        }
-      }
-      
+      const normalizedDate = dateStr.replace(/(\d{4})-(\d{1})-(\d{1,2})/, '$1-0$2-$3')
+                                  .replace(/(\d{4})-(\d{2})-(\d{1})/, '$1-$2-0$3');
+      const parsedDate = parseISO(normalizedDate);
       return isValid(parsedDate) ? parsedDate : null;
     } catch (error) {
-      // Only log error if it's not already a Date object
-      if (!(dateString instanceof Date)) {
-        console.error("Error parsing date:", dateString);
-      }
+      console.error("Error parsing date:", dateString);
       return null;
     }
   };
 
-  // Get events for a specific date
-  const getEventsForDate = (date: Date) => {
-    return conferencesData.filter((conf: Conference) => {
-      const deadlineDate = safeParseISO(conf.deadline);
-      
-      // Parse conference dates from the 'date' field
-      let startDate = null;
-      let endDate = null;
-      
-      if (conf.date) {
-        const dates = conf.date.split(/[-–]/); // Split on both hyphen types
-        const startDateStr = dates[0].trim();
-        const endDateMatch = dates[1]?.match(/(\d+),?\s*(\d{4})/);
-        
-        // Parse start date
-        const startMatch = startDateStr.match(/([A-Za-z]+)\s+(\d+)/);
-        if (startMatch) {
-          const [_, month, day] = startMatch;
-          const year = endDateMatch ? endDateMatch[2] : startDateStr.match(/\d{4}/)?.[0];
-          if (year) {
-            startDate = new Date(`${year}-${month}-${day.padStart(2, '0')}`);
-          }
-        }
-        
-        // Parse end date if it exists
-        if (endDateMatch) {
-          const [_, day, year] = endDateMatch;
-          const month = startMatch?.[1]; // Use same month as start date
-          if (month) {
-            endDate = new Date(`${year}-${month}-${day.padStart(2, '0')}`);
-          }
-        }
-      }
-
-      const isDeadlineOnDate = deadlineDate && 
-        format(deadlineDate, 'yyyy-MM-dd') === format(date, 'yyyy-MM-dd');
-      
-      let isConferenceOnDate = false;
-      if (startDate && endDate) {
-        const currentDate = new Date(date);
-        currentDate.setHours(0, 0, 0, 0);
-        startDate.setHours(0, 0, 0, 0);
-        endDate.setHours(0, 0, 0, 0);
-        isConferenceOnDate = currentDate >= startDate && currentDate <= endDate;
-      } else if (startDate) {
-        isConferenceOnDate = format(startDate, 'yyyy-MM-dd') === format(date, 'yyyy-MM-dd');
-      }
-
-      return isDeadlineOnDate || isConferenceOnDate;
-    });
-  };
-
-  // Get all events (conferences and deadlines) for a given month
-  const getMonthEvents = (date: Date) => {
+  // Get events for the current month/year
+  const getEvents = (date: Date) => {
     return conferencesData.filter((conf: Conference) => {
       const deadlineDate = safeParseISO(conf.deadline);
       const startDate = safeParseISO(conf.start);
       const endDate = safeParseISO(conf.end);
 
-      // Check if deadline is in the selected month
-      const deadlineInMonth = deadlineDate && isSameMonth(deadlineDate, date);
+      const dateMatches = isYearView ? isSameYear : isSameMonth;
+
+      // Check if deadline is in the selected period
+      const deadlineInPeriod = deadlineDate && dateMatches(deadlineDate, date);
       
-      // Check if any part of the conference falls in the selected month
-      let conferenceInMonth = false;
+      // Check if any part of the conference falls in the selected period
+      let conferenceInPeriod = false;
       if (startDate && endDate) {
-        // For multi-day conferences, check if any day falls in the selected month
         let currentDate = new Date(startDate);
         while (currentDate <= endDate) {
-          if (isSameMonth(currentDate, date)) {
-            conferenceInMonth = true;
+          if (dateMatches(currentDate, date)) {
+            conferenceInPeriod = true;
             break;
           }
           currentDate.setDate(currentDate.getDate() + 1);
         }
       } else if (startDate) {
-        conferenceInMonth = isSameMonth(startDate, date);
+        conferenceInPeriod = dateMatches(startDate, date);
       }
 
-      return deadlineInMonth || conferenceInMonth;
+      return deadlineInPeriod || conferenceInPeriod;
     });
   };
 
-  // Update getDatesWithEvents to use the same date parsing logic
-  const getDatesWithEvents = () => {
-    const dates = {
-      conferences: new Set<string>(),
-      deadlines: new Set<string>()
-    };
-    
-    conferencesData.forEach((conf: Conference) => {
-      // Handle deadline dates
-      if (conf.deadline && conf.deadline !== 'TBD') {
-        const deadlineDate = parseISO(conf.deadline);
-        if (isValid(deadlineDate)) {
-          dates.deadlines.add(format(deadlineDate, 'yyyy-MM-dd'));
-        }
-      }
+  // Get all events for day indicators
+  const getDayEvents = (date: Date) => {
+    return conferencesData.reduce((acc, conf) => {
+      const deadlineDate = safeParseISO(conf.deadline);
+      const startDate = safeParseISO(conf.start);
+      const endDate = safeParseISO(conf.end);
 
-      // Handle conference dates
-      if (conf.date) {
-        const [startStr, endStr] = conf.date.split(/[-–]/);
-        const startMatch = startStr.trim().match(/([A-Za-z]+)\s+(\d+)/);
-        
-        if (startMatch) {
-          const [_, month, startDay] = startMatch;
-          let year = conf.year?.toString() || '';
-          
-          if (endStr) {
-            const endMatch = endStr.trim().match(/(\d+)?,?\s*(\d{4})/);
-            if (endMatch) {
-              year = endMatch[2];
-            }
-          }
+      if (deadlineDate && isSameDay(deadlineDate, date)) {
+        acc.deadlines.push(conf);
+      }
 
-          if (year) {
-            const startDate = new Date(`${year}-${month}-${startDay.padStart(2, '0')}`);
-            
-            if (isValid(startDate)) {
-              let currentDate = new Date(startDate);
-              
-              // If there's an end date, mark all dates in between
-              if (endStr) {
-                const endMatch = endStr.trim().match(/(\d+)?,?\s*(\d{4})/);
-                if (endMatch) {
-                  const endDay = endMatch[1];
-                  const endDate = new Date(`${year}-${month}-${endDay.padStart(2, '0')}`);
-                  
-                  while (currentDate <= endDate) {
-                    dates.conferences.add(format(currentDate, 'yyyy-MM-dd'));
-                    currentDate.setDate(currentDate.getDate() + 1);
-                  }
-                }
-              } else {
-                // Single day conference
-                dates.conferences.add(format(currentDate, 'yyyy-MM-dd'));
-              }
-            }
-          }
+      if (startDate && endDate) {
+        if (date >= startDate && date <= endDate) {
+          acc.conferences.push(conf);
         }
+      } else if (startDate && isSameDay(startDate, date)) {
+        acc.conferences.push(conf);
       }
-    });
 
-    return {
-      conferences: Array.from(dates.conferences).map(date => parseISO(date)),
-      deadlines: Array.from(dates.deadlines).map(date => parseISO(date))
-    };
+      return acc;
+    }, { deadlines: [], conferences: [] } as { deadlines: Conference[], conferences: Conference[] });
   };
 
-  const monthEvents = selectedDate ? getMonthEvents(selectedDate) : [];
-  const datesWithEvents = getDatesWithEvents();
+  const events = selectedDate ? getEvents(selectedDate) : [];
 
-  // Render event details for a specific date
-  const renderEventDetails = (date: Date) => {
-    const events = getEventsForDate(date);
-    if (!events.length) return null;
+  // Custom day content renderer
+  const renderDayContent = (day: Date) => {
+    const dayEvents = getDayEvents(day);
+    const hasDeadlines = dayEvents.deadlines.length > 0;
+    const hasConferences = dayEvents.conferences.length > 0;
 
     return (
-      <div className="space-y-4">
-        <h3 className="font-semibold text-lg">
-          Events on {format(date, 'MMMM d, yyyy')}
-        </h3>
-        <div className="space-y-3">
-          {events.map((conf, index) => (
-            <div key={index} className="p-4 bg-white rounded-lg shadow-sm border border-neutral-200">
-              <h4 className="font-medium text-base">{conf.title}</h4>
-              {conf.full_name && (
-                <p className="text-sm text-neutral-600 mt-1">{conf.full_name}</p>
-              )}
-              <div className="mt-2 space-y-1 text-sm">
-                <p className="flex items-center gap-2">
-                  <CalendarIcon className="h-4 w-4" />
-                  {conf.date}
-                </p>
-                <p className="flex items-center gap-2">
-                  <Globe className="h-4 w-4" />
-                  {conf.place}
-                </p>
-                {conf.deadline && conf.deadline !== 'TBD' && (
-                  <p className="flex items-center gap-2 text-red-600">
-                    <Clock className="h-4 w-4" />
-                    Deadline: {format(parseISO(conf.deadline), 'PPP')} ({conf.timezone})
-                  </p>
-                )}
-                {conf.tags && (
-                  <div className="flex items-center gap-2 mt-2 flex-wrap">
-                    <Tag className="h-4 w-4" />
-                    {Array.isArray(conf.tags) ? (
-                      conf.tags.map((tag, i) => (
-                        <span key={i} className="bg-neutral-100 px-2 py-1 rounded-full text-xs">
-                          {tag}
-                        </span>
-                      ))
-                    ) : (
-                      <span className="bg-neutral-100 px-2 py-1 rounded-full text-xs">
-                        {conf.tags}
-                      </span>
-                    )}
-                  </div>
-                )}
-              </div>
-            </div>
-          ))}
+      <div className="relative w-full h-full flex flex-col items-center">
+        <span className="mb-1">{format(day, 'd')}</span>
+        <div className="absolute bottom-0 left-0 right-0 flex gap-0.5 px-1">
+          {hasDeadlines && (
+            <div className="h-0.5 flex-1 bg-red-500" title="Deadline" />
+          )}
+          {hasConferences && (
+            <div className="h-0.5 flex-1 bg-purple-600" title="Conference" />
+          )}
         </div>
       </div>
     );
   };
 
   return (
-    <div className="min-h-screen bg-neutral-light">
-      <Header onSearch={setSearchQuery} />
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-        <div className="flex gap-8">
-          <div className="bg-white rounded-lg shadow p-6 flex-shrink-0">
+    <div className="min-h-screen bg-neutral-light p-6">
+      <div className="max-w-7xl mx-auto">
+        <div className="flex flex-col items-center mb-8">
+          <h1 className="text-3xl font-bold mb-4">Calendar Overview</h1>
+          <div className="flex items-center gap-4">
+            <Toggle 
+              pressed={!isYearView} 
+              onPressedChange={() => setIsYearView(false)}
+              variant="outline"
+            >
+              Month
+            </Toggle>
+            <Toggle 
+              pressed={isYearView} 
+              onPressedChange={() => setIsYearView(true)}
+              variant="outline"
+            >
+              Year
+            </Toggle>
+          </div>
+        </div>
+
+        <div className="flex justify-center gap-6 mb-6">
+          <div className="flex items-center gap-2">
+            <div className="w-4 h-1 bg-purple-600" />
+            <span>Conference Dates</span>
+          </div>
+          <div className="flex items-center gap-2">
+            <div className="w-4 h-1 bg-red-500" />
+            <span>Submission Deadlines</span>
+          </div>
+        </div>
+
+        <div className="grid grid-cols-1 gap-8">
+          <div className="mx-auto w-full max-w-4xl">
             <Calendar
               mode="single"
               selected={selectedDate}
               onSelect={setSelectedDate}
-              onMonthChange={handleMonthChange}
-              modifiers={{
-                conference: (date) => datesWithEvents.conferences.some(d => 
-                  format(d, 'yyyy-MM-dd') === format(date, 'yyyy-MM-dd')
+              numberOfMonths={isYearView ? 12 : 1}
+              className="bg-white rounded-lg p-6 shadow-sm mx-auto w-full"
+              components={{
+                Day: ({ date, ...props }) => (
+                  <button {...props} className="w-full h-full p-2">
+                    {renderDayContent(date)}
+                  </button>
                 ),
-                deadline: (date) => datesWithEvents.deadlines.some(d => 
-                  format(d, 'yyyy-MM-dd') === format(date, 'yyyy-MM-dd')
-                )
               }}
-              className="bg-white rounded-lg shadow-sm mx-auto"
               classNames={{
-                months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
-                month: "space-y-4 w-full",
+                months: `grid ${isYearView ? 'grid-cols-3 gap-4' : ''} justify-center`,
+                month: "space-y-4",
                 caption: "flex justify-center pt-1 relative items-center mb-4",
                 caption_label: "text-lg font-semibold",
                 table: "w-full border-collapse space-y-1",
                 head_row: "flex",
-                head_cell: "text-muted-foreground rounded-md w-14 font-normal text-[0.8rem]",
+                head_cell: "text-muted-foreground rounded-md w-10 font-normal text-[0.8rem]",
                 row: "flex w-full mt-2",
-                cell: "h-14 w-14 text-center text-sm p-0 relative [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
-                day: "h-14 w-14 p-0 font-normal aria-selected:opacity-100 hover:bg-neutral-100 rounded-lg transition-colors",
+                cell: `h-10 w-10 text-center text-sm p-0 relative focus-within:relative focus-within:z-20 
+                      [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md 
+                      last:[&:has([aria-selected])]:rounded-r-md hover:bg-neutral-50`,
+                day: "h-10 w-10 p-0 font-normal hover:bg-neutral-100 rounded-lg transition-colors",
                 day_today: "bg-neutral-100 text-primary font-semibold",
                 nav: "space-x-1 flex items-center",
                 nav_button: "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100",
                 nav_button_previous: "absolute left-1",
                 nav_button_next: "absolute right-1",
               }}
-              modifiersStyles={{
-                conference: {
-                  backgroundColor: '#DDD6FE',
-                  color: '#7C3AED',
-                  fontWeight: 'bold'
-                },
-                deadline: {
-                  backgroundColor: '#FEE2E2',
-                  color: '#EF4444',
-                  fontWeight: 'bold'
-                }
-              }}
-              components={{
-                Day: (props) => (
-                  <button
-                    {...props}
-                    onMouseEnter={() => setHoveredDate(props.date)}
-                    onMouseLeave={() => setHoveredDate(undefined)}
-                  />
-                )
-              }}
             />
-            
-            <div className="mt-4 space-y-2">
-              <div className="flex justify-center gap-6 mb-6">
-                <div className="flex items-center gap-2">
-                  <CircleDot className="h-4 w-4 text-purple-600" />
-                  <span>Conference Dates</span>
-                </div>
-                <div className="flex items-center gap-2">
-                  <CircleDot className="h-4 w-4 text-red-500" />
-                  <span>Submission Deadlines</span>
-                </div>
-              </div>
-            </div>
           </div>
 
-          <div className="flex-grow">
-            {(hoveredDate || selectedDate) && renderEventDetails(hoveredDate || selectedDate)}
-          </div>
+          {selectedDate && events.length > 0 && (
+            <div className="mx-auto w-full max-w-3xl space-y-4">
+              <h2 className="text-xl font-semibold flex items-center gap-2">
+                <CalendarIcon className="h-5 w-5" />
+                Events in {format(selectedDate, isYearView ? 'yyyy' : 'MMMM yyyy')}
+              </h2>
+              <div className="space-y-4">
+                {events.map((conf: Conference) => (
+                  <div key={conf.id} className="bg-white p-4 rounded-lg shadow-sm">
+                    <h3 className="font-semibold text-lg">{conf.title}</h3>
+                    <div className="space-y-1">
+                      {conf.deadline && safeParseISO(conf.deadline) && (
+                        <p className="text-red-500">
+                          Submission Deadline: {format(safeParseISO(conf.deadline)!, 'MMMM d, yyyy')}
+                        </p>
+                      )}
+                      {conf.start && (
+                        <p className="text-purple-600">
+                          Conference Date: {format(safeParseISO(conf.start)!, 'MMMM d')}
+                          {conf.end ? ` - ${format(safeParseISO(conf.end)!, 'MMMM d, yyyy')}` : 
+                            `, ${format(safeParseISO(conf.start)!, 'yyyy')}`}
+                        </p>
+                      )}
+                    </div>
+                    <div className="mt-2 flex flex-wrap gap-2">
+                      {conf.tags.map((tag) => (
+                        <span key={tag} className="inline-flex items-center px-2 py-1 rounded-full 
+                          text-xs bg-neutral-100">
+                          <Tag className="h-3 w-3 mr-1" />
+                          {tag}
+                        </span>
+                      ))}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
         </div>
       </div>
     </div>