321 lines
18 KiB
JavaScript
321 lines
18 KiB
JavaScript
'use client'
|
||
import Link from 'next/link'
|
||
import moment from "moment";
|
||
import { useState } from "react"
|
||
|
||
export default function UpcomingEventData() {
|
||
const [currentMonth, setCurrentMonth] = useState(moment());
|
||
|
||
// Events normalized with YYYY-MM-DD format
|
||
const events = [
|
||
{
|
||
id: 1,
|
||
date: "2024-01-14",
|
||
time: "05:30 PM",
|
||
title: "Thai Pongal 2024",
|
||
location: "Holy Family Croatian Roman Catholic Parish Hall, Kitchener, Canada",
|
||
image: "/assets/img/event/upcoming-event/thai-pongal.webp",
|
||
url: "#",
|
||
},
|
||
{
|
||
id: 2,
|
||
date: "2024-04-14",
|
||
title: "AGM",
|
||
location: "Christ Lutheran Church, Waterloo, ON",
|
||
image: "/assets/img/event/upcoming-event/agm.webp",
|
||
url: "#",
|
||
},
|
||
{
|
||
id: 3,
|
||
date: "2024-06-22",
|
||
title: "KW Multicultural Festival",
|
||
location: "Indian & Sri Lankan Food Court, Victoria Park, Kitchener, ON",
|
||
image: "/assets/img/event/upcoming-event/kw.webp",
|
||
url: "#",
|
||
},
|
||
{
|
||
id: 4,
|
||
date: "2024-07-07",
|
||
time: "10:00 AM",
|
||
title: "TCA Picnic – Potlock",
|
||
location: "Pinehurst Lake – Sutor Shelter, Ayr, ON",
|
||
image: "/assets/img/event/upcoming-event/picnic.webp",
|
||
url: "#",
|
||
},
|
||
{
|
||
id: 5,
|
||
date: "2024-07-27",
|
||
title: "South Asian Family Sports Day",
|
||
location: "Waterloo Park, Waterloo, ON",
|
||
image: "/assets/img/event/upcoming-event/sports.webp",
|
||
url: "#",
|
||
},
|
||
{
|
||
id: 6,
|
||
date: "2023-08-23",
|
||
time: "06:30-08:30 PM",
|
||
title: "Conestoga College Workshop",
|
||
location: "Conestoga College – WC 241, Doon Campus, Ontario",
|
||
image: "/assets/img/event/upcoming-event/workshop.webp",
|
||
url: "#",
|
||
},
|
||
{
|
||
id: 7,
|
||
date: "2023-08-23",
|
||
time: "06:30-08:30 PM",
|
||
title: "Tamil Cultural Nite",
|
||
location: "Doon Campus, Ontario (TBA)",
|
||
image: "/assets/img/event/upcoming-event/cultural.webp",
|
||
url: "#",
|
||
},
|
||
{
|
||
id: 8,
|
||
date: "2024-10-26",
|
||
time: "1.00 PM-4.30 PM",
|
||
title: "TCA – WPL Deepavali Celebrations",
|
||
location: "Waterloo Public Library, John M. Harper Branch",
|
||
image: "/assets/img/event/upcoming-event/deepavali.webp",
|
||
url: "#",
|
||
},
|
||
{
|
||
id: 9,
|
||
date: "2024-12-21",
|
||
time: "05:00 PM-09:00 PM",
|
||
title: "Christmas & 2024 Year End Celebration",
|
||
location: "RIM Park, 2001 University Ave E, Waterloo, ON",
|
||
image: "/assets/img/event/upcoming-event/christmas.webp",
|
||
url: "#",
|
||
},
|
||
];
|
||
|
||
// Get start and end of current month
|
||
const startOfMonth = currentMonth.clone().startOf("month");
|
||
const endOfMonth = currentMonth.clone().endOf("month");
|
||
|
||
// Generate calendar days
|
||
const daysInMonth = [];
|
||
for (let i = 0; i < startOfMonth.day(); i++) {
|
||
daysInMonth.push(null);
|
||
}
|
||
for (let i = 1; i <= endOfMonth.date(); i++) {
|
||
daysInMonth.push(moment(currentMonth).date(i));
|
||
}
|
||
|
||
// Get events for a given date
|
||
const getEventForDate = (date) => {
|
||
const dateString = date?.format("YYYY-MM-DD");
|
||
return events.filter(event => event.date === dateString);
|
||
};
|
||
|
||
// Navigate months
|
||
const handleMonthChange = (direction) => {
|
||
setCurrentMonth(currentMonth.clone().add(direction, "months"));
|
||
};
|
||
|
||
return (
|
||
<div className="event3-section-area sp4">
|
||
<div className="container">
|
||
<div className="row">
|
||
<div className="col-lg-6 m-auto">
|
||
<div className="event2-header heading5 text-center space-margin60">
|
||
<h2 className="text-anime-style-3">Upcoming Events</h2>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="row">
|
||
{/* Calendar (left side) */}
|
||
<div className="col-12 col-lg-3">
|
||
<div className="d-flex justify-content-between align-items-center">
|
||
<button
|
||
className="vl-btn4"
|
||
onClick={() => handleMonthChange(-1)}
|
||
>
|
||
Prev
|
||
</button>
|
||
<span className="mx-3 fw-700">
|
||
{currentMonth.format("MMMM YYYY")}
|
||
</span>
|
||
<button
|
||
className="vl-btn4"
|
||
onClick={() => handleMonthChange(1)}
|
||
>
|
||
Next
|
||
</button>
|
||
</div>
|
||
|
||
<table className="table table-bordered mt-4" style={{ tableLayout: "fixed" }}>
|
||
<thead>
|
||
<tr>
|
||
{["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"].map((day, index) => (
|
||
<th key={index} className="text-center">
|
||
{day}
|
||
</th>
|
||
))}
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{Array.from({ length: Math.ceil(daysInMonth.length / 7) }, (_, rowIndex) => (
|
||
<tr key={rowIndex}>
|
||
{daysInMonth
|
||
.slice(rowIndex * 7, (rowIndex + 1) * 7)
|
||
.map((day, index) => {
|
||
const eventList = getEventForDate(day);
|
||
return (
|
||
<td
|
||
key={index}
|
||
style={{
|
||
cursor: day ? "default" : "not-allowed",
|
||
backgroundColor: eventList.length > 0 ? "#ce2029" : "white",
|
||
color: eventList.length > 0 ? "white" : "black",
|
||
}}
|
||
title={
|
||
eventList.length > 0
|
||
? eventList.map(e => e.title).join("\n")
|
||
: ""
|
||
}
|
||
>
|
||
{day ? (
|
||
<div style={{ width: "100%", height: "100%" }}>
|
||
<span className="text-end d-block">{day.date()}</span>
|
||
</div>
|
||
) : (
|
||
""
|
||
)}
|
||
</td>
|
||
);
|
||
})}
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
|
||
|
||
<div className="col-lg-9" data-aos="fade-up" data-aos-duration={1000}>
|
||
|
||
<div className="tab-content" id="pills-tabContent">
|
||
<div className={"tab-pane fade show active tab-pane fade"} id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab" tabIndex={0}>
|
||
<div className="event-widget-area">
|
||
|
||
|
||
|
||
|
||
{events.map((event, idx) => {
|
||
const isEven = (idx + 1) % 2 === 0; // check even/odd index
|
||
|
||
return (
|
||
<div key={event.id} className="mb-5">
|
||
<div className="row align-items-center">
|
||
<div className="col-lg-1" />
|
||
<div className="col-lg-10 m-auto">
|
||
<div className="event2-boxarea box1 d-flex flex-wrap align-items-center">
|
||
<h1 className="active me-3">{String(idx + 1).padStart(2, "0")}</h1>
|
||
|
||
{/* First Event (Odd): Image Left | Even Event: Image Right */}
|
||
{!isEven ? (
|
||
<>
|
||
{/* IMAGE LEFT */}
|
||
<div className="col-lg-5">
|
||
<div className="img1">
|
||
<img src={event.image} alt={event.title} />
|
||
</div>
|
||
</div>
|
||
|
||
<div className="col-lg-1" />
|
||
|
||
{/* CONTENT RIGHT */}
|
||
<div className="col-lg-6">
|
||
<div className="content-area">
|
||
<ul>
|
||
<li>
|
||
<span>
|
||
<img src="/assets/img/icons/clock1.svg" alt="" />{" "}
|
||
{event.time ? `${event.time} - ` : ""}
|
||
{moment(event.date).format("ddd, MMM DD, YYYY")}
|
||
</span>
|
||
</li>
|
||
<li>
|
||
<span>
|
||
<img src="/assets/img/icons/location1.svg" alt="" />{" "}
|
||
{event.location}
|
||
</span>
|
||
</li>
|
||
</ul>
|
||
<div className="space20" />
|
||
<Link href={event.url || "#"} className="head">
|
||
{event.title}
|
||
</Link>
|
||
<div className="space24" />
|
||
<p>{event.location}</p>
|
||
<div className="space24" />
|
||
<div className="btn-area1">
|
||
<Link href={event.url || "#"} className="vl-btn3">
|
||
<span className="demo">Online Tickets</span>
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</>
|
||
) : (
|
||
<>
|
||
{/* CONTENT LEFT */}
|
||
<div className="col-lg-6">
|
||
<div className="content-area">
|
||
<ul>
|
||
<li>
|
||
<span>
|
||
<img src="/assets/img/icons/clock1.svg" alt="" />{" "}
|
||
{event.time ? `${event.time} - ` : ""}
|
||
{moment(event.date).format("ddd, MMM DD, YYYY")}
|
||
</span>
|
||
</li>
|
||
<li>
|
||
<span>
|
||
<img src="/assets/img/icons/location1.svg" alt="" />{" "}
|
||
{event.location}
|
||
</span>
|
||
</li>
|
||
</ul>
|
||
<div className="space20" />
|
||
<Link href={event.url || "#"} className="head">
|
||
{event.title}
|
||
</Link>
|
||
<div className="space24" />
|
||
<p>{event.location}</p>
|
||
<div className="space24" />
|
||
<div className="btn-area1">
|
||
<Link href={event.url || "#"} className="vl-btn3">
|
||
<span className="demo">Online Tickets</span>
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="col-lg-1" />
|
||
|
||
{/* IMAGE RIGHT */}
|
||
<div className="col-lg-5">
|
||
<div className="img1">
|
||
<img src={event.image} alt={event.title} />
|
||
</div>
|
||
</div>
|
||
</>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
})}
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|