MetatroncubeSoftwareSolutions/Murugan_Temple
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Replace calendar with final v1.1.6 events
Some checks failed
Build and Deploy Build Output / build (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Waterloomurugantemple 2026-08-27 05:44:10 +00:00
parent 16830e0047
commit 2e6b4453e3
1 changed files with 22 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
src/components/Home/EventCalendar.jsx
View File

@ -1,26 +1,16 @@
"use client"; "use client";
import { useState, useEffect } from "react"; import { useState } from "react";
import moment from "moment"; import moment from "moment";
import { useRouter } from "next/navigation";
import Link from "next/link"; import Link from "next/link";
const EventCalendar = () => { const EventCalendar = () => {
const [currentMonth, setCurrentMonth] = useState(moment()); const [currentMonth, setCurrentMonth] = useState(moment());
const [selectedYear, setSelectedYear] = useState("2025"); // <-- NEW: default selected year const [selectedYear, setSelectedYear] = useState("2026");
const router = useRouter();
const events = [ const events = [
{ id: 1, date: "2025-11-08", title: "Sathya Narayana poojai, Saturday", url: "/event-sathya-narayana-poojai" }, { id: 1, date: "2026-08-25", title: "Pradosham Puja, Tuesday, 6:30 PM - 8:30 PM", url: "/event-pradhosham-puja" },
{ id: 2, date: "2025-12-07", title: "Sangada hara charthurthi, Sunday", url: "/event-sangada-hara-charthurthi-december" }, { 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-01-01", title: "New year celebration, Thursday", url: "/event-new-year" }, { id: 3, date: "2026-08-30", title: "Aruna Prasnam Chanting - Surya Namaskaram, Sunday, 7:00 AM", url: "/event-aruna-prasnam-chanting" },
{ 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" },
]; ];
const filteredEvents = events.filter( const filteredEvents = events.filter(
@ -49,6 +39,7 @@ const EventCalendar = () => {
const handleYearClick = (year) => { const handleYearClick = (year) => {
setSelectedYear(year); setSelectedYear(year);
setCurrentMonth(currentMonth.clone().year(Number(year)));
}; };
return ( return (
@ -60,28 +51,15 @@ const EventCalendar = () => {
<div className="container"> <div className="container">
<h2 className="text-center mb-4">Event Calendar</h2> <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="row justify-content-between">
<div className="col-12 col-lg-4"> <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> <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> <button className="btn style2" onClick={() => handleMonthChange(1)}>Next</button>
</div> </div>
<table className="table table-bordered mt-4" style={{ tableLayout: "fixed" }}> <table className="table table-bordered mt-0" style={{ tableLayout: "fixed" }}>
<thead> <thead>
<tr> <tr>
{["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"].map((day, index) => ( {["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"].map((day, index) => (
@ -119,8 +97,20 @@ const EventCalendar = () => {
{/* === Events Table === */} {/* === Events Table === */}
<div className="col-12 col-lg-7"> <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 <table
className="table table-bordered mt-4 custom-scroll" className="table table-bordered mt-0 custom-scroll"
style={{ style={{
height: `${filteredEvents?.length > 5 ? "300px" : "auto"}`, height: `${filteredEvents?.length > 5 ? "300px" : "auto"}`,
overflowY: filteredEvents?.length > 5 ? "auto" : "visible", overflowY: filteredEvents?.length > 5 ? "auto" : "visible",