743 lines
56 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

'use client'
import Link from 'next/link'
import moment from "moment";
import { useState } from "react"
export default function UpcomingEventData() {
const [isTab, setIsTab] = useState(1)
const handleTab = (i) => {
setIsTab(i)
}
const [currentMonth, setCurrentMonth] = useState(moment());
const events = [
{
id: 1,
date: "Sun Jan-14",
time: "05:30 PM",
title: "Thai Pongal 2024",
url: "#",
},
{
id: 2,
date: "Apr 14, 2024",
title: "AGM",
url: "#",
},
{
id: 3,
date: "Jun 22-23, 2024",
title: "KW Multicultural Festival",
url: "#",
},
{
id: 4,
date: "Sun Jul 7, 2024",
time: "10:00 AM",
title: "TCA Picnic Potlock",
url: "#",
},
{
id: 5,
date: "Jul 27-28, 2024",
title: "South Asian Family Sports Day",
url: "#",
},
{
id: 6,
date: "Aug 23, 2023",
time: "06:30-08:30 PM",
title: "Conestoga College Workshop",
url: "#",
},
{
id: 7,
date: "Aug 23, 2023",
time: "06:30-08:30 PM",
title: "Conestoga College Workshop",
url: "#",
},
{
id: 8,
date: "Sat Oct 26, 2024",
time: "1.00 PM-4.30 PM",
title: "TCA WPL Deepavali Celebrations",
url: "#",
},
{
id: 9,
date: "Sat Dec 21, 2024",
time: "05:00 PM-09:00 PM",
title: "RIM Park",
url: "#",
},
];
// Get the start and end of the current month
const startOfMonth = currentMonth.clone().startOf("month");
const endOfMonth = currentMonth.clone().endOf("month");
// Generate the calendar days
const daysInMonth = [];
for (let i = 0; i < startOfMonth.day(); i++) {
daysInMonth.push(null); // Adding null for empty days before the start of the month
}
for (let i = 1; i <= endOfMonth.date(); i++) {
daysInMonth.push(moment(currentMonth).date(i));
}
// Function to check if a date has an event
const getEventForDate = (date) => {
const dateString = date?.format("YYYY-MM-DD");
return events.filter(event => event.date === dateString);
};
// Function to navigate to the next/previous month
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">
{/* <h5>Event Schedule</h5> */}
<div className="space18" />
<h2 className="text-anime-style-3">Upcoming Events</h2>
</div>
</div>
</div>
<div className="row">
<div className="col-12 col-lg-4">
<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) => (
<td
key={index}
style={{
cursor: day ? "default" : "not-allowed",
backgroundColor: getEventForDate(day).length > 0 ? "#eac768" : "white", // Highlight event dates
}}
>
{day ? (
<div style={{ width: "100%", height: "100%" }}>
{/* Align day number to the right */}
<span className="text-end d-block">{day.date()}</span>
{/* Display event names if present */}
{/* {getEventForDate(day).map((event, eventIndex) => (
<div
key={eventIndex}
className="text-sm text-white p-1 text-center mt-1"
onClick={() => handleEventClick(event.id)} // Add click handler
style={{
backgroundColor: "#007BFF", // Highlight event with a blue color
borderRadius: "5px",
cursor: "pointer"
}}
>
{event.title}
</div>
))} */}
</div>
) : (
""
)}
</td>
))}
</tr>
))}
</tbody>
</table>
</div>
<div className="col-lg-8" data-aos="fade-up" data-aos-duration={1000}>
<div className="tab-content" id="pills-tabContent">
<div className={isTab == 1 ? "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">
<div className="row">
<div className="col-lg-1" />
<div className="col-lg-10 m-auto">
<div className="event2-boxarea box1">
<h1 className="active">01</h1>
<div className="row align-items-center">
<div className="col-lg-5">
<div className="img1">
<img src="/assets/img/event/upcoming-event/thai-pongal.webp" alt="" />
</div>
</div>
<div className="col-lg-1" />
<div className="col-lg-6">
<div className="content-area">
<ul>
<li>
<Link href="/#"><img src="/assets/img/icons/clock1.svg" alt="" />05:30 PM - Sun Jan-14<span> | </span></Link>
</li>
<li>
<Link href="/#"><img src="/assets/img/icons/location1.svg" alt="" />180 Schweitzer St, Kitchener, Canada</Link>
</li>
</ul>
<div className="space20" />
<Link href="#" className="head">Thai Pongal 2024</Link>
<div className="space24" />
<p>Holy Family Croatian Roman Catholic Parish Hall</p>
{/* <div className="author-area">
<div className="autho-name-area">
<div className="img1">
<img src="/assets/img/all-images/testimonials/testimonial-img1.png" alt="" />
</div>
<div className="text">
<Link href="/speakers">Alex Roberton</Link>
<div className="space8" />
<p>UI/UX Designer</p>
</div>
</div>
<div className="autho-name-area" style={{ padding: '0 0 0 12px', border: 'none' }}>
<div className="img1">
<img src="/assets/img/all-images/testimonials/testimonial-img2.png" alt="" />
</div>
<div className="text">
<Link href="/speakers">Alexys Archer</Link>
<div className="space8" />
<p>WP Developer</p>
</div>
</div>
</div> */}
<div className="space24" />
<div className="btn-area1">
<Link href="/#" className="vl-btn3"><span className="demo">Online Tickets</span></Link>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div className="space48" />
<div className="row">
<div className="col-lg-1" />
<div className="col-lg-10 m-auto">
<div className="event2-boxarea box1">
<h1 className="active">02</h1>
<div className="row align-items-center">
<div className="col-lg-6">
<div className="content-area">
<ul>
<li>
<Link href="/#"><img src="/assets/img/icons/clock1.svg" alt="" />Apr 14, 2024<span> | </span></Link>
</li>
<li>
<Link href="/#"><img src="/assets/img/icons/location1.svg" alt="" />Christ Lutheran Church , Waterloo, ON</Link>
</li>
</ul>
<div className="space20" />
<Link href="#" className="head"> AGM</Link>
<div className="space24" />
<p>Christ Lutheran Church , Waterloo, ON</p>
{/* <div className="author-area">
<div className="autho-name-area">
<div className="img1">
<img src="/assets/img/all-images/testimonials/testimonial-img1.png" alt="" />
</div>
<div className="text">
<Link href="/speakers">Alex Roberton</Link>
<div className="space8" />
<p>UI/UX Designer</p>
</div>
</div>
<div className="autho-name-area" style={{ padding: '0 0 0 12px', border: 'none' }}>
<div className="img1">
<img src="/assets/img/all-images/testimonials/testimonial-img2.png" alt="" />
</div>
<div className="text">
<Link href="/speakers">Alexys Archer</Link>
<div className="space8" />
<p>WP Developer</p>
</div>
</div>
</div> */}
<div className="space24" />
<div className="btn-area1">
<Link href="/#" className="vl-btn3"><span className="demo">Online Tickets</span></Link>
</div>
</div>
<div className="space30 d-lg-none d-block" />
</div>
<div className="col-lg-5">
<div className="img1">
<img src="/assets/img/event/upcoming-event/agm.webp" alt="" />
</div>
</div>
</div>
</div>
</div>
</div>
<div className="space30" />
<div className="row">
<div className="col-lg-1" />
<div className="col-lg-10 m-auto">
<div className="event2-boxarea box1">
<h1 className="active">03</h1>
<div className="row align-items-center">
<div className="col-lg-5">
<div className="img1">
<img src="/assets/img/event/upcoming-event/kw.webp" alt="" />
</div>
</div>
<div className="col-lg-1" />
<div className="col-lg-6">
<div className="content-area">
<ul>
<li>
<Link href="/#"><img src="/assets/img/icons/clock1.svg" alt="" />Jun 22-23, 2024<span> | </span></Link>
</li>
<li>
<Link href="/#"><img src="/assets/img/icons/location1.svg" alt="" />Indian & Sri Lankan Food Court, Kitchener, ON.</Link>
</li>
</ul>
<div className="space20" />
<Link href="#" className="head">KW Multicultural Festival</Link>
<div className="space24" />
<p>Indian & Sri Lankan Food Court, Victoria Park, Kitchener, ON.</p>
{/* <div className="author-area">
<div className="autho-name-area">
<div className="img1">
<img src="/assets/img/all-images/testimonials/testimonial-img1.png" alt="" />
</div>
<div className="text">
<Link href="/speakers">Alex Roberton</Link>
<div className="space8" />
<p>UI/UX Designer</p>
</div>
</div>
<div className="autho-name-area" style={{ padding: '0 0 0 12px', border: 'none' }}>
<div className="img1">
<img src="/assets/img/all-images/testimonials/testimonial-img2.png" alt="" />
</div>
<div className="text">
<Link href="/speakers">Alexys Archer</Link>
<div className="space8" />
<p>Indian & Sri Lankan Food Court, Victoria Park, Kitchener, ON.</p>
</div>
</div>
</div> */}
<div className="space24" />
<div className="btn-area1">
<Link href="/#" className="vl-btn3"><span className="demo">Online Tickets</span></Link>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div className="space30" />
<div className="row">
<div className="col-lg-1" />
<div className="col-lg-10 m-auto">
<div className="event2-boxarea box1">
<h1 className="active">04</h1>
<div className="row align-items-center">
<div className="col-lg-6">
<div className="content-area">
<ul>
<li>
<Link href="/#"><img src="/assets/img/icons/clock1.svg" alt="" />10:00 AM - Sun Jul 7, 2024<span> | </span></Link>
</li>
<li>
<Link href="/#"><img src="/assets/img/icons/location1.svg" alt="" />Pinehurst Lake Conservation Ayr, ON.</Link>
</li>
</ul>
<div className="space20" />
<Link href="#" className="head">TCA Picnic Potlock</Link>
<div className="space24" />
<p>Pinehurst Lake Sutor Shelter, Ayr, ON</p>
{/* <div className="author-area">
<div className="autho-name-area">
<div className="img1">
<img src="/assets/img/all-images/testimonials/testimonial-img1.png" alt="" />
</div>
<div className="text">
<Link href="/speakers">Alex Roberton</Link>
<div className="space8" />
<p>UI/UX Designer</p>
</div>
</div>
<div className="autho-name-area" style={{ padding: '0 0 0 12px', border: 'none' }}>
<div className="img1">
<img src="/assets/img/all-images/testimonials/testimonial-img2.png" alt="" />
</div>
<div className="text">
<Link href="/speakers">Alexys Archer</Link>
<div className="space8" />
<p>WP Developer</p>
</div>
</div>
</div> */}
<div className="space24" />
<div className="btn-area1">
<Link href="/#" className="vl-btn3"><span className="demo">Registration required</span></Link>
</div>
</div>
<div className="space30 d-lg-none d-block" />
</div>
<div className="col-lg-5">
<div className="img1">
<img src="/assets/img/event/upcoming-event/picnic.webp" alt="" />
</div>
</div>
</div>
</div>
</div>
</div>
<div className="space30" />
<div className="row">
<div className="col-lg-1" />
<div className="col-lg-10 m-auto">
<div className="event2-boxarea box1">
<h1 className="active">05</h1>
<div className="row align-items-center">
<div className="col-lg-5">
<div className="img1">
<img src="/assets/img/event/upcoming-event/sports.webp" alt="" />
</div>
</div>
<div className="col-lg-1" />
<div className="col-lg-6">
<div className="content-area">
<ul>
<li>
<Link href="/#"><img src="/assets/img/icons/clock1.svg" alt="" />Jul 27-28, 2024<span> | </span></Link>
</li>
<li>
<Link href="/#"><img src="/assets/img/icons/location1.svg" alt="" />Waterloo Park, Waterloo, ON.</Link>
</li>
</ul>
<div className="space20" />
<Link href="#" className="head">South Asian Family Sports Day</Link>
<div className="space24" />
<p>MEMBERS ONLY</p>
{/* <div className="author-area">
<div className="autho-name-area">
<div className="img1">
<img src="/assets/img/all-images/testimonials/testimonial-img1.png" alt="" />
</div>
<div className="text">
<Link href="/speakers">Alex Roberton</Link>
<div className="space8" />
<p>UI/UX Designer</p>
</div>
</div>
<div className="autho-name-area" style={{ padding: '0 0 0 12px', border: 'none' }}>
<div className="img1">
<img src="/assets/img/all-images/testimonials/testimonial-img2.png" alt="" />
</div>
<div className="text">
<Link href="/speakers">Alexys Archer</Link>
<div className="space8" />
<p>Indian & Sri Lankan Food Court, Victoria Park, Kitchener, ON.</p>
</div>
</div>
</div> */}
<div className="space24" />
<div className="btn-area1">
<Link href="/#" className="vl-btn3"><span className="demo">Registration required</span></Link>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div className="space30" />
<div className="row">
<div className="col-lg-1" />
<div className="col-lg-10 m-auto">
<div className="event2-boxarea box1">
<h1 className="active">06</h1>
<div className="row align-items-center">
<div className="col-lg-6">
<div className="content-area">
<ul>
<li>
<Link href="/#"><img src="/assets/img/icons/clock1.svg" alt="" />06:30-08:30 PM - Aug 23, 2023<span> | </span></Link>
</li>
<li>
<Link href="/#"><img src="/assets/img/icons/location1.svg" alt="" />Doon Campus, Ontario</Link>
</li>
</ul>
<div className="space20" />
<Link href="#" className="head">Conestoga College Workshop</Link>
<div className="space24" />
<p>Conestoga College WC 241</p>
{/* <div className="author-area">
<div className="autho-name-area">
<div className="img1">
<img src="/assets/img/all-images/testimonials/testimonial-img1.png" alt="" />
</div>
<div className="text">
<Link href="/speakers">Alex Roberton</Link>
<div className="space8" />
<p>UI/UX Designer</p>
</div>
</div>
<div className="autho-name-area" style={{ padding: '0 0 0 12px', border: 'none' }}>
<div className="img1">
<img src="/assets/img/all-images/testimonials/testimonial-img2.png" alt="" />
</div>
<div className="text">
<Link href="/speakers">Alexys Archer</Link>
<div className="space8" />
<p>WP Developer</p>
</div>
</div>
</div> */}
<div className="space24" />
<div className="btn-area1">
<Link href="/#" className="vl-btn3"><span className="demo">Online Tickets</span></Link>
</div>
</div>
<div className="space30 d-lg-none d-block" />
</div>
<div className="col-lg-5">
<div className="img1">
<img src="/assets/img/event/upcoming-event/workshop.webp" alt="" />
</div>
</div>
</div>
</div>
</div>
</div>
<div className="space30" />
<div className="row">
<div className="col-lg-1" />
<div className="col-lg-10 m-auto">
<div className="event2-boxarea box1">
<h1 className="active">07</h1>
<div className="row align-items-center">
<div className="col-lg-5">
<div className="img1">
<img src="/assets/img/event/upcoming-event/cultural.webp" alt="" />
</div>
</div>
<div className="col-lg-1" />
<div className="col-lg-6">
<div className="content-area">
<ul>
<li>
<Link href="/#"><img src="/assets/img/icons/clock1.svg" alt="" />06:30 AM-08:30 PM - Aug 23, 2023<span> | </span></Link>
</li>
<li className="break-on-xl">
<Link href="/#"><img src="/assets/img/icons/location1.svg" alt="" />Doon Campus, Ontario</Link>
</li>
</ul>
<div className="space20" />
<Link href="#" className="head">Tamil Cultural Nite</Link>
<div className="space24" />
<p>TBA</p>
{/* <div className="author-area">
<div className="autho-name-area">
<div className="img1">
<img src="/assets/img/all-images/testimonials/testimonial-img1.png" alt="" />
</div>
<div className="text">
<Link href="/speakers">Alex Roberton</Link>
<div className="space8" />
<p>UI/UX Designer</p>
</div>
</div>
<div className="autho-name-area" style={{ padding: '0 0 0 12px', border: 'none' }}>
<div className="img1">
<img src="/assets/img/all-images/testimonials/testimonial-img2.png" alt="" />
</div>
<div className="text">
<Link href="/speakers">Alexys Archer</Link>
<div className="space8" />
<p>WP Developer</p>
</div>
</div>
</div> */}
<div className="space24" />
<div className="btn-area1">
<Link href="/#" className="vl-btn3"><span className="demo">Online Tickets</span></Link>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div className="space30" />
<div className="row">
<div className="col-lg-1" />
<div className="col-lg-10 m-auto">
<div className="event2-boxarea box1">
<h1 className="active">08</h1>
<div className="row align-items-center">
<div className="col-lg-6">
<div className="content-area">
<ul>
<li>
<Link href="/#"><img src="/assets/img/icons/clock1.svg" alt="" />1.00 PM-4.30 PM - Sat Oct 26, 2024<span> | </span></Link>
</li>
<li className="break-on-xl">
<Link href="/#"><img src="/assets/img/icons/location1.svg" alt="" />Waterloo Public Library</Link>
</li>
</ul>
<div className="space20" />
<Link href="#" className="head">TCA WPL Deepavali Celebrations</Link>
<div className="space24" />
<p>John M. Harper Branch 500 Fischer-Hallman Rd N, Waterloo, ON</p>
{/* <div className="author-area">
<div className="autho-name-area">
<div className="img1">
<img src="/assets/img/all-images/testimonials/testimonial-img1.png" alt="" />
</div>
<div className="text">
<Link href="/speakers">Alex Roberton</Link>
<div className="space8" />
<p>UI/UX Designer</p>
</div>
</div>
<div className="autho-name-area" style={{ padding: '0 0 0 12px', border: 'none' }}>
<div className="img1">
<img src="/assets/img/all-images/testimonials/testimonial-img2.png" alt="" />
</div>
<div className="text">
<Link href="/speakers">Alexys Archer</Link>
<div className="space8" />
<p>WP Developer</p>
</div>
</div>
</div> */}
<div className="space24" />
<div className="btn-area1">
<Link href="/#" className="vl-btn3"><span className="demo">Online Tickets</span></Link>
</div>
</div>
<div className="space30 d-lg-none d-block" />
</div>
<div className="col-lg-5">
<div className="img1">
<img src="/assets/img/event/upcoming-event/deepavali.webp" alt="" />
</div>
</div>
</div>
</div>
</div>
</div>
<div className="space30" />
<div className="row">
<div className="col-lg-1" />
<div className="col-lg-10 m-auto">
<div className="event2-boxarea box1">
<h1 className="active">09</h1>
<div className="row align-items-center">
<div className="col-lg-5">
<div className="img1">
<img src="/assets/img/event/upcoming-event/christmas.webp" alt="" />
</div>
</div>
<div className="col-lg-1" />
<div className="col-lg-6">
<div className="content-area">
<ul>
<li>
<Link href="/#"><img src="/assets/img/icons/clock1.svg" alt="" />05:00 PM-09:00 PM - Sat Dec 21, 2024<span> | </span></Link>
</li>
<li>
<Link href="/#"><img src="/assets/img/icons/location1.svg" alt="" />RIM Park</Link>
</li>
</ul>
<div className="space20" />
<Link href="#" className="head">Christmas & 2024 Year End Celebration</Link>
<div className="space24" />
<p>2001 University Ave E, Waterloo, ON N2K 4K4</p>
{/* <div className="author-area">
<div className="autho-name-area">
<div className="img1">
<img src="/assets/img/all-images/testimonials/testimonial-img1.png" alt="" />
</div>
<div className="text">
<Link href="/speakers">Alex Roberton</Link>
<div className="space8" />
<p>UI/UX Designer</p>
</div>
</div>
<div className="autho-name-area" style={{ padding: '0 0 0 12px', border: 'none' }}>
<div className="img1">
<img src="/assets/img/all-images/testimonials/testimonial-img2.png" alt="" />
</div>
<div className="text">
<Link href="/speakers">Alexys Archer</Link>
<div className="space8" />
<p>Indian & Sri Lankan Food Court, Victoria Park, Kitchener, ON.</p>
</div>
</div>
</div> */}
<div className="space24" />
<div className="btn-area1">
<Link href="/#" className="vl-btn3"><span className="demo">Online Tickets</span></Link>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</>
)
}