(async function() {
const container = document.querySelector('[data-att="new-calendar"]');
const blogUrl = container.getAttribute('data-url');
const fakeToday = new Date(2025, 11, 4); // December 4, 2025
container.innerHTML = '<div class="gwc-loading">Loading...</div>';
const response = await fetch(blogUrl);
const html = await response.text();
const parser = new DOMParser();
const doc = parser.parseFromString(html, 'text/html');
const articles = doc.querySelectorAll('.blog-item');
const posts = [];
articles.forEach(article => {
const link = article.querySelector('.blog-title a, .image-wrapper');
const img = article.querySelector('img[data-src], img[src]');
const dateEl = article.querySelector('.blog-date');
if (!link || !dateEl) return;
const href = link.getAttribute('href');
const imgSrc = img ? (img.getAttribute('data-src') || img.getAttribute('src')) : null;
const dateText = dateEl.textContent.trim();
const match = dateText.match(/(\d{1,2})\/(\d{1,2})\/(\d{2})/);
if (match) {
const [, month, day, year] = match;
const fullYear = 2000 + parseInt(year);
const date = new Date(fullYear, parseInt(month) - 1, parseInt(day));
posts.push({
date: date,
url: href,
image: imgSrc,
title: article.querySelector('.blog-title')?.textContent.trim() || ''
});
}
});
console.log('All posts:', posts);
const monthNames = ["January","February","March","April","May","June","July","August","September","October","November","December"];
const year = fakeToday.getFullYear();
const month = fakeToday.getMonth();
const weekStart = new Date(fakeToday);
const weekday = weekStart.getDay();
weekStart.setDate(fakeToday.getDate() - weekday);
const today = fakeToday;
const ty = today.getFullYear();
const tm = today.getMonth();
const td = today.getDate();
let daysHTML = '';
for (let i = 0; i < 7; i++) {
const d = new Date(weekStart);
d.setDate(weekStart.getDate() + i);
const dayTimestamp = new Date(d.getFullYear(), d.getMonth(), d.getDate()).getTime();
const matchingPost = posts.find(post => {
const postTimestamp = new Date(post.date.getFullYear(), post.date.getMonth(), post.date.getDate()).getTime();
return postTimestamp === dayTimestamp;
});
let classes = 'gwc-day';
if (d.getMonth() !== month) classes += ' gwc-day--other-month';
if (d.getFullYear() === ty && d.getMonth() === tm && d.getDate() === td) {
classes += ' gwc-day--today';
}
if (matchingPost) classes += ' gwc-day--has-post';
let innerContent = `<div class="gwc-day-number">${d.getDate()}</div>`;
if (matchingPost) {
const bgStyle = matchingPost.image
? `background-image: url('${matchingPost.image}'); background-size: cover; background-position: center;`
: '';
innerContent = `
<a href="${matchingPost.url}" class="gwc-day-link" title="${matchingPost.title || ''}">
<div class="gwc-day-image" style="${bgStyle}"></div>
<div class="gwc-day-number">${d.getDate()}</div>
</a>
`;
}
daysHTML += `
<div class="${classes}">
<div class="gwc-day-inner">
${innerContent}
</div>
</div>
`;
}
const calendarHTML = `
<div class="glassy-week-calendar">
<div class="gwc-inner">
<h1>
<div class="yui3-u yui3-calendar-header-label">${monthNames[month]} ${year}</div>
</h1>
<div class="gwc-weekdays">
<div aria-label="Sunday">SU</div>
<div aria-label="Monday">MO</div>
<div aria-label="Tuesday">TU</div>
<div aria-label="Wednesday">WE</div>
<div aria-label="Thursday">TH</div>
<div aria-label="Friday">FR</div>
<div aria-label="Saturday">SA</div>
</div>
<div class="gwc-days-row">
${daysHTML}
</div>
</div>
</div>
`;
container.innerHTML = calendarHTML;
console.log('Week range:', weekStart.toDateString(), 'to', new Date(weekStart.getTime() + 6*24*60*60*1000).toDateString());
})();