Improve calendar tab

src/components/ConferenceCalendar.tsx

@@ -0,0 +1,144 @@
+import { useState } from "react";
+import { Calendar } from "@/components/ui/calendar";
+import { Conference } from "@/types/conference";
+import { parseISO, format, parse, startOfMonth } from "date-fns";
+
+interface ConferenceCalendarProps {
+  conferences: Conference[];
+}
+
+const ConferenceCalendar = ({ conferences }: ConferenceCalendarProps) => {
+  const [selectedDate, setSelectedDate] = useState<Date | undefined>(undefined);
+  const [currentMonth, setCurrentMonth] = useState<Date>(new Date());
+
+  // Handle month change
+  const handleMonthChange = (month: Date) => {
+    setCurrentMonth(month);
+    setSelectedDate(undefined); // Clear selected date when changing months
+  };
+
+  // Convert conference dates to calendar events
+  const conferenceEvents = conferences.map(conf => {
+    let startDate: Date | null = null;
+    
+    try {
+      // First try to use the start field if it exists
+      if (conf.start) {
+        startDate = parseISO(conf.start);
+      } 
+      // If no start field or it failed, try to parse the date field
+      else if (conf.date) {
+        // Handle various date formats
+        const dateStr = conf.date.split('–')[0].split('-')[0].trim(); // Get first date in range
+        
+        // Try different date formats
+        try {
+          // Try "MMM d, yyyy" format (e.g., "Feb 28, 2025")
+          startDate = parse(dateStr, 'MMM d, yyyy', new Date());
+        } catch {
+          try {
+            // Try "MMMM d, yyyy" format (e.g., "February 28, 2025")
+            startDate = parse(dateStr, 'MMMM d, yyyy', new Date());
+          } catch {
+            // If all else fails, try ISO format
+            startDate = parseISO(dateStr);
+          }
+        }
+      }
+
+      // Only return event if we successfully parsed a date
+      if (startDate && isValidDate(startDate)) {
+        return {
+          date: startDate,
+          title: conf.title,
+          conference: conf
+        };
+      }
+      return null;
+    } catch (error) {
+      console.warn(`Failed to parse date for conference ${conf.title}:`, error);
+      return null;
+    }
+  }).filter(event => event !== null); // Remove any null events
+
+  // Helper function to check if date is valid
+  function isValidDate(date: Date) {
+    return date instanceof Date && !isNaN(date.getTime());
+  }
+
+  // Get events for the selected date
+  const getEventsForDate = (date: Date) => {
+    if (!date || !isValidDate(date)) return [];
+    return conferenceEvents.filter(event => 
+      event && event.date && 
+      format(event.date, 'yyyy-MM-dd') === format(date, 'yyyy-MM-dd')
+    );
+  };
+
+  // Get events for the current month
+  const getEventsForMonth = (date: Date) => {
+    return conferenceEvents.filter(event => 
+      event && event.date && 
+      format(event.date, 'yyyy-MM') === format(date, 'yyyy-MM')
+    );
+  };
+
+  // Create footer content
+  const footer = (
+    <div className="mt-3">
+      <h3 className="font-medium">
+        Events in {format(currentMonth, 'MMMM yyyy')}:
+      </h3>
+      {getEventsForMonth(currentMonth).length > 0 ? (
+        <ul className="mt-2 space-y-1">
+          {getEventsForMonth(currentMonth).map((event, index) => (
+            <li key={index} className="text-sm">
+              {event.title} ({format(event.date, 'MMM d')}) - {event.conference.place}
+            </li>
+          ))}
+        </ul>
+      ) : (
+        <p className="text-sm text-muted-foreground">No events this month</p>
+      )}
+      {selectedDate && (
+        <div className="mt-4">
+          <h3 className="font-medium">
+            Events on {format(selectedDate, 'MMMM d, yyyy')}:
+          </h3>
+          {getEventsForDate(selectedDate).length > 0 ? (
+            <ul className="mt-2 space-y-1">
+              {getEventsForDate(selectedDate).map((event, index) => (
+                <li key={index} className="text-sm">
+                  {event.title} - {event.conference.place}
+                </li>
+              ))}
+            </ul>
+          ) : (
+            <p className="text-sm text-muted-foreground">No events on this date</p>
+          )}
+        </div>
+      )}
+    </div>
+  );
+
+  return (
+    <div className="flex flex-col items-center space-y-4 p-4">
+      <Calendar
+        mode="single"
+        selected={selectedDate}
+        onSelect={setSelectedDate}
+        footer={footer}
+        month={currentMonth}
+        onMonthChange={handleMonthChange}
+        modifiers={{
+          event: (date) => getEventsForDate(date).length > 0
+        }}
+        modifiersStyles={{
+          event: { fontWeight: 'bold', textDecoration: 'underline' }
+        }}
+      />
+    </div>
+  );
+};
+
+export default ConferenceCalendar; 

src/components/ui/calendar.tsx

