{"id":235,"date":"2026-06-23T20:14:21","date_gmt":"2026-06-23T20:14:21","guid":{"rendered":"https:\/\/jsparmarcollege.in\/?page_id=235"},"modified":"2026-06-23T20:17:36","modified_gmt":"2026-06-23T20:17:36","slug":"event-calendar","status":"publish","type":"page","link":"https:\/\/jsparmarcollege.in\/index.php\/event-calendar\/","title":{"rendered":"Event Calendar"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"235\" class=\"elementor elementor-235\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-aea11ed e-con e-atomic-element e-flexbox-base e-f84ca21 \" data-id=\"aea11ed\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"aea11ed\">\n    \t\t<div class=\"elementor-element elementor-element-811e5b4 elementor-widget elementor-widget-shortcode\" data-id=\"811e5b4\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">    <!-- Font Awesome -->\n    <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n    \n    <style>\n        .sec-wrapper { font-family: 'Open Sans', Arial, sans-serif; background: #f8fafc; padding: 20px 0; border-radius: 12px; }\n        \n        \/* ================================= *\/\n        \/* TOP SECTION: VISUAL CALENDAR GRID *\/\n        \/* ================================= *\/\n        .sec-calendar-container { background: #ffffff; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.05); border: 1px solid #e2e8f0; overflow: hidden; margin-bottom: 40px; }\n        .sec-cal-header { display: flex; justify-content: space-between; align-items: center; background: #1e3a8a; color: #ffffff; padding: 20px; }\n        .sec-cal-nav { background: rgba(255,255,255,0.2); border: none; color: #fff; width: 35px; height: 35px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.3s; }\n        .sec-cal-nav:hover { background: #f59e0b; }\n        .sec-cal-month-year { font-family: 'Times New Roman', serif; font-size: 24px; font-weight: bold; margin: 0; letter-spacing: 1px; text-transform: uppercase; }\n\n        .sec-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; }\n        .sec-cal-day-names { background: #f1f5f9; font-weight: 700; font-size: 13px; color: #64748b; text-transform: uppercase; padding: 15px 0; border-bottom: 1px solid #e2e8f0; }\n        \n        .sec-cal-dates { display: grid; grid-template-columns: repeat(7, 1fr); border-top: 1px solid #e2e8f0; border-left: 1px solid #e2e8f0; }\n        .sec-cal-date { min-height: 110px; padding: 8px; border-right: 1px solid #e2e8f0; border-bottom: 1px solid #e2e8f0; display: flex; flex-direction: column; background: #fff; transition: background 0.2s; }\n        .sec-cal-date:hover { background: #f8fafc; }\n        .sec-cal-date.empty { background: #f1f5f9; border-right: 1px solid #e2e8f0; }\n        .sec-cal-day-num { align-self: flex-end; font-size: 15px; font-weight: bold; color: #64748b; margin-bottom: 5px; }\n        .sec-cal-date.today .sec-cal-day-num { background: #1e3a8a; color: #fff; width: 25px; height: 25px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }\n\n        \/* Small Snippets inside the Date Box *\/\n        .sec-cal-snippet { font-size: 10px; color: #fff; padding: 3px 5px; border-radius: 3px; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; font-weight: 600; text-transform: uppercase; }\n        .sec-cal-snippet.red { background: #ef4444; }\n        .sec-cal-snippet.blue { background: #3b82f6; }\n        .sec-cal-snippet.green { background: #22c55e; }\n        .sec-cal-snippet.orange { background: #f97316; }\n\n        \/* ================================= *\/\n        \/* BOTTOM SECTION: DETAILED LIST     *\/\n        \/* ================================= *\/\n        .sec-list-wrapper { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,0.03); }\n        .sec-list-header { background: #1e3a8a; color: #ffffff; padding: 15px 25px; display: flex; justify-content: space-between; align-items: center; font-weight: 700; letter-spacing: 1px; font-size: 14px; text-transform: uppercase; }\n        .sec-list-header i { color: #f59e0b; margin-right: 8px; }\n        .sec-header-badge { background: #f59e0b; color: #000000; padding: 4px 12px; border-radius: 4px; font-size: 11px; font-weight: 800; }\n\n        \/* Rows *\/\n        .sec-list-row { display: flex; padding: 30px 25px; border-bottom: 1px solid #f1f5f9; gap: 25px; transition: background 0.3s; animation: fadeIn 0.4s ease; }\n        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }\n        .sec-list-row:last-child { border-bottom: none; }\n        .sec-list-row:hover { background: #f8fafc; }\n\n        \/* 3D Box *\/\n        .sec-date-box { width: 70px; height: 70px; background: linear-gradient(135deg, #64748b, #94a3b8); border: 2px solid #f8fafc; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 8px 15px rgba(0,0,0,0.15), inset 0 2px 5px rgba(255,255,255,0.4), inset 0 -3px 5px rgba(0,0,0,0.2); flex-shrink: 0; }\n        .sec-date-day { color: #fcd34d; font-size: 26px; font-weight: 800; line-height: 1; text-shadow: 1px 1px 2px rgba(0,0,0,0.3); }\n        .sec-date-month { color: #fcd34d; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; margin-top: 3px; }\n\n        \/* Details *\/\n        .sec-content { flex-grow: 1; }\n        .sec-meta { display: flex; align-items: center; gap: 15px; margin-bottom: 8px; flex-wrap: wrap; }\n        .sec-tag { font-size: 10px; font-weight: 800; padding: 4px 10px; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.5px; }\n        .sec-tag.red { background: #fee2e2; color: #dc2626; }\n        .sec-tag.blue { background: #eff6ff; color: #2563eb; }\n        .sec-tag.green { background: #dcfce7; color: #16a34a; }\n        .sec-tag.orange { background: #ffedd5; color: #ea580c; }\n\n        .sec-time { font-size: 13px; color: #475569; font-family: monospace; font-weight: 600; display: flex; align-items: center; gap: 6px; }\n        .sec-time i { color: #94a3b8; font-size: 14px; }\n        .sec-title { color: #1e3a8a; font-family: 'Times New Roman', serif; font-size: 18px; font-weight: bold; margin: 0 0 8px 0; text-transform: uppercase; letter-spacing: 0.5px; }\n        .sec-desc { color: #475569; font-size: 13px; line-height: 1.6; margin: 0; }\n\n        .sec-no-events { text-align: center; padding: 40px; color: #94a3b8; font-size: 15px; }\n\n        \/* Mobile *\/\n        @media (max-width: 768px) {\n            .sec-cal-date { min-height: 80px; padding: 4px; }\n            .sec-cal-snippet { font-size: 8px; padding: 2px; }\n            .sec-list-header { flex-direction: column; gap: 10px; text-align: center; }\n            .sec-list-row { flex-direction: column; gap: 15px; padding: 20px; }\n        }\n    <\/style>\n\n    <div class=\"sec-wrapper\">\n        \n        <!-- TOP: THE VISUAL CALENDAR -->\n        <div class=\"sec-calendar-container\">\n            <div class=\"sec-cal-header\">\n                <button class=\"sec-cal-nav\" onclick=\"secChangeMonth(-1)\"><i class=\"fas fa-chevron-left\"><\/i><\/button>\n                <h3 class=\"sec-cal-month-year\" id=\"sec-month-year\">Month Year<\/h3>\n                <button class=\"sec-cal-nav\" onclick=\"secChangeMonth(1)\"><i class=\"fas fa-chevron-right\"><\/i><\/button>\n            <\/div>\n            \n            <div class=\"sec-cal-grid sec-cal-day-names\">\n                <div>SUN<\/div><div>MON<\/div><div>TUE<\/div><div>WED<\/div><div>THU<\/div><div>FRI<\/div><div>SAT<\/div>\n            <\/div>\n            \n            <div class=\"sec-cal-dates\" id=\"sec-dates-grid\">\n                <!-- Javascript will build calendar grid here -->\n            <\/div>\n        <\/div>\n\n        <!-- BOTTOM: THE DETAILED LIST FOR THE MONTH -->\n        <div class=\"sec-list-wrapper\">\n            <div class=\"sec-list-header\">\n                <span id=\"sec-list-header-text\"><i class=\"far fa-calendar-alt\"><\/i> UPCOMING COLLEGE CALENDAR SCHEDULES<\/span>\n                <span class=\"sec-header-badge\">ACTIVE<\/span>\n            <\/div>\n            <div id=\"sec-list-output\">\n                <!-- Javascript will build the list here -->\n            <\/div>\n        <\/div>\n\n    <\/div>\n\n    <!-- JavaScript Engine -->\n    <script>\n        const eventData = {\"2026-06-26\":[{\"title\":\"Exam\",\"time\":\"10:10\",\"tag\":\"EVENT\",\"color\":\"blue\",\"desc\":\"\"}]};\n        \n        let currentDate = new Date();\n        let currentMonth = currentDate.getMonth();\n        let currentYear = currentDate.getFullYear();\n        \n        const monthNamesFull = [\"January\", \"February\", \"March\", \"April\", \"May\", \"June\", \"July\", \"August\", \"September\", \"October\", \"November\", \"December\"];\n        const monthNamesShort = [\"JAN\", \"FEB\", \"MAR\", \"APR\", \"MAY\", \"JUN\", \"JUL\", \"AUG\", \"SEP\", \"OCT\", \"NOV\", \"DEC\"];\n\n        document.addEventListener('DOMContentLoaded', () => {\n            secUpdateUI(currentMonth, currentYear);\n        });\n\n        function secChangeMonth(step) {\n            currentMonth += step;\n            if (currentMonth < 0) {\n                currentMonth = 11;\n                currentYear--;\n            } else if (currentMonth > 11) {\n                currentMonth = 0;\n                currentYear++;\n            }\n            secUpdateUI(currentMonth, currentYear);\n        }\n\n        \/\/ Master function to update both Calendar and List\n        function secUpdateUI(month, year) {\n            document.getElementById('sec-month-year').innerText = `${monthNamesFull[month]} ${year}`;\n            document.getElementById('sec-list-header-text').innerHTML = `<i class=\"far fa-calendar-alt\"><\/i> ${monthNamesFull[month].toUpperCase()} ${year} - EVENT SCHEDULES`;\n            \n            secRenderCalendarGrid(month, year);\n            secRenderMonthList(month, year);\n        }\n\n        \/\/ 1. Render Top Calendar Grid\n        function secRenderCalendarGrid(month, year) {\n            const grid = document.getElementById('sec-dates-grid');\n            grid.innerHTML = ''; \n\n            const firstDay = new Date(year, month, 1).getDay();\n            const daysInMonth = new Date(year, month + 1, 0).getDate();\n            const today = new Date();\n            const isCurrentMonth = (today.getMonth() === month && today.getFullYear() === year);\n\n            \/\/ Empty slots before 1st\n            for (let i = 0; i < firstDay; i++) {\n                grid.innerHTML += `<div class=\"sec-cal-date empty\"><\/div>`;\n            }\n\n            \/\/ Actual days\n            for (let day = 1; day <= daysInMonth; day++) {\n                let m = (month + 1).toString().padStart(2, '0');\n                let d = day.toString().padStart(2, '0');\n                let dateString = `${year}-${m}-${d}`;\n                \n                let classes = 'sec-cal-date';\n                if (isCurrentMonth && day === today.getDate()) classes += ' today';\n\n                let snippetsHtml = '';\n                if (eventData[dateString]) {\n                    \/\/ Loop through events on this day to create short snippets in the box\n                    eventData[dateString].forEach(evt => {\n                        snippetsHtml += `<div class=\"sec-cal-snippet ${evt.color}\" title=\"${evt.title}\">${evt.title}<\/div>`;\n                    });\n                }\n\n                grid.innerHTML += `\n                <div class=\"${classes}\">\n                    <div class=\"sec-cal-day-num\">${day}<\/div>\n                    ${snippetsHtml}\n                <\/div>`;\n            }\n        }\n\n        \/\/ 2. Render Bottom Event List for the specific month\n        function secRenderMonthList(month, year) {\n            const listOutput = document.getElementById('sec-list-output');\n            let html = '';\n            let hasEvents = false;\n\n            \/\/ Loop through 1 to 31 to keep them strictly in date order\n            for (let day = 1; day <= 31; day++) {\n                let m = (month + 1).toString().padStart(2, '0');\n                let d = day.toString().padStart(2, '0');\n                let dateString = `${year}-${m}-${d}`;\n\n                if (eventData[dateString]) {\n                    hasEvents = true;\n                    \n                    \/\/ Month formatting for the 3D box (Limit to 4 chars visually)\n                    let boxMonthName = monthNamesFull[month];\n                    if(boxMonthName.length > 4) {\n                        boxMonthName = monthNamesShort[month]; \n                    }\n\n                    eventData[dateString].forEach(evt => {\n                        let timeHtml = evt.time ? `<span class=\"sec-time\"><i class=\"far fa-clock\"><\/i> ${evt.time}<\/span>` : '';\n                        \n                        html += `\n                        <div class=\"sec-list-row\">\n                            <div class=\"sec-date-box\">\n                                <span class=\"sec-date-day\">${d}<\/span>\n                                <span class=\"sec-date-month\">${boxMonthName}<\/span>\n                            <\/div>\n                            <div class=\"sec-content\">\n                                <div class=\"sec-meta\">\n                                    <span class=\"sec-tag ${evt.color}\">${evt.tag}<\/span>\n                                    ${timeHtml}\n                                <\/div>\n                                <h3 class=\"sec-title\">${evt.title}<\/h3>\n                                <div class=\"sec-desc\">${evt.desc}<\/div>\n                            <\/div>\n                        <\/div>`;\n                    });\n                }\n            }\n\n            if (!hasEvents) {\n                html = `<div class=\"sec-no-events\"><i class=\"far fa-folder-open\" style=\"font-size: 30px; margin-bottom: 10px;\"><\/i><br>No events scheduled for ${monthNamesFull[month]} ${year}.<\/div>`;\n            }\n\n            listOutput.innerHTML = html;\n        }\n    <\/script>\n    <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-235","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/jsparmarcollege.in\/index.php\/wp-json\/wp\/v2\/pages\/235","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jsparmarcollege.in\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/jsparmarcollege.in\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/jsparmarcollege.in\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jsparmarcollege.in\/index.php\/wp-json\/wp\/v2\/comments?post=235"}],"version-history":[{"count":4,"href":"https:\/\/jsparmarcollege.in\/index.php\/wp-json\/wp\/v2\/pages\/235\/revisions"}],"predecessor-version":[{"id":242,"href":"https:\/\/jsparmarcollege.in\/index.php\/wp-json\/wp\/v2\/pages\/235\/revisions\/242"}],"wp:attachment":[{"href":"https:\/\/jsparmarcollege.in\/index.php\/wp-json\/wp\/v2\/media?parent=235"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}