' + htmlEscape(dateLabel(current.year, current.month, dayNumber)) + '

'; events.forEach((eventData) => { html += eventButtonHtml(eventData); }); html += '

'; } agenda.innerHTML = html || '

No sessions match this filter.

'; } function renderCalendar() { const { daysInMonth, startOffset } = getMonthBounds(current.year, current.month); label.textContent = new Date(current.year, current.month - 1, 1).toLocaleDateString(undefined, { month: 'long', year: 'numeric' }); const totalCells = Math.ceil((startOffset + daysInMonth) / 7) * 7; const todayKey = dateKey(now.getFullYear(), now.getMonth() + 1, now.getDate()); let html = ''; for (let cell = 0; cell < totalCells; cell += 1) { const dayNumber = cell - startOffset + 1; const inMonth = dayNumber >= 1 && dayNumber <= daysInMonth; const key = inMonth ? dateKey(current.year, current.month, dayNumber) : ''; const events = inMonth ? filteredEventsForDate(key) : []; const visibleEvents = events.slice(0, 4); const dayClasses = ['ciq-monthly-calendar__day']; if (!inMonth) dayClasses.push('is-outside'); if (events.length) dayClasses.push('has-events'); if (key === todayKey) dayClasses.push('is-today'); html += '

'; html += '' + (inMonth ? dayNumber : '') + ''; if (inMonth && events.length) { html += '

'; visibleEvents.forEach((eventData) => { html += eventButtonHtml(eventData); }); if (events.length > visibleEvents.length) html += '+' + (events.length - visibleEvents.length) + ' more'; html += '

'; } html += '

'; } grid.innerHTML = html; renderAgenda(); } async function loadAndRender() { renderCalendar(); await loadEvents(); renderCalendar(); } function openDetail(eventId) { const eventData = allEvents.find((item) => item.id === eventId); if (!eventData) return; selectedEvent = eventData; lastFocusedElement = container.ownerDocument.activeElement; const program = eventData.program; const title = cleanTitle(eventData.source.title); const timeRange = eventData.slot.end ? fullTime(eventData.slot.start) + ' - ' + fullTime(eventData.slot.end) : fullTime(eventData.slot.start || eventData.slot.label); const details = [dateLabel(current.year, current.month, eventData.day), timeRange, durationText(eventData)].filter(Boolean).join(' - '); const remaining = getSlotRemaining(eventData.slot); const price = priceInfo(eventData.source); let badges = ''; if (remaining !== null && remaining <= 4) badges += '' + remaining + ' spots left'; if (price.type === 'free') badges += 'Free'; if (price.type === 'paid') badges += '' + htmlEscape(price.label) + ''; detail.style.setProperty('--detail-color', program.color); bookingStatus.textContent = ''; bookingStatus.classList.remove('is-error', 'is-success'); detailCta.disabled = false; detailCta.textContent = 'Finish signup'; detailKicker.textContent = program.label; detailTitle.textContent = title; detailMeta.textContent = details; detailBadges.innerHTML = badges; detail.hidden = false; backdrop.hidden = false; detailCta.focus(); } function closeDetail() { detail.hidden = true; backdrop.hidden = true; selectedEvent = null; if (lastFocusedElement && typeof lastFocusedElement.focus === 'function') lastFocusedElement.focus(); } prevBtn.addEventListener('click', () => { current.month -= 1; if (current.month < 1) { current.month = 12; current.year -= 1; } closeDetail(); loadAndRender(); }); nextBtn.addEventListener('click', () => { current.month += 1; if (current.month > 12) { current.month = 1; current.year += 1; } closeDetail(); loadAndRender(); }); todayBtn.addEventListener('click', () => { current = { year: now.getFullYear(), month: now.getMonth() + 1 }; closeDetail(); loadAndRender(); root.scrollIntoView({ behavior: 'smooth', block: 'start' }); }); filters.addEventListener('click', (event) => { const button = event.target.closest('.ciq-monthly-calendar__filter'); if (!button) return; activeProgram = button.dataset.program || 'All'; renderFilters(); renderCalendar(); }); container.addEventListener('click', (event) => { const button = event.target.closest('.ciq-monthly-calendar__pill'); if (!button) return; openDetail(button.dataset.eventId); }); detailCta.addEventListener('click', async () => { if (!selectedEvent || detailCta.disabled) return; const eventData = selectedEvent; const [year, month, day] = String(eventData.date || '').split('-').map(Number); const start = eventData.slot && eventData.slot.start; const end = eventData.slot && eventData.slot.end; const scheduling = { day, month, year, start, end }; const complete = eventData.source && eventData.source.id && Number.isInteger(day) && day >= 1 && day <= 31 && Number.isInteger(month) && month >= 1 && month <= 12 && Number.isInteger(year) && year >= 2000 && [start, end].every((value) => typeof value === 'string' && /^\d{1,2}:\d{2}/.test(value)); if (!complete) { bookingStatus.textContent = 'This time is no longer available. Please close this dialog and choose another time.'; bookingStatus.classList.add('is-error'); bookingStatus.classList.remove('is-success'); return; } detailCta.disabled = true; detailCta.textContent = 'Opening signup...'; bookingStatus.textContent = ''; bookingStatus.classList.remove('is-error', 'is-success'); try { const result = await CIQ.flow.identifyAndSubmit({ rootEl: container, sessionId: eventData.source.id, scheduling }); if (result && result.success) { bookingStatus.textContent = 'Booking complete.'; bookingStatus.classList.add('is-success'); detailCta.textContent = 'Booked'; await loadEvents(); renderCalendar(); } else { bookingStatus.textContent = (result && result.error) || 'Booking could not be completed. Please try again.'; bookingStatus.classList.add('is-error'); bookingStatus.classList.remove('is-success'); detailCta.disabled = false; detailCta.textContent = 'Try again'; } } catch (error) { bookingStatus.textContent = (error && error.message) || 'Booking could not be completed. Please try again.'; bookingStatus.classList.add('is-error'); bookingStatus.classList.remove('is-success'); detailCta.disabled = false; detailCta.textContent = 'Try again'; } }); backdrop.addEventListener('click', closeDetail); closeDetailBtn.addEventListener('click', closeDetail); detail.addEventListener('keydown', (event) => { if (event.key !== 'Tab') return; const focusable = Array.from(detail.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])')).filter((el) => !el.disabled && el.offsetParent !== null); if (!focusable.length) return; const first = focusable[0]; const last = focusable[focusable.length - 1]; if (event.shiftKey && container.ownerDocument.activeElement === first) { event.preventDefault(); last.focus(); } else if (!event.shiftKey && container.ownerDocument.activeElement === last) { event.preventDefault(); first.focus(); } }); container.ownerDocument.addEventListener('keydown', (event) => { if (event.key === 'Escape' && !detail.hidden) closeDetail(); }); loadAndRender();

Soccer Training Schedule | Impact Soccer and Fitness

Soccer Training Sessions