event date heighligheted in calendar to upcomming event page
This commit is contained in:
Alaguraj0361
parent
a7049f61ee
commit
77ae1e3687
@ -3,124 +3,128 @@ 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());
|
||||
|
||||
|
||||
// Events normalized with YYYY-MM-DD format
|
||||
const events = [
|
||||
{
|
||||
id: 1,
|
||||
date: "Sun Jan-14",
|
||||
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: "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: 2,
|
||||
date: "2024-04-14",
|
||||
title: "AGM",
|
||||
location: "Christ Lutheran Church, Waterloo, ON",
|
||||
image: "/assets/img/event/upcoming-event/agm.webp",
|
||||
url: "#",
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
date: "Sat Oct 26, 2024",
|
||||
time: "1.00 PM-4.30 PM",
|
||||
title: "TCA – WPL Deepavali Celebrations",
|
||||
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: 9,
|
||||
date: "Sat Dec 21, 2024",
|
||||
time: "05:00 PM-09:00 PM",
|
||||
title: "RIM Park",
|
||||
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 the start and end of the current month
|
||||
// Get start and end of current month
|
||||
const startOfMonth = currentMonth.clone().startOf("month");
|
||||
const endOfMonth = currentMonth.clone().endOf("month");
|
||||
|
||||
// Generate the calendar days
|
||||
// Generate 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
|
||||
daysInMonth.push(null);
|
||||
}
|
||||
for (let i = 1; i <= endOfMonth.date(); i++) {
|
||||
daysInMonth.push(moment(currentMonth).date(i));
|
||||
}
|
||||
|
||||
// Function to check if a date has an event
|
||||
// Get events for a given date
|
||||
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
|
||||
// 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">
|
||||
{/* <h5>Event Schedule</h5> */}
|
||||
<div className="space18" />
|
||||
<h2 className="text-anime-style-3">Upcoming Events</h2>
|
||||
</div>
|
||||
<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 className="row">
|
||||
<div className="col-12 col-lg-4">
|
||||
|
||||
</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"
|
||||
@ -152,591 +156,165 @@ export default function UpcomingEventData() {
|
||||
<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}
|
||||
{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>
|
||||
))} */}
|
||||
</div>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
</td>
|
||||
))}
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
</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="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="/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>
|
||||
<img src={event.image} alt={event.title} />
|
||||
</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 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>
|
||||
</div> */}
|
||||
<div className="space24" />
|
||||
<div className="btn-area1">
|
||||
<Link href="/#" className="vl-btn3"><span className="demo">Online Tickets</span></Link>
|
||||
</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 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>
|
||||
|
||||
</>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@ -32,7 +32,7 @@ export default function AboutSection() {
|
||||
</div>
|
||||
</div> */}
|
||||
<div className="img2">
|
||||
<img src="/assets/img/home/about/about.webp" alt="" />
|
||||
<img src="/assets/img/home/about/about.webp" alt="" style={{width:"100%"}}/>
|
||||
</div>
|
||||
{/* <div className="about3-images">
|
||||
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 187 KiB After Width: | Height: | Size: 115 KiB |
@ -21,7 +21,7 @@
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: 5px solid #ccc;
|
||||
border-top: 5px solid #000000cf;
|
||||
border-top: 5px solid #000;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
@ -47,3 +47,26 @@
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
.calendar-table th, .calendar-table td {
|
||||
width: 14.2%;
|
||||
height: 80px;
|
||||
}
|
||||
.calendar-cell {
|
||||
position: relative;
|
||||
transition: 0.2s;
|
||||
}
|
||||
.calendar-cell:hover {
|
||||
background: #f0f0f0;
|
||||
}
|
||||
.calendar-cell.selected {
|
||||
background: #eac768 !important;
|
||||
font-weight: bold;
|
||||
border: 2px solid #d4a017;
|
||||
}
|
||||
.event-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: #e74c3c;
|
||||
border-radius: 50%;
|
||||
margin: 3px auto 0;
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user