EventCalendar.tsx

import React, { useState } from "react";
import FullCalendar from "@fullcalendar/react";
import dayGridPlugin from "@fullcalendar/daygrid";
import { EventClickArg } from "@fullcalendar/core";

interface EventData {
  date: string;
  events: string[];
}

const eventsData: EventData[] = [
  { date: "2025-03-12", events: ["Meeting with Client", "Product Demo"] },
  { date: "2025-03-15", events: ["Sprint Planning", "Team Lunch"] },
  { date: "2025-03-18", events: ["Conference Call", "Code Review"] }
];

// Convert JSON data to FullCalendar format
const formattedEvents = eventsData.flatMap(({ date, events }) =>
  events.map((event) => ({
    title: event,
    start: date,
    allDay: true
  }))
);

const EventCalendar: React.FC = () => {
  const [selectedEvent, setSelectedEvent] = useState<string | null>(null);

  const handleEventClick = (clickInfo: EventClickArg) => {
    setSelectedEvent(clickInfo.event.title);
  };

  return (
    <div style={{ maxWidth: "800px", margin: "auto", textAlign: "center" }}>
      <FullCalendar
        plugins={[dayGridPlugin]}
        initialView="dayGridMonth"
        events={formattedEvents}
        eventClick={handleEventClick}
      />

      {selectedEvent && (
        <div style={{ marginTop: "20px", padding: "10px", background: "#f0f0f0" }}>
          <h3>Selected Event</h3>
          <p>{selectedEvent}</p>
        </div>
      )}
    </div>
  );
};

export default EventCalendar;