@@ -16,9 +16,9 @@ function Calendar({
   return (
     <DayPicker
       showOutsideDays={showOutsideDays}
-      className={cn("p-3", className)}
+      className={cn("p-3 mx-auto", className)}
       classNames={{
-        months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
+        months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0 justify-center",
         month: "space-y-4",
         caption: "flex justify-center pt-1 relative items-center",
         caption_label: "text-sm font-medium",

src/pages/Calendar.tsx

@@ -1,4 +1,3 @@
-
 import { useState } from "react";
 import conferencesData from "@/data/conferences.yml";
 import { Conference } from "@/types/conference";
@@ -9,6 +8,11 @@ import { parseISO, format, isValid, isSameMonth } from "date-fns";
 const CalendarPage = () => {
   const [selectedDate, setSelectedDate] = useState<Date | undefined>(new Date());
   
+  // Handle month change
+  const handleMonthChange = (date: Date) => {
+    setSelectedDate(date);
+  };
+
   // Helper function to safely parse dates
   const safeParseISO = (dateString: string | undefined | number): Date | null => {
     if (!dateString || dateString === 'TBD') return null;
@@ -16,10 +20,20 @@ const CalendarPage = () => {
     const dateStr = typeof dateString === 'number' ? dateString.toString() : dateString;
     
     try {
-      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');
+      // 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 parsedDate = parseISO(normalizedDate);
       return isValid(parsedDate) ? parsedDate : null;
     } catch (error) {
       console.error("Error parsing date:", dateString);
@@ -94,92 +108,104 @@ const CalendarPage = () => {
   const datesWithEvents = getDatesWithEvents();
 
   return (
-    <div className="min-h-screen bg-neutral-light p-6">
-      <div className="max-w-7xl mx-auto">
-        <h1 className="text-3xl font-bold mb-8 text-center">Calendar Overview</h1>
-        
-        <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 className="container mx-auto px-4 py-8">
+      <div className="flex flex-col lg:flex-row gap-8">
+        <div className="w-full lg:w-auto">
+          <Calendar
+            mode="single"
+            selected={selectedDate}
+            onSelect={setSelectedDate}
+            onMonthChange={handleMonthChange}
+            modifiers={{
+              hasConference: (date) => datesWithEvents.conferences.some(d => 
+                format(d, 'yyyy-MM-dd') === format(date, 'yyyy-MM-dd')
+              ),
+              hasDeadline: (date) => datesWithEvents.deadlines.some(d => 
+                format(d, 'yyyy-MM-dd') === format(date, 'yyyy-MM-dd')
+              )
+            }}
+            className="bg-white rounded-lg p-6 shadow-sm mx-auto w-full"
+            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",
+              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]",
+              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",
+              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'
+              }
+            }}
+          />
+          
+          <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="grid grid-cols-1 gap-8">
-          <div className="mx-auto w-full max-w-3xl">
-            <Calendar
-              mode="single"
-              selected={selectedDate}
-              onSelect={setSelectedDate}
-              className="bg-white rounded-lg p-6 shadow-sm mx-auto w-full"
-              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",
-                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]",
-                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",
-                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",
-              }}
-              modifiers={{
-                conference: datesWithEvents.conferences,
-                deadline: datesWithEvents.deadlines
-              }}
-              modifiersStyles={{
-                conference: {
-                  backgroundColor: '#DDD6FE',
-                  color: '#7C3AED',
-                  fontWeight: 'bold'
-                },
-                deadline: {
-                  backgroundColor: '#FEE2E2',
-                  color: '#EF4444',
-                  fontWeight: 'bold'
-                }
-              }}
-            />
-          </div>
+        {selectedDate && (
+          <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, 'MMMM yyyy')}
+            </h2>
+            {monthEvents.length === 0 ? (
+              <p className="text-neutral-600">No events this month.</p>
+            ) : (
+              <div className="space-y-4">
+                {monthEvents.map((conf: Conference) => {
+                  const startDate = safeParseISO(conf.start);
+                  const endDate = safeParseISO(conf.end);
+                  const deadlineDate = safeParseISO(conf.deadline);
 
-          {selectedDate && (
-            <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, 'MMMM yyyy')}
-              </h2>
-              {monthEvents.length === 0 ? (
-                <p className="text-neutral-600">No events this month.</p>
-              ) : (
-                <div className="space-y-4">
-                  {monthEvents.map((conf: Conference) => (
+                  return (
                     <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) && isSameMonth(safeParseISO(conf.deadline)!, selectedDate) && (
+                        {deadlineDate && isSameMonth(deadlineDate, selectedDate) && (
                           <p className="text-red-500">
-                            Submission Deadline: {format(safeParseISO(conf.deadline)!, 'MMMM d, yyyy')}
+                            Submission Deadline: {format(deadlineDate, 'MMMM d, yyyy')}
                           </p>
                         )}
-                        {conf.start && (
+                        {startDate && (
                           <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')}`}
+                            Conference Date: {format(startDate, 'MMMM d')}
+                            {endDate ? 
+                              ` - ${format(endDate, 'MMMM d, yyyy')}` : 
+                              `, ${format(startDate, 'yyyy')}`
+                            }
                           </p>
                         )}
                       </div>
                       <div className="mt-2 flex flex-wrap gap-2">
-                        {conf.tags.map((tag) => (
+                        {Array.isArray(conf.tags) && conf.tags.map((tag) => (
                           <span key={tag} className="tag text-sm">
                             <Tag className="h-3 w-3 mr-1" />
                             {tag}
@@ -187,12 +213,12 @@ const CalendarPage = () => {
                         ))}
                       </div>
                     </div>
-                  ))}
-                </div>
-              )}
-            </div>
-          )}
-        </div>
+                  );
+                })}
+              </div>
+            )}
+          </div>
+        )}
       </div>
     </div>
   );

src/pages/Index.tsx

@@ -6,6 +6,7 @@ import { Conference } from "@/types/conference";
 import { useState, useMemo, useEffect } from "react";
 import { Switch } from "@/components/ui/switch"
 import { parseISO, isValid, isPast } from "date-fns";
+import ConferenceCalendar from "@/components/ConferenceCalendar";
 
 const Index = () => {
   const [selectedTag, setSelectedTag] = useState("All");
@@ -78,6 +79,7 @@ const Index = () => {
             <ConferenceCard key={conference.id} {...conference} />
           ))}
         </div>
+        <ConferenceCalendar conferences={filteredConferences} />
       </main>
     </div>
   );