http://www.lisoloir.com/_assets/js/2025/cal-fix.js

1  document.addEventListener("DOMContentLoaded", function() {
2    // 1. Find all existing calendar asides
3    const calendars = document.querySelectorAll('aside.calendar');
4
5    calendars.forEach(calendar => {
6        // 2. Create the new container div
7        const grid = document.createElement('div');
8        grid.className = 'cc-events-grid';
9
10        // 3. Find all list items in the current calendar
11        const items = calendar.querySelectorAll('li');
12
13        items.forEach(li => {
14            // --- Extract Data from the Old Structure ---
15            
16            // Get the Link URL
17            const anchor = li.querySelector('a');
18            const href = anchor ? anchor.getAttribute('href') : '#';
19
20            // Get the Date Number (e.g., "29")
21            const dateNumSpan = li.querySelector('.event_datenum');
22            const dateNum = dateNumSpan ? dateNumSpan.textContent.trim() : '';
23
24            // Get the Title
25            const titleSpan = li.querySelector('.event_title');
26            const title = titleSpan ? titleSpan.textContent.trim() : 'Untitled Event';
27
28            // Get the Full Date/Time String
29            // We grab text from the <em> tag to get the start, end, and the dash between them
30            const dateTimeEm = li.querySelector('em');
31            // Clean up extra whitespace/newlines from the HTML source
32            let fullDateTime = dateTimeEm ? dateTimeEm.textContent.replace(/\s+/g, ' ').trim() : '';
33            // Optional: Remove the period after the day name if desired (Thu. -> Thu)
34            fullDateTime = fullDateTime.replace('.,', ','); 
35
36            // Calculate the 2-letter Day Name (e.g., "Thu., Jan" -> "TH")
37            let dayName = '';
38            if (fullDateTime) {
39                // Grab the first word, take first 2 letters, make uppercase
40                dayName = fullDateTime.split(/[.,\s]/)[0].substring(0, 2).toUpperCase();
41            }
42
43            // --- Build the New HTML Item ---
44            const itemHTML = `
45                <a href="/_assets/js/2025/${href}" class="cc-events-item-link">
46                    <article class="cc-events-item">
47                        <div class="cc-events-date-box">
48                            <span class="cc-events-day">${dayName}</span>
49                            <span class="cc-events-date">${dateNum}</span>
50                        </div>
51                        <div class="cc-events-content">
52                            <h3 class="cc-events-title-text">$</h3>
53                            <p class="cc-events-datetime">${fullDateTime}</p>
54                            <span class="cc-events-learn-more">Learn More</span>
55                        </div>
56                    </article>
57                </a>
58            `;
59
60            // Append this item to the new grid container
61            grid.insertAdjacentHTML('beforeend', itemHTML);
62        });
63
64        // 4. Swap the old aside with the new grid
65        // This removes <aside class="calendar"> and puts <div class="cc-events-grid"> in its place
66        calendar.replaceWith(grid);
67    });
68});