Test Calendario - Visit Colli Marittimi

let piecalAJAX = {
ajaxURL: “https://www.visitcecina.com/visit/wp-admin/admin-ajax.php”,
ajaxNonce: “c09341e68a”
}

let alreadyExpandedOccurrences = [];

// 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 = ‘Evento intero giornata’;

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 = ‘a’;

/* Translators: Text for multi-day event description. */
const multiDayDescriptionText = ‘Evento multi data a partire da’;

/* Translators: Text for multi-day all-day event description. */
const multiDayAllDayDescriptionText = ‘Evento multi data intera giornata a partire da’;

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();
}

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;

})

Scegli visualizzazione

Mese (Griglia)

Mese (Lista)

Settimana (Griglia Oraria)

Settimana (Lista)

Settimana (Griglia)

Giorno