{"id":1641,"date":"2025-11-25T15:11:27","date_gmt":"2025-11-25T20:11:27","guid":{"rendered":"https:\/\/pridecenterflorida.org\/rooms\/?page_id=1641"},"modified":"2025-12-09T16:31:19","modified_gmt":"2025-12-09T21:31:19","slug":"daily-on-campus","status":"publish","type":"page","link":"https:\/\/pridecenterflorida.org\/rooms\/daily-on-campus\/","title":{"rendered":"Daily on Campus"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"1641\" class=\"elementor elementor-1641\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9cbf5e3 e-con-full e-flex e-con e-parent\" data-id=\"9cbf5e3\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;jet_parallax_layout_list&quot;:[]}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-58a5a72 elementor-widget elementor-widget-html\" data-id=\"58a5a72\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- FullCalendar CSS -->\r\n<link href=\"https:\/\/cdn.jsdelivr.net\/npm\/fullcalendar@6.1.10\/index.global.min.css\" rel=\"stylesheet\" \/>\r\n\r\n<!-- FullCalendar JS -->\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/fullcalendar@6.1.10\/index.global.min.js\"><\/script>\r\n\r\n<!-- Calendar Container -->\r\n<div id=\"daily-campus-calendar\"><\/div>\r\n\r\n<!-- Custom Event Modal -->\r\n<div id=\"event-modal\" class=\"event-modal\">\r\n  <div class=\"event-modal-overlay\"><\/div>\r\n  <div class=\"event-modal-content\">\r\n    <button class=\"event-modal-close\">&times;<\/button>\r\n    <h2 id=\"modal-event-title\"><\/h2>\r\n    <div class=\"event-modal-body\">\r\n      <div class=\"event-detail\">\r\n        <strong>Date:<\/strong>\r\n        <span id=\"modal-event-date\"><\/span>\r\n      <\/div>\r\n      <div class=\"event-detail\">\r\n        <strong>Start:<\/strong>\r\n        <span id=\"modal-event-start\"><\/span>\r\n      <\/div>\r\n      <div class=\"event-detail\">\r\n        <strong>End:<\/strong>\r\n        <span id=\"modal-event-end\"><\/span>\r\n      <\/div>\r\n      <div class=\"event-detail event-info-section\">\r\n        <strong>Details:<\/strong>\r\n        <div id=\"modal-event-info\"><\/div>\r\n      <\/div>\r\n\r\n      <!-- Add to Google Calendar button -->\r\n      <div class=\"event-detail\">\r\n        <a id=\"modal-add-to-google\"\r\n           href=\"#\"\r\n           target=\"_blank\"\r\n           rel=\"noopener noreferrer\"\r\n           class=\"event-google-button\">\r\n          Add to Google Calendar\r\n        <\/a>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<!-- Calendar Init -->\r\n<script>\r\nwindow.addEventListener('load', function() {\r\n  var calendarEl = document.getElementById('daily-campus-calendar');\r\n\r\n  if (!calendarEl) {\r\n    console.error('Calendar element not found');\r\n    return;\r\n  }\r\n\r\n  \/\/ Helper: convert time string like \"9:00am\" to minutes from midnight (for sorting)\r\n  function timeStringToMinutes(str) {\r\n    if (!str) return 0;\r\n    var parts = str.split('-');\r\n    var start = parts[0].trim();\r\n\r\n    var m = start.match(\/^(\\d{1,2}):(\\d{2})\\s*(am|pm)$\/i);\r\n    if (!m) return 0;\r\n\r\n    var hour = parseInt(m[1], 10);\r\n    var min  = parseInt(m[2], 10);\r\n    var ampm = m[3].toLowerCase();\r\n\r\n    if (ampm === 'pm' && hour !== 12) hour += 12;\r\n    if (ampm === 'am' && hour === 12) hour = 0;\r\n\r\n    return hour * 60 + min;\r\n  }\r\n\r\n  \/\/ Convert \"9:00am\" -> \"09:00\"\r\n  function to24Hour(timeStr) {\r\n    if (!timeStr) return '00:00';\r\n    var m = timeStr.match(\/^(\\d{1,2}):(\\d{2})\\s*(am|pm)$\/i);\r\n    if (!m) return '00:00';\r\n    var h = parseInt(m[1], 10);\r\n    var mm = m[2];\r\n    var ampm = m[3].toLowerCase();\r\n    if (ampm === 'pm' && h !== 12) h += 12;\r\n    if (ampm === 'am' && h === 12) h = 0;\r\n    return (h < 10 ? '0' + h : '' + h) + ':' + mm;\r\n  }\r\n\r\n  \/\/ Build a Google Calendar event URL\r\n  function buildGoogleCalendarUrl(title, dateObj, startTimeStr, endTimeStr, description) {\r\n    var d = (dateObj instanceof Date && !isNaN(dateObj)) ? dateObj : new Date();\r\n\r\n    var year  = d.getFullYear();\r\n    var month = String(d.getMonth() + 1).padStart(2, '0');\r\n    var day   = String(d.getDate()).padStart(2, '0');\r\n    var ymd   = '' + year + month + day;\r\n\r\n    var startTime24 = to24Hour(startTimeStr);                 \/\/ \"09:00\"\r\n    var endTime24   = to24Hour(endTimeStr || startTimeStr);   \/\/ fallback to same\r\n\r\n    var startT = startTime24.replace(':', '') + '00'; \/\/ \"090000\"\r\n    var endT   = endTime24.replace(':', '') + '00';\r\n\r\n    \/\/ \"Floating\" local time, no timezone suffix\r\n    var dates = ymd + 'T' + startT + '\/' + ymd + 'T' + endT;\r\n\r\n    var base = 'https:\/\/calendar.google.com\/calendar\/render?action=TEMPLATE';\r\n    var params = new URLSearchParams({\r\n      text: title || 'Event',\r\n      dates: dates,\r\n      details: description || ''\r\n    });\r\n\r\n    return base + '&' + params.toString();\r\n  }\r\n\r\n  \/\/ Modal functions\r\n  function openModal(title, dateLabel, start, end, info, startDateObj) {\r\n    var modal = document.getElementById('event-modal');\r\n    \r\n    document.getElementById('modal-event-title').textContent = title;\r\n    document.getElementById('modal-event-date').textContent  = dateLabel;\r\n    document.getElementById('modal-event-start').textContent = start;\r\n    document.getElementById('modal-event-end').textContent   = end;\r\n    document.getElementById('modal-event-info').innerHTML    = info || 'No additional details available.';\r\n\r\n    \/\/ Set Google Calendar link\r\n    var gcalLink = document.getElementById('modal-add-to-google');\r\n    if (gcalLink) {\r\n      var gcalUrl = buildGoogleCalendarUrl(title, startDateObj, start, end, info);\r\n      gcalLink.href = gcalUrl;\r\n    }\r\n    \r\n    modal.classList.add('active');\r\n    document.body.style.overflow = 'hidden'; \/\/ Prevent background scrolling\r\n  }\r\n\r\n  function closeModal() {\r\n    var modal = document.getElementById('event-modal');\r\n    modal.classList.remove('active');\r\n    document.body.style.overflow = ''; \/\/ Restore scrolling\r\n  }\r\n\r\n  \/\/ Close modal on X button click\r\n  document.querySelector('.event-modal-close').addEventListener('click', closeModal);\r\n\r\n  \/\/ Close modal on overlay click\r\n  document.querySelector('.event-modal-overlay').addEventListener('click', closeModal);\r\n\r\n  \/\/ Close modal on ESC key\r\n  document.addEventListener('keydown', function(e) {\r\n    if (e.key === 'Escape') {\r\n      closeModal();\r\n    }\r\n  });\r\n\r\n  var calendar = new FullCalendar.Calendar(calendarEl, {\r\n    initialView: 'dayGridMonth',\r\n    headerToolbar: {\r\n      left: 'prev,next today',\r\n      center: 'title',\r\n      right: 'dayGridMonth,listWeek'\r\n    },\r\n    buttonText: {\r\n      today: 'Today',\r\n      dayGridMonth: 'Calendar',\r\n      listWeek: 'Week'\r\n    },\r\n\r\n    height: 'auto',\r\n    expandRows: true,\r\n    dayMaxEvents: 4,\r\n\r\n    events: function(info, successCallback, failureCallback) {\r\n      fetch('\/rooms\/wp-json\/pcf\/v1\/bookings?start=' + info.startStr + '&end=' + info.endStr)\r\n        .then(function(response) { return response.json(); })\r\n        .then(function(events) {\r\n          events.forEach(function(event) {\r\n            if (event.extendedProps && event.extendedProps.setupTime) {\r\n              var timeText = event.extendedProps.setupTime + ' - ' + (event.extendedProps.endTime || '');\r\n              event.extendedProps.sortTime = timeStringToMinutes(timeText);\r\n            } else {\r\n              event.extendedProps = event.extendedProps || {};\r\n              event.extendedProps.sortTime = 0;\r\n            }\r\n          });\r\n          successCallback(events);\r\n        })\r\n        .catch(failureCallback);\r\n    },\r\n    \r\n    eventDisplay: 'block',\r\n    eventOverlap: true,\r\n    eventOrder: 'sortTime',\r\n\r\n    eventContent: function(arg) {\r\n      try {\r\n        var ev = arg.event || {};\r\n        var ep = ev.extendedProps || {};\r\n        var viewType = arg.view ? arg.view.type : '';\r\n\r\n        var title    = ev.title || '';\r\n        var timeText = (ep.setupTime && ep.endTime)\r\n          ? (ep.setupTime + ' - ' + ep.endTime)\r\n          : '';\r\n        var roomName = ep.roomName || '';\r\n\r\n        \/\/ LIST VIEW\r\n        if (viewType.indexOf('list') === 0) {\r\n          var container = document.createElement('span');\r\n          container.className = 'fc-list-booking';\r\n\r\n          if (title) {\r\n            var spanTitle = document.createElement('span');\r\n            spanTitle.className = 'fc-list-title';\r\n            spanTitle.textContent = title;\r\n            container.appendChild(spanTitle);\r\n          }\r\n\r\n          if (timeText) {\r\n            if (title) {\r\n              var sep1 = document.createElement('span');\r\n              sep1.className = 'fc-list-separator';\r\n              sep1.textContent = ' | ';\r\n              container.appendChild(sep1);\r\n            }\r\n\r\n            var spanTime = document.createElement('span');\r\n            spanTime.className = 'fc-list-time';\r\n            spanTime.textContent = timeText;\r\n            container.appendChild(spanTime);\r\n          }\r\n\r\n          if (roomName) {\r\n            if (title || timeText) {\r\n              var sep2 = document.createElement('span');\r\n              sep2.className = 'fc-list-separator';\r\n              sep2.textContent = ' | ';\r\n              container.appendChild(sep2);\r\n            }\r\n\r\n            var spanRoom = document.createElement('span');\r\n            spanRoom.className = 'fc-list-room';\r\n            spanRoom.textContent = roomName;\r\n            container.appendChild(spanRoom);\r\n          }\r\n\r\n          return { domNodes: [container] };\r\n        }\r\n\r\n        \/\/ MONTH VIEW\r\n        var wrap = document.createElement('div');\r\n        wrap.className = 'booking-container';\r\n\r\n        if (title) {\r\n          var h3 = document.createElement('h3');\r\n          h3.textContent = title;\r\n          wrap.appendChild(h3);\r\n        }\r\n\r\n        if (timeText) {\r\n          var p = document.createElement('p');\r\n          p.className = 'booking-times';\r\n          p.textContent = timeText;\r\n          wrap.appendChild(p);\r\n        }\r\n\r\n        if (roomName) {\r\n          var pRoom = document.createElement('p');\r\n          pRoom.className = 'booking-room';\r\n          pRoom.textContent = roomName;\r\n          wrap.appendChild(pRoom);\r\n        }\r\n\r\n        return { domNodes: [wrap] };\r\n      } catch (e) {\r\n        console.error('eventContent error', e);\r\n        return { text: (arg.event && arg.event.title) ? arg.event.title : '' };\r\n      }\r\n    },\r\n\r\n    \/\/ Event Click Handler - Open Custom Modal\r\n    eventClick: function(info) {\r\n      info.jsEvent.preventDefault();\r\n\r\n      var event = info.event;\r\n      var ep = event.extendedProps || {};\r\n\r\n      var title = event.title || 'Event';\r\n      \r\n      var dateLabel = '';\r\n      if (event.start) {\r\n        try {\r\n          var d = event.start;\r\n          var months = ['January', 'February', 'March', 'April', 'May', 'June', \r\n                        'July', 'August', 'September', 'October', 'November', 'December'];\r\n          dateLabel = months[d.getMonth()] + ' ' + d.getDate() + ', ' + d.getFullYear();\r\n        } catch (e) {\r\n          dateLabel = event.startStr || '';\r\n        }\r\n      }\r\n      \r\n      if (ep.advanced_date) {\r\n        dateLabel = ep.advanced_date;\r\n      }\r\n\r\n      var eventStart = ep.event_start || ep.setupTime || '';\r\n      var eventEnd   = ep.event_end   || ep.endTime   || '';\r\n      var eventInfo  = ep.event_info  || '';\r\n\r\n      \/\/ Open the custom modal, passing the actual Date object for Google Calendar\r\n      openModal(title, dateLabel, eventStart, eventEnd, eventInfo, event.start);\r\n    }\r\n  });\r\n\r\n  calendar.render();\r\n});\r\n<\/script>\r\n\r\n<style>\r\n\/* Calendar event base styling *\/\r\n.fc .fc-daygrid-event {\r\n  white-space: normal;\r\n  background: transparent !important;\r\n  border: 0 !important;\r\n  padding: 2px 3px;\r\n  border-radius: 6px;\r\n  cursor: pointer;\r\n}\r\n.fc .fc-daygrid-event * {\r\n  color: inherit;\r\n}\r\n.fc .fc-event {\r\n  background: transparent !important;\r\n  border: 0 !important;\r\n}\r\n.fc .fc-daygrid-event:hover {\r\n  background-color: rgba(0, 0, 0, 0.05) !important;\r\n}\r\n.fc .fc-daygrid-event-dot {\r\n  display: none;\r\n}\r\n\r\n\/* Booking card styling *\/\r\n.booking-container {\r\n  background: #fff;\r\n  border-radius: 6px;\r\n  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);\r\n  padding: 4px 6px;\r\n  transition: box-shadow 0.2s ease;\r\n}\r\n.booking-container:hover {\r\n  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);\r\n}\r\n.booking-container h3 {\r\n  font-size: 14px;\r\n  font-weight: bold;\r\n  margin: 0 0 2px;\r\n  line-height: 1em !important;\r\n  color: #222;\r\n}\r\n.booking-container .booking-times {\r\n  font-size: 12px;\r\n  margin: 0 0 2px;\r\n  opacity: 0.85;\r\n  color: #333;\r\n}\r\n.booking-container .booking-room {\r\n  font-size: 11px;\r\n  margin: 0;\r\n  opacity: 0.75;\r\n  color: #555;\r\n  font-style: italic;\r\n}\r\n.fc-daygrid-day-events {\r\n  overflow: hidden;\r\n}\r\n.fc-day-sat .booking-container {\r\n  width: 92%;\r\n}\r\n\r\n\/* List view styling *\/\r\n.fc-list-table .fc-list-event-time {\r\n  display: none;\r\n}\r\n.fc-list-table .fc-list-event-dot {\r\n  display: none;\r\n}\r\n.fc-list-booking {\r\n  font-size: 14px;\r\n  color: #222;\r\n  cursor: pointer;\r\n}\r\n.fc-list-title {\r\n  font-weight: bold;\r\n  color: #222;\r\n}\r\n.fc-list-time {\r\n  color: #333;\r\n  opacity: 0.9;\r\n}\r\n.fc-list-room {\r\n  color: #555;\r\n  font-style: italic;\r\n}\r\n.fc-list-separator {\r\n  color: #999;\r\n}\r\n.fc-direction-ltr .fc-list-day-side-text {\r\n  float: left;\r\n}\r\n.fc-direction-ltr .fc-list-day-side-text:before {\r\n  content: \"-\";\r\n  margin: 0 10px;\r\n}\r\n\r\n\/* ========== CUSTOM MODAL STYLES ========== *\/\r\n.event-modal {\r\n  position: fixed;\r\n  top: 0;\r\n  left: 0;\r\n  width: 100%;\r\n  height: 100%;\r\n  z-index: 999999;\r\n  display: none;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n\r\n.event-modal.active {\r\n  display: flex;\r\n}\r\n\r\n.event-modal-overlay {\r\n  position: absolute;\r\n  top: 0;\r\n  left: 0;\r\n  width: 100%;\r\n  height: 100%;\r\n  background: rgba(0, 0, 0, 0.6);\r\n  cursor: pointer;\r\n}\r\n\r\n.event-modal-content {\r\n  position: relative;\r\n  background: #fff;\r\n  border-radius: 12px;\r\n  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);\r\n  max-width: 600px;\r\n  width: 90%;\r\n  max-height: 80vh;\r\n  overflow-y: auto;\r\n  padding: 30px;\r\n  z-index: 1;\r\n  animation: modalSlideIn 0.3s ease;\r\n}\r\n\r\n@keyframes modalSlideIn {\r\n  from {\r\n    opacity: 0;\r\n    transform: translateY(-30px);\r\n  }\r\n  to {\r\n    opacity: 1;\r\n    transform: translateY(0);\r\n  }\r\n}\r\n\r\n.event-modal-close {\r\n  position: absolute;\r\n  top: 15px;\r\n  right: 15px;\r\n  background: transparent;\r\n  border: none;\r\n  font-size: 32px;\r\n  line-height: 1;\r\n  color: #999;\r\n  cursor: pointer;\r\n  transition: color 0.2s ease;\r\n  padding: 0;\r\n  width: 32px;\r\n  height: 32px;\r\n}\r\n\r\n.event-modal-close:hover {\r\n  color: #333;\r\n}\r\n\r\n#modal-event-title {\r\n  font-size: 26px;\r\n  font-family: \"Kameron\", Sans-serif;\r\n  font-weight: 700;\r\n  margin: 0 0 20px;\r\n  color: var(--e-global-color-primary);\r\n  padding-right: 40px;\r\n}\r\n\r\n.event-modal-body {\r\n  font-size: 16px;\r\n  color: #444;\r\n}\r\n\r\n.event-detail {\r\n  margin-bottom: 15px;\r\n  display: flex;\r\n  gap: 10px;\r\n}\r\n\r\n.event-detail strong {\r\n  min-width: 70px;\r\n  color: #000;\r\n  font-weight: 600;\r\n}\r\n\r\n.event-detail span,\r\n.event-detail div {\r\n  flex: 1;\r\n  color: #000;\r\n}\r\n\r\n.event-info-section {\r\n  flex-direction: column;\r\n  margin-top: 20px;\r\n  padding-top: 20px;\r\n  border-top: 1px solid #eee;\r\n}\r\n\r\n.event-info-section strong {\r\n  margin-bottom: 8px;\r\n}\r\n\r\n#modal-event-info {\r\n  line-height: 1.6;\r\n  color: #444;\r\n}\r\n\r\n\/* Add to Google Calendar button *\/\r\n.event-google-button {\r\n  display: inline-block;\r\n  padding: 8px 14px;\r\n  border-radius: 4px;\r\n  background-color: #1a73e8;\r\n  color: #fff;\r\n  text-decoration: none;\r\n  font-size: 14px;\r\n  font-weight: 600;\r\n  margin-top: 5px;\r\n  transition: background-color 0.2s ease, box-shadow 0.2s ease;\r\n}\r\n\r\n.event-google-button:hover {\r\n  background-color: #1558b5;\r\n  box-shadow: 0 2px 6px rgba(0,0,0,0.2);\r\n  color: #fff;\r\n}\r\n\r\n\/* Mobile responsive *\/\r\n@media (max-width: 600px) {\r\n  .event-modal-content {\r\n    padding: 20px;\r\n    width: 95%;\r\n  }\r\n  \r\n  #modal-event-title {\r\n    font-size: 22px;\r\n  }\r\n  \r\n  .event-modal-body {\r\n    font-size: 14px;\r\n  }\r\n}\r\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>&times; Date: Start: End: Details: Add to Google 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-1641","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/pridecenterflorida.org\/rooms\/wp-json\/wp\/v2\/pages\/1641","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pridecenterflorida.org\/rooms\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/pridecenterflorida.org\/rooms\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/pridecenterflorida.org\/rooms\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/pridecenterflorida.org\/rooms\/wp-json\/wp\/v2\/comments?post=1641"}],"version-history":[{"count":127,"href":"https:\/\/pridecenterflorida.org\/rooms\/wp-json\/wp\/v2\/pages\/1641\/revisions"}],"predecessor-version":[{"id":1813,"href":"https:\/\/pridecenterflorida.org\/rooms\/wp-json\/wp\/v2\/pages\/1641\/revisions\/1813"}],"wp:attachment":[{"href":"https:\/\/pridecenterflorida.org\/rooms\/wp-json\/wp\/v2\/media?parent=1641"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}