Widget:Calendar

<script>

function attachDateSelectEvents() {
   document.querySelectorAll('.has-event').forEach(td => {
       td.addEventListener('click', () => {
           const eventDate = td.getAttribute('data-eventdate');

           document.querySelectorAll('.has-event.active').forEach(activeTd => {
               activeTd.classList.remove('active');
           });

           const activeRow = document.querySelector('.calendar tr.active');
           if (activeRow) {
               activeRow.classList.remove('active');
           }

           const activeMonth = document.querySelector('.calendar tbody.active');
           if (activeMonth) {
               activeMonth.classList.remove('active');
           }

           const calendarLabel = document.querySelector('.calendar-label');
           if (calendarLabel) {
               calendarLabel.classList.remove('bg-primary');
           }

           // Add .active to the clicked one
           td.classList.add('active');

           // Call the Lua module via MediaWiki API
           fetch(mw.util.wikiScript('api'), {
               method: 'POST',
               headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
               body: new URLSearchParams({
                   action: 'parse',
                   format: 'json',
                   text: `}`,
               })
           })
           .then(response => response.json())
           .then(data => {
               if (data.parse ) {
                 if ( data.parse.text) {
                   document.querySelector('#calendar-results').innerHTML = data.parse.text['*'];
                 }
               }
           })
           .catch(err => console.error('Error fetching events:', err));
       });
   });
}

function attachWeekSelectEvents() {

   document.querySelectorAll('.week-number').forEach(td => {
       td.addEventListener('click', () => {
           const weekStart = td.getAttribute('data-week-start');
           const weekEnd = td.getAttribute('data-week-end');

           document.querySelectorAll('[data-week-start]').forEach(activeTd => {
               activeTd.parentElement.classList.remove('active');
           });

           document.querySelectorAll('.has-event.active').forEach(activeTd => {
               activeTd.classList.remove('active');
           });

           document.querySelectorAll('tbody.active').forEach(activeTd => {
               activeTd.classList.remove('active');
           });

           document.querySelectorAll('.calendar-label.bg-primary').forEach(activeTd => {
               activeTd.classList.remove('bg-primary');
           });

           // Add .active to the clicked one
           td.parentElement.classList.add('active');

           // Call the Lua module via MediaWiki API
           fetch(mw.util.wikiScript('api'), {
               method: 'POST',
               headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
               body: new URLSearchParams({
                   action: 'parse',
                   format: 'json',
                   text: `}`,
               })
           })
           .then(response => response.json())
           .then(data => {
               if (data.parse ) {
                 if ( data.parse.text) {
                   document.querySelector('#calendar-results').innerHTML = data.parse.text['*'];
                 }
               }
           })
           .catch(err => console.error('Error fetching events:', err));
       });
   });
}

function monthSelectAuto(){

const fullMonthSelect = document.querySelector('.calendar-header .calendar-label'); if (!fullMonthSelect) { return; } fullMonthSelect.click();

}

function attachMonthChangeEvents() {
   document.querySelectorAll('.change-month').forEach(td => {
       td.addEventListener('click', () => {
           const eventDate = td.getAttribute('data-eventdate');

           // Call the Lua module via MediaWiki API
           fetch(mw.util.wikiScript('api'), {
               method: 'POST',
               headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
               body: new URLSearchParams({
                   action: 'parse',
                   format: 'json',
                   // You probably meant to call your Lua module, not show an error:
                   text: `}`
               })
           })
           .then(response => response.json())
           .then(data => {
               if (data.parse ){ 
                 if ( data.parse.text) {
                   const wrapper = document.querySelector('.calendar-wrapper').parentElement;
                   wrapper.innerHTML = data.parse.text['*'];

                   // Reattach events after updating DOM
                   attachMonthChangeEvents();
                   attachDateSelectEvents();
                   attachWeekSelectEvents();

                   document.querySelector('.current-month.has-event')?.click();

                   const headerLabel = wrapper.querySelector('.calendar-header .calendar-label');
                   const monthChangers = wrapper.querySelectorAll('.change-month');

                   if (monthChangers.length && td.closest('.calendar-header')) {
                     headerLabel.removeEventListener('click', monthSelectAuto);
                     headerLabel.addEventListener('click', monthSelectAuto);
                     headerLabel.click();
                   }
                 }
               }
           })
           .catch(err => console.error('Error reloading calendar:', err));
       });
   });
}

// Initial attach on page load
attachMonthChangeEvents();
attachDateSelectEvents();
attachWeekSelectEvents();

document.addEventListener('click', function (e) {

 const label = e.target.closest('.calendar-label');
 if (!label) return;

 const wrapper = label.closest('.calendar-wrapper');
 if (!wrapper) return;

 const calendar = wrapper.querySelector('table.calendar');
 if (!calendar) return;

 const tbody = calendar.querySelector('tbody');
 if (!tbody) return;
 
 const trow =  calendar.querySelector('tr.active');

 if (trow) {
   trow.classList.remove('active');
 }

 tbody.classList.add('active');
 label.classList.add('bg-primary');

 const dateAfter = label.getAttribute('data-dateafter');
 const dateBefore = label.getAttribute('data-datebefore');

 // Call the Lua module via MediaWiki API
 fetch(mw.util.wikiScript('api'), {
    method: 'POST',
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
    body: new URLSearchParams({
       action: 'parse',
       format: 'json',
       text: `}`,
    })
 })
 .then(response => response.json())
 .then(data => {
    if (data.parse ) {
       if ( data.parse.text) {
           document.querySelector('#calendar-results').innerHTML = data.parse.text['*'];
       }
    }
 });

}); </script>