{"id":350,"date":"2025-06-15T01:54:40","date_gmt":"2025-06-15T01:54:40","guid":{"rendered":"https:\/\/centralchapel.org\/?page_id=350"},"modified":"2025-08-12T13:19:25","modified_gmt":"2025-08-12T13:19:25","slug":"central-calendar","status":"publish","type":"page","link":"https:\/\/centralchapel.org\/?page_id=350","title":{"rendered":"Central Calendar"},"content":{"rendered":"<h2>Central Calendar<\/h2>\n    <div id=\"central-fullcalendar\"><\/div>\n    <!-- Event Modal -->\n    <div id=\"cc-event-modal\" style=\"display:none; position:fixed; z-index:9999; left:0; top:0; width:100vw; height:100vh; background:rgba(0,0,0,0.5); align-items:center; justify-content:center;\">\n      <div id=\"cc-event-modal-content\">\n        <button id=\"cc-event-modal-close\" style=\"position:absolute; right:10px; top:10px; font-size:24px; background:transparent; border:none; cursor:pointer; transition:color .15s;\">&times;<\/button>\n        <h2 id=\"cc-event-title\"><\/h2>\n        <div id=\"cc-event-datetime\" style=\"margin-bottom:10px;\"><\/div>\n        <div id=\"cc-event-location\" style=\"margin-bottom:10px; color:#666;\"><\/div>\n        <div id=\"cc-event-description\" style=\"white-space:pre-line;\"><\/div>\n      <\/div>\n    <\/div>\n    <script>\n    document.addEventListener('DOMContentLoaded', function() {\n      var calendarEl = document.getElementById('central-fullcalendar');\n      if (!calendarEl) return;\n      var calendar = new FullCalendar.Calendar(calendarEl, {\n        initialView: window.innerWidth < 700 ? 'listMonth' : 'dayGridMonth',\n        height: 'auto',\n        headerToolbar: {\n            left: 'prev,next today',\n            center: 'title',\n            right: window.innerWidth < 700 ? 'listMonth,dayGridMonth' : 'dayGridMonth,timeGridWeek,timeGridDay'\n        },\n        eventSources: [{\n          googleCalendarId: 'c_7c062386d4062b360d721e0e1bc0a53613175097e68c993e673e3c470b00722d@group.calendar.google.com',\n          googleCalendarApiKey: 'AIzaSyB3QjiqHsTavbAKkybK0h_Mvn1N5vKZrfc'\n        }],\n        eventClick: function(info) {\n            info.jsEvent.preventDefault();\n            document.getElementById('cc-event-title').textContent = info.event.title || '';\n            \/\/ Format date\/time\n            let dateText = '';\n            if (info.event.allDay) {\n              let start = info.event.start;\n              let end = info.event.end ? new Date(info.event.end.getTime() - 1) : start;\n              if (start && end) {\n                if (start.toDateString() !== end.toDateString()) {\n                  dateText = start.toLocaleDateString() + ' - ' + end.toLocaleDateString();\n                } else {\n                  dateText = start.toLocaleDateString();\n                }\n              }\n            } else {\n              dateText = info.event.start ? info.event.start.toLocaleString() : '';\n              if (info.event.end) {\n                dateText += ' - ' + info.event.end.toLocaleString();\n              }\n            }\n            document.getElementById('cc-event-datetime').textContent = dateText;\n            document.getElementById('cc-event-location').textContent = info.event.extendedProps.location ? 'Location: ' + info.event.extendedProps.location : '';\n            document.getElementById('cc-event-description').textContent = info.event.extendedProps.description || '';\n            document.getElementById('cc-event-modal').style.display = 'flex';\n        }\n      });\n      calendar.render();\n\n      \/\/ Close modal logic\n      var closeBtn = document.getElementById('cc-event-modal-close');\n      var modal = document.getElementById('cc-event-modal');\n      if (closeBtn && modal) {\n        closeBtn.onclick = function() { modal.style.display = 'none'; };\n        modal.onclick = function(e) { if (e.target === modal) modal.style.display = 'none'; };\n      }\n    });\n    <\/script>\n    <style>\n    #central-fullcalendar {\n      width: 75vw;\n      max-width: 75%;\n      min-width: 0;\n      margin: 30px auto;\n      background: #fff;\n      border-radius: 10px;\n      box-shadow: 0 0 10px rgba(0,0,0,0.08);\n      overflow: visible;\n    }\n    .fc {\n      min-width: 0;\n      width: 100% !important;\n      box-sizing: border-box;\n    }\n    .fc-scroller {\n      overflow: visible !important;\n    }\n\n    \/* Modern FullCalendar button styles *\/\n    .fc .fc-button {\n      background: #2155CD;\n      color: #fff;\n      border: none;\n      border-radius: 24px;\n      padding: 8px 22px;\n      font-size: 1em;\n      box-shadow: 0 1px 6px rgba(33,85,205,0.07);\n      transition: background 0.18s, color 0.18s, box-shadow 0.18s, transform 0.12s;\n      font-family: inherit;\n      margin: 0 2px;\n      font-weight: 500;\n      cursor: pointer;\n    }\n    .fc .fc-button:hover,\n    .fc .fc-button:focus {\n      background: #163172;\n      color: #f1f6fc;\n      box-shadow: 0 2px 10px rgba(33,85,205,0.14);\n      transform: translateY(-2px) scale(1.03);\n      outline: none;\n    }\n    .fc .fc-button.fc-button-active, \n    .fc .fc-button:active {\n      background: #FF6F3C;\n      color: #fff;\n      box-shadow: 0 2px 14px rgba(255,111,60,0.14);\n      transform: scale(0.98);\n    }\n    .fc .fc-button:disabled {\n      opacity: 0.5;\n      cursor: default;\n    }\n\n    @media (max-width: 1000px) {\n      #central-fullcalendar {\n        width: 98vw;\n        min-width: 0 !important;\n        max-width: 100vw;\n        margin: 10px auto;\n      }\n      .fc .fc-toolbar-title {\n        font-size: 1.05em;\n      }\n      .fc .fc-button {\n        padding: 7px 12px;\n        font-size: 0.98em;\n      }\n    }\n    @media (max-width: 700px) {\n      #central-fullcalendar {\n        width: 100vw;\n        max-width: 100vw;\n        min-width: 0 !important;\n        margin: 2vw 0;\n        border-radius: 4px;\n        box-shadow: none;\n      }\n      .fc .fc-toolbar {\n        flex-direction: column;\n        gap: 7px;\n        text-align: center;\n      }\n      .fc .fc-toolbar-title {\n        font-size: 1em;\n        font-weight: 600;\n      }\n      .fc .fc-button {\n        font-size: 0.92em;\n        padding: 7px 10px;\n        border-radius: 16px;\n      }\n      .fc .fc-col-header-cell, .fc .fc-daygrid-day {\n        font-size: 0.91em;\n      }\n    }\n\n    \/* Modal styling (desktop fix) *\/\n    #cc-event-modal {\n      display: none;\n      position: fixed;\n      z-index: 9999;\n      left: 0;\n      top: 0;\n      width: 100vw;\n      height: 100vh;\n      background: rgba(0,0,0,0.5);\n      align-items: center;\n      justify-content: center;\n    }\n    #cc-event-modal[style*=\"display: flex\"] {\n      display: flex !important;\n    }\n    #cc-event-modal-content {\n      background: #fff;\n      padding: 18px 15px;\n      border-radius: 13px;\n      max-width: 420px;\n      width: 94vw;\n      min-width: 0;\n      max-height: 86vh;\n      overflow: auto;\n      position: relative;\n      box-shadow: 0 0 22px rgba(30,60,120,0.14);\n      animation: ccModalIn 0.18s;\n      font-size: 1.01em;\n    }\n    @media (max-width: 700px) {\n      #cc-event-modal-content {\n        padding: 10px 4vw;\n        max-width: 96vw;\n        width: 94vw;\n        min-width: 0;\n        font-size: 1em;\n      }\n      #cc-event-modal-close {\n        font-size: 1.7em;\n        right: 4vw;\n        top: 7px;\n      }\n    }\n    @keyframes ccModalIn {\n      from { transform: scale(0.95); opacity: 0.7; }\n      to   { transform: scale(1); opacity: 1; }\n    }\n    #cc-event-modal-close {\n      position: absolute;\n      right: 10px;\n      top: 10px;\n      font-size: 24px;\n      color: #2155CD;\n      background: transparent;\n      border: none;\n      cursor: pointer;\n      transition: color .15s;\n    }\n    #cc-event-modal-close:hover {\n      color: #FF6F3C;\n    }\n    <\/style>\n    \n","protected":false},"excerpt":{"rendered":"<p>Central Calendar<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-350","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/centralchapel.org\/index.php?rest_route=\/wp\/v2\/pages\/350","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/centralchapel.org\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/centralchapel.org\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/centralchapel.org\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/centralchapel.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=350"}],"version-history":[{"count":88,"href":"https:\/\/centralchapel.org\/index.php?rest_route=\/wp\/v2\/pages\/350\/revisions"}],"predecessor-version":[{"id":439,"href":"https:\/\/centralchapel.org\/index.php?rest_route=\/wp\/v2\/pages\/350\/revisions\/439"}],"wp:attachment":[{"href":"https:\/\/centralchapel.org\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=350"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}