// Custom events section with items grouped by date const eventsApiConfigOverrides = { fetchAutomatically: false, requiredData: { limit: 32 }, }; document.addEventListener("appLoaded", async () => { const eventsSection = document.querySelector("#events-section-v17"); if (!eventsSection) return; // Try both attribute names const rawMax = eventsSection.getAttribute("data-max-events-per-day") ?? eventsSection.getAttribute("data-maxeventsperday"); // Parse and validate (must be > 0); default to 2 const parsed = Number.parseInt(rawMax, 10); const maxEventsPerDay = Number.isInteger(parsed) && parsed > 0 ? parsed : 2; try { const eventsConfig = ConfigDefaults.mergeWithEventsDefaults(eventsApiConfigOverrides); const dataFetcher = new DataFetcher(eventsConfig.apiURL); const fetchedData = await dataFetcher.fetchData(); if (!fetchedData) return; const eventsDataProcessor = new EventsDataProcessor(eventsConfig); const eventsHTMLBuilder = new EventsHTMLBuilder(eventsConfig); const processedData = eventsDataProcessor.processData(fetchedData.events); // Pass the dynamic maxEventsPerDay into the generator const eventsHTML = createEventsElementHTML( eventsHTMLBuilder, processedData, "event-item-v17", // cssClass 16, // maxGroups maxEventsPerDay // dynamic per-day limit ); eventsSection.innerHTML = eventsHTML; requestAnimationFrame(() => { const alias = window.clientWorkState?.alias ?? ""; const hrefValue = alias.length > 1 ? `/o/${alias}/events/` : "/events"; const eventsContainer = eventsSection.closest(".custom-events-v17"); // Update all "more" button links if container exists eventsContainer ?.querySelectorAll("a.js-events-more-button") .forEach((link) => link.setAttribute("href", hrefValue)); // Initialize Swiper only if eventsSection has the "hasSlider" class if (eventsSection.classList.contains("hasSlider")) { UtilityHelpers.createStructureForSwiper({ swiper: ".events-section-container-v17", swiperWrapper: "#events-section-v17", swiperSlide: ".event-item-v17", cssClass: "custom-events-v17-slider", }); new Swiper(".events-section-container-v17", { slidesPerView: 1, spaceBetween: 20, navigation: { nextEl: ".swiper-button-next-custom-events-v17-slider", prevEl: ".swiper-button-prev-custom-events-v17-slider", }, pagination: { el: ".swiper-pagination-custom-events-v17-slider", clickable: true, }, grid: { rows: 2, fill: 'column', }, breakpoints: { 768: { slidesPerView: 2, grid: { rows: 2, fill: 'column', }, }, 1041: { slidesPerView: 3, grid: { rows: 2, fill: 'column', }, }, 1200: { slidesPerView: 4, grid: { rows: 2, fill: 'column', }, }, 1400: { spaceBetween: 35, slidesPerView: 4, grid: { rows: 2, fill: 'column', }, }, }, }); } }); } catch (error) { console.error("Error fetching events data:", error); // Optionally, display a fallback UI/message here. } }); /** * Generates the HTML for events grouped by date. * * @param {EventsHTMLBuilder} eventsHTMLBuilder * @param {Array} eventsData * @param {string} [cssClass='event-item-v17'] * @param {number} [maxGroups=16] * @param {number} [maxEventsPerDay=2] * @returns {string} */ const createEventsElementHTML = ( eventsHTMLBuilder, eventsData, cssClass = "event-item-v17", maxGroups = 16, maxEventsPerDay = 2 ) => { const grouped = eventsData.reduce((acc, ev) => { const dateObj = new Date(ev.formatted_start); const key = `${ev.year}-${String(dateObj.getMonth() + 1).padStart(2, '0')}-${String(ev.day).padStart(2, '0')}`; (acc[key] ||= []).push(ev); return acc; }, {}); return Object.entries(grouped) .slice(0, maxGroups) .map(([date, events]) => { const first = events[0]; const { month, day } = eventsHTMLBuilder.formatDateComponent(first.formatted_start); const dateHTML = `

${month}

${day}

`; const itemsHTML = events .slice(0, maxEventsPerDay) .map((e) => { const url = eventsHTMLBuilder.generateReadMoreUrl(e.id); return `

${e.title}

${e.formatted_date}

`; }) .join(""); const moreHTML = events.length > maxEventsPerDay ? `

More Events

` : ""; return `

${dateHTML} ${itemsHTML} ${moreHTML}

`; }) .join(""); };

New Haven Public Schools