(I) test calendar code

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

 

Buy me a coffee