let piecalAJAX = { ajaxURL: "http://ipa-dk.dk/ipa-dk/wp-admin/admin-ajax.php", ajaxNonce: "12954ce606" } let alreadyExpandedOccurrences = []; document.addEventListener('DOMContentLoaded', function() { var pieCalendarFirstLoad = true; var calendarEl = document.getElementById('calendar'); var calendar = new FullCalendar.Calendar(calendarEl, { headerToolbar: false, initialView: "dayGridMonth", editable: false, events: [{"title":"Sort Sol – Midt og Vestsjælland","start":"2025-10-09T12:00:00","end":"2025-10-12T12:00:00","details":"Midt og Vestsjælland  SORT SOL 9-12 okt 2025 og meget mere omkring Syd og Sønderjylland, vi kører med BUS. \/ FÅ PLADSER Kontakt XXX for yderligere information.","permalink":"http:\/\/ipa-dk.dk\/ipa-dk\/sort-sol-2\/","postType":"Page","postId":6164,"allDay":"1"}], direction: "ltr", contentHeight: "auto", locale: "en-US", eventTimeFormat: {"hour":"2-digit","minute":"2-digit"}, dayHeaderFormat: { weekday: 'long' }, eventClick: function( info ) { Alpine.store("calendarEngine").eventTitle = info.event._def.title; Alpine.store("calendarEngine").eventStart = info.event.start; Alpine.store("calendarEngine").eventEnd = info.event.end; Alpine.store("calendarEngine").eventDetails = info.event._def.extendedProps.details; Alpine.store("calendarEngine").eventUrl = info.event._def.extendedProps.permalink; Alpine.store("calendarEngine").eventAllDay = info.event.allDay; Alpine.store("calendarEngine").eventType = info.event._def.extendedProps.postType; Alpine.store('calendarEngine').showPopover = true; Alpine.store('calendarEngine').eventActualEnd = info.event._def.extendedProps.actualEnd; Alpine.store('calendarEngine').appendOffset = ""; // Always pass through event data via the URL if it's a recurring instance, or if adaptive timezones are enabled. // Do not pass through event data via the URL if it's a non-recurring instance and adaptive timezones are disabled. if( info.event._def.extendedProps.isRecurringInstance || ( !info.event._def.extendedProps.isRecurringInstance && piecalVars.useAdaptiveTimezones && Alpine.store('calendarEngine').appendOffset ) ) { // Construct the URL with parameters const baseUrl = info.event._def.extendedProps.permalink; const eventStart = new Date( info.event.start ); const eventEnd = new Date( info.event.end ); const viewerTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone; const url = new URL( baseUrl ); url.searchParams.append( 'eventstart', Math.floor( eventStart.getTime() / 1000 ) ); url.searchParams.append( 'eventend', Math.floor( eventEnd.getTime() / 1000 ) ); url.searchParams.append( 'timezone', viewerTimezone ); // Assign the constructed URL to the store Alpine.store("calendarEngine").eventUrl = url.toString(); } if( info.jsEvent.type == "keydown" ) { setTimeout( () => { document.querySelector('.piecal-popover__inner > button').focus(); }, 100); } }, eventDataTransform: function(event) { // Safely decode encoded HTML entities for output as titles let scrubber = document.createElement('textarea'); scrubber.innerHTML = event.title; event.title = scrubber.value; // Extend end date for all day events that span multiple days let { actualEnd, end } = piecalUtils.getAlldayMultidayEventEnd( event ) ?? {}; if( actualEnd && end ) { event.actualEnd = actualEnd; event.end = end; } return event; }, dateClick: function( info ) { if( info.jsEvent.target.tagName != 'A' ) return; this.gotoDate(info.dateStr); piecalChangeView('listDay'); }, eventDidMount: function( info ) { let link = info.el; const locale = info.view.dateEnv.locale.codeArg; const formattedTime = new Intl.DateTimeFormat(locale, { hour: 'numeric', minute: 'numeric', hour12: true }); const formattedDate = new Intl.DateTimeFormat(locale, { day: 'numeric', month: 'numeric', year: 'numeric' }); if( link.tagName == 'TR' ) { link = info.el.querySelector('a'); } if( !link || link.tagName != "A" ) return; link.setAttribute('role', 'button'); link.setAttribute('href', 'javascript:void(0)'); if( info.event.allDay ) { /* Translators: Text for all-day event description. */ const allDayDescriptionText = 'All-day event'; link.setAttribute('aria-label', `${allDayDescriptionText} - ${info.event.title}`); } // Handle multi-day event aria label to let screen readers know the event spans multiple days if( info.event.end && (info.event.end - info.event.start) > (24 * 60 * 60 * 1000) ) { const startDate = formattedDate.format(info.event.start); const startTime = info.event.allDay ? '' : formattedTime.format(info.event.start); const endDate = formattedDate.format(info.event.end); const endTime = info.event.allDay ? '' :formattedTime.format(info.event.end); /* Translators: Text describing span of multi-day event. */ const spanText = 'to'; /* Translators: Text for multi-day event description. */ const multiDayDescriptionText = 'Multi-day event running from'; /* Translators: Text for multi-day all-day event description. */ const multiDayAllDayDescriptionText = 'Multi-day, all-day event running from'; const descriptionText = info.event.allDay ? multiDayAllDayDescriptionText : multiDayDescriptionText; /* Translators: Text describing span of multi-day event. */ link.setAttribute('aria-label', `${descriptionText} ${startDate} ${startTime} ${spanText} ${endDate} ${endTime} - ${info.event.title}`); } }, dayCellDidMount: function( info ) { let dayLink = info.el.querySelector('.fc-daygrid-day-top a'); if( !dayLink ) return; dayLink.setAttribute('role', 'button'); dayLink.setAttribute('href', 'javascript:void(0)'); // Prevent double read out of button label dayLink.closest('td').removeAttribute('aria-labelledby'); setTimeout( () => { if( info.el.querySelector('.fc-daygrid-day-events .fc-daygrid-event-harness') ) { dayLink.setAttribute('aria-label', dayLink.getAttribute('aria-label') + ', has events.'); } }, 100); dayLink.addEventListener('keydown', (event) => { if( event.key == "Enter" || event.key == ' ' ) { event.preventDefault(); window.calendar.gotoDate(info.date); piecalChangeView('listDay'); setTimeout( () => { let focusTarget = document.querySelector('.fc-list-day-text'); focusTarget?.setAttribute('tabindex', '0'); focusTarget?.focus(); }, 100); } }) }, dayHeaderContent: function( info ) { let overriddenDayHeaderViews = ['dayGridMonth', 'timeGridWeek', 'dayGridWeek']; if( overriddenDayHeaderViews.includes(info.view.type) ) { return ''; } return info.text; }, dayHeaderDidMount: function( info ) { let dayHeaderLink = info.el.querySelector('a'); let fullDayName = piecalUtils.getShortenedDayNames(info.text, 'full'); let shortDayName = piecalUtils.getShortenedDayNames(info.text, 'short'); let singleLetterDayName = piecalUtils.getShortenedDayNames(info.text, 'single'); let shortenableViews = ['dayGridMonth', 'timeGridWeek', 'dayGridWeek']; if( shortenableViews.includes(info.view.type) ) { dayHeaderLink.innerHTML = `${fullDayName} ${shortDayName} ${singleLetterDayName}`; } }, }); calendar.render(); window.calendar = calendar; }); function piecalChangeView( view ) { document.querySelector('.piecal-wrapper').setAttribute('data-view', view); window.calendar.changeView(view); Alpine.store('calendarEngine').calendarView = view; Alpine.store('calendarEngine').viewTitle = window.calendar.currentData.viewTitle; Alpine.store('calendarEngine').viewSpec = window.calendar.currentData.viewSpec.buttonTextDefault; } function piecalGotoToday() { console.log('today'); } function piecalNextInView() { window.calendar.next(); } function piecalPreviousInView() { console.log('prev'); } function piecalSkipCalendar() { let focusedCalendar = document.querySelector('.piecal-wrapper:focus-within'); let focusablesInCalendar = focusedCalendar.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"]'); let lastFocusable = focusablesInCalendar[focusablesInCalendar.length - 1]; let focusablesInDocument = document.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"]'); let targetFocusable = Array.prototype.indexOf.call(focusablesInDocument, lastFocusable) + 1; focusablesInDocument[targetFocusable].focus(); } document.addEventListener('alpine:init', () => { Alpine.store('calendarEngine', { viewTitle: "Loading", viewSpec: "Loading", buttonText: {}, showPopover: false, locale: "en-US", localeDateStringFormat: {"hour":"2-digit","minute":"2-digit"}, allDayLocaleDateStringFormat: [], calendarView: "dayGridMonth", eventTitle: "Loading...", eventDetails: "Loading...", eventType: "Loading...", eventStart: "Loading...", eventAllDay: false, eventActualEnd: null, eventEnd: "Loading...", eventUrl: "/", safeOutput( input ) { let scrubber = document.createElement('textarea'); scrubber.innerHTML = input; return scrubber.value; } }) }) window.addEventListener('DOMContentLoaded', () => { Alpine.store('calendarEngine').viewTitle = window.calendar.currentData.viewTitle; Alpine.store('calendarEngine').viewSpec = window.calendar.currentData.viewSpec.buttonTextDefault; Alpine.store('calendarEngine').buttonText = window.calendar.currentData.localeDefaults.buttonText; }) window.addEventListener('keydown', (e) => { if( e.keyCode == 27 || e.key == 'Escape' ) Alpine.store('calendarEngine').showPopover = false; })