From 2e6b4453e30758ee02b6bbb07940e23900715f4b Mon Sep 17 00:00:00 2001
From: Waterloomurugantemple <it@waterloomurugantemple.ca>
Date: Thu, 27 Aug 2026 05:44:10 +0000
Subject: [PATCH] Replace calendar with final v1.1.6 events

---
 src/components/Home/EventCalendar.jsx | 54 +++++++++++----------------
 1 file changed, 22 insertions(+), 32 deletions(-)

diff --git a/src/components/Home/EventCalendar.jsx b/src/components/Home/EventCalendar.jsx
index 22f4178..8ce0438 100644
--- a/src/components/Home/EventCalendar.jsx
+++ b/src/components/Home/EventCalendar.jsx
@@ -1,26 +1,16 @@
 "use client";
-import { useState, useEffect } from "react";
+import { useState } from "react";
 import moment from "moment";
-import { useRouter } from "next/navigation";
 import Link from "next/link";
 
 const EventCalendar = () => {
   const [currentMonth, setCurrentMonth] = useState(moment());
-  const [selectedYear, setSelectedYear] = useState("2025"); // <-- NEW: default selected year
-  const router = useRouter();
+  const [selectedYear, setSelectedYear] = useState("2026");
 
   const events = [
-    { id: 1, date: "2025-11-08", title: "Sathya Narayana poojai, Saturday", url: "/event-sathya-narayana-poojai" },
-    { id: 2, date: "2025-12-07", title: "Sangada hara charthurthi, Sunday", url: "/event-sangada-hara-charthurthi-december" },
-    { id: 3, date: "2026-01-01", title: "New year celebration, Thursday", url: "/event-new-year" },
-    { id: 4, date: "2026-02-01", title: "Thai poosam, Sunday", url: "/event-thai-poosam" },
-    { id: 5, date: "2026-03-06", title: "Sangada hara charthurthi, Friday", url: "/event-sangada-hara-charthurthi-march" },
-    { id: 6, date: "2026-04-05", title: "Sangada hara charthurthi, Sunday", url: "/event-sangada-hara-charthurthi-april" },
-    { id: 7, date: "2026-05-01", title: "Chitra Pournami (TBC), Friday", url: "/event-chitra-pournami" },
-    { id: 8, date: "2026-05-16", title: "Monthly Karthigai (TBC), Saturday", url: "/event-monthly-karthigai-may" },
-    { id: 9, date: "2026-05-29", title: "Vaikasi Visagam (TBC), Friday", url: "/event-vaikasi-visagam" },
-    { id: 10, date: "2026-06-03", title: "Sangada hara chathurthi (TBC), Wednesday", url: "/event-sangada-hara-charthurthi-june" },
-    { id: 11, date: "2026-06-12", title: "Monthly Karthigai (TBC), Friday", url: "/event-monthly-karthigai-june" },
+    { id: 1, date: "2026-08-25", title: "Pradosham Puja, Tuesday, 6:30 PM - 8:30 PM", url: "/event-pradhosham-puja" },
+    { id: 2, date: "2026-08-27", title: "Avani Avittam - Jandhyala Pournima, Thursday, 7:00 AM - 8:30 AM", url: "/event-avani-avittam" },
+    { id: 3, date: "2026-08-30", title: "Aruna Prasnam Chanting - Surya Namaskaram, Sunday, 7:00 AM", url: "/event-aruna-prasnam-chanting" },
   ];
 
   const filteredEvents = events.filter(
@@ -49,6 +39,7 @@ const EventCalendar = () => {
 
   const handleYearClick = (year) => {
     setSelectedYear(year);
+    setCurrentMonth(currentMonth.clone().year(Number(year)));
   };
 
   return (
@@ -60,28 +51,15 @@ const EventCalendar = () => {
       <div className="container">
         <h2 className="text-center mb-4">Event Calendar</h2>
 
-        {/* === Year Filter Buttons === */}
-        <div className="d-flex justify-content-center gap-3 mb-4">
-          {["2025", "2026"].map((year) => (
-            <button
-              key={year}
-              className={`btn ${selectedYear === year ? "btn-warning" : "btn-outline-warning"}`}
-              onClick={() => handleYearClick(year)}
-            >
-              {year}
-            </button>
-          ))}
-        </div>
-
         <div className="row justify-content-between">
           <div className="col-12 col-lg-4">
-            <div className="d-flex justify-content-between align-items-center">
+            <div className="d-flex justify-content-center align-items-center gap-3 mb-4">
               <button className="btn style2" onClick={() => handleMonthChange(-1)}>Prev</button>
-              <span className="mx-3">{currentMonth.format("MMMM YYYY")}</span>
+              <span className="mx-2 fw-bold text-center">{currentMonth.format("MMMM YYYY")}</span>
               <button className="btn style2" onClick={() => handleMonthChange(1)}>Next</button>
             </div>
 
-            <table className="table table-bordered mt-4" style={{ tableLayout: "fixed" }}>
+            <table className="table table-bordered mt-0" style={{ tableLayout: "fixed" }}>
               <thead>
                 <tr>
                   {["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"].map((day, index) => (
@@ -119,8 +97,20 @@ const EventCalendar = () => {
 
           {/* === Events Table === */}
           <div className="col-12 col-lg-7">
+            <div className="d-flex justify-content-center align-items-center gap-3 mb-4">
+              {["2025", "2026"].map((year) => (
+                <button
+                  key={year}
+                  className={`btn ${selectedYear === year ? "btn-warning" : "btn-outline-warning"}`}
+                  onClick={() => handleYearClick(year)}
+                >
+                  {year}
+                </button>
+              ))}
+            </div>
+
             <table
-              className="table table-bordered mt-4 custom-scroll"
+              className="table table-bordered mt-0 custom-scroll"
               style={{
                 height: `${filteredEvents?.length > 5 ? "300px" : "auto"}`,
                 overflowY: filteredEvents?.length > 5 ? "auto" : "visible",