Replace custom calendar with react-calendar

Replace the custom calendar component with `react-calendar` in the `Calendar` component.

* **Calendar Component:**
  - Import `Calendar` from `react-calendar`.
  - Replace the custom calendar grid with the `react-calendar` component.
  - Map events to `react-calendar`'s tile content.

* **Community Component:**
  - Update the import statement to use `CustomCalendar` instead of `Calendar`.
  - Ensure the `CustomCalendar` component is used with the correct props.

* **Dependencies:**
  - Add `react-calendar` to `package.json` and `package-lock.json`.

Author: Nathan-Bransby-NMT

package-lock.json

@@ -15,9 +15,10 @@
     "@fortawesome/free-regular-svg-icons": "^6.7.2",
     "@fortawesome/free-solid-svg-icons": "^6.7.2",
     "@fortawesome/react-fontawesome": "^0.2.2",
-    "papaparse": "^5.3.0",
     "lucide-react": "^0.344.0",
+    "papaparse": "^5.3.0",
     "react": "^18.3.1",
+    "react-calendar": "^5.1.0",
     "react-dom": "^18.3.1",
     "react-router-dom": "^7.2.0"
   },
@@ -31,11 +32,11 @@
     "eslint-plugin-react-hooks": "^5.1.0-rc.0",
     "eslint-plugin-react-refresh": "^0.4.11",
     "globals": "^15.9.0",
+    "lucide-react": "^0.344.0",
     "postcss": "^8.4.35",
     "tailwindcss": "^3.4.1",
     "typescript": "^5.5.3",
     "typescript-eslint": "^8.3.0",
-    "vite": "^5.4.2",
-    "lucide-react": "^0.344.0"
+    "vite": "^5.4.2"
   }
 }

package.json

@@ -1,4 +1,5 @@
 import React from 'react';
+import Calendar from 'react-calendar';
 
 interface Event {
   date: string;
@@ -9,36 +10,20 @@ interface CalendarProps {
   events: Event[];
 }
 
-const Calendar: React.FC<CalendarProps> = ({ events }) => {
-  const renderCalendar = () => {
-    // Create a calendar grid for 2025
-    const months = [
-      'January', 'February', 'March', 'April', 'May', 'June',
-      'July', 'August', 'September', 'October', 'November'
-    ];
-
-    return months.map((month, index) => (
-      <div key={index} className="calendar-month">
-        <h3 className="text-lg font-bold mb-2">{month}</h3>
-        <div className="calendar-grid">
-          {events
-            .filter(event => new Date(event.date).getMonth() === index)
-            .map((event, idx) => (
-              <div key={idx} className="calendar-event">
-                <span>{new Date(event.date).getDate()}</span>
-                <span>{event.title}</span>
-              </div>
-            ))}
-        </div>
-      </div>
-    ));
+const CustomCalendar: React.FC<CalendarProps> = ({ events }) => {
+  const tileContent = ({ date, view }: { date: Date; view: string }) => {
+    if (view === 'month') {
+      const event = events.find(event => new Date(event.date).toDateString() === date.toDateString());
+      return event ? <div className="calendar-event">{event.title}</div> : null;
+    }
+    return null;
   };
 
   return (
     <div className="calendar-container">
-      {renderCalendar()}
+      <Calendar tileContent={tileContent} />
     </div>
   );
 };
 
-export default Calendar;
+export default CustomCalendar;

src/components/Calendar.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import Calendar from './Calendar';
+import CustomCalendar from './Calendar';
 import UpcomingEvents from './UpcomingEvents';
 import { fetchEvents } from '../utils/events';
 
@@ -21,7 +21,7 @@ const Community: React.FC = () => {
       <p className="text-xl text-gray-600">
         Welcome to the community page! Here you can find information about our community events, forums, and how to get involved.
       </p>
-      <Calendar events={events} />
+      <CustomCalendar events={events} />
       <UpcomingEvents events={events} />
     </div>
   );