calender-updated- didnt integrate with events

app/page.tsx

@@ -38,18 +38,23 @@ export default function Home() {
 				<AboutSection />
 				<AdSectionOne />
 				<ArtAndCultureSection />
+				<HomeWhyChooseUs />
+				<AdSectionThree />
+				
+				<HomeUpcomingEvent />
+				
+
 				{/* <HeritageLanguage /> */}
 				{/* <Food /> */}
-				<HomeSlogan />
+				{/* <HomeSlogan /> */}
 
 				<HomeCommunitySection />
 			
-				<AdSectionFive />
+				
-				<HomeUpcomingEvent />
+				
-				<HomeWhyChooseUs />
 				{/* <Section7 /> */}
 				{/* <FoodSection /> */}
-				<AdSectionThree />
+				<AdSectionFive />
 				<HomePhotoGallerySection />
 				{/* <HaritageAndLanguage />
 				<AdSectionFour />

components/events/UpcomingEventData.jsx

@@ -1,12 +1,109 @@
 '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 (
         <>
 
@@ -22,12 +119,86 @@ export default function UpcomingEventData() {
                         </div>
                     </div>
                     <div className="row">
-                        <div className="col-lg-12" data-aos="fade-up" data-aos-duration={1000}>
+                        <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">

components/home/HomePhotoGallerySection.tsx

@@ -76,7 +76,7 @@ export default function HomePhotoGallerySection() {
 
     return (
         <>
-            <div className="bloginner-section-area sp3">
+            <div className="bloginner-section-area sp4">
                 <div className="container">
                     <div className="row">
                         <div className="col-lg-12 m-auto">

components/home/HomeUpcomingEvent.tsx

@@ -10,7 +10,7 @@ export default function HomeUpcomingEvent() {
     return (
         <>
 
-            <div className="event3-section-area sp4">
+            <div className="event3-section-area">
                 <div className="container">
                     <div className="row">
                         <div className="col-lg-12 m-auto">

package-lock.json

@@ -11,6 +11,7 @@
         "aos": "^2.3.4",
         "axios": "^1.11.0",
         "gsap": "^3.12.5",
+        "moment": "^2.30.1",
         "next": "14.2.15",
         "react": "^18",
         "react-countup": "^6.5.3",
@@ -4180,6 +4181,15 @@
         "node": ">=16 || 14 >=14.17"
       }
     },
+    "node_modules/moment": {
+      "version": "2.30.1",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz",
+      "integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==",
+      "license": "MIT",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",

package.json

@@ -14,6 +14,7 @@
     "aos": "^2.3.4",
     "axios": "^1.11.0",
     "gsap": "^3.12.5",
+    "moment": "^2.30.1",
     "next": "14.2.15",
     "react": "^18",
     "react-countup": "^6.5.3",

public/assets/css/main.css

@@ -1390,7 +1390,7 @@ Location:
 .vl-btn4 {
 	color: var(--ztc-text-text-1);
 	font-family: var(--grotesk);
-	font-size: var(--ztc-font-size-font-s20);
+	font-size: var(--ztc-font-size-font-s18);
 	font-style: normal;
 	font-weight: var(--ztc-weight-bold);
 	line-height: 20px;
@@ -1400,24 +1400,21 @@ Location:
 	z-index: 1;
 	display: inline-block;
 	border-radius: 8px;
-	padding: 24px 26px;
+	padding: 16px 24px;
-	background: var(--ztc-bg-bg-9);
+	background: var(--ztc-bg-bg-15);
 	overflow: hidden;
 }
 
 .vl-btn4::after {
 	position: absolute;
 	content: "";
-	height: 100%;
+	height: 4px;
-	width: 1px;
+	width: 100%;
-	left: 50%;
+	left: 0;
-	top: 0;
+	bottom: 0;
 	transition: all 0.4s;
-	background: var(--ztc-bg-bg-8);
+	background: #D60003;
 	z-index: -1;
-	border-radius: 8px;
-	visibility: hidden;
-	opacity: 0;
 }
 
 .vl-btn4:hover {
@@ -1429,10 +1426,7 @@ Location:
 	width: 100%;
 	height: 100%;
 	transition: all 0.4s;
-	left: 0;
+	
-	top: 0;
-	visibility: visible;
-	opacity: 1;
 }
 
 .vl-btn5 {
@@ -28469,4 +28463,8 @@ h2.custom-text.aos-init.aos-animate {
 	.vl-btn9 .demo {
 		font-size: 16px;
 	}
+}
+
+.fw-700{
+	font-weight:700;
 }

utility/constant.utils.js

@@ -4632,4 +4632,5 @@ export const heritageLanguage = [
       </div>
     `
   },
-];
+];
+