The Dream Stream

It looks for the title in the h2 (within class col-md 7), and time and date in the h3, so it HAS TO BE FORMATTED AS Month Day year time like below: 
June 26, 2025 4:30 pm - 6:30 pm
Add to HTML embed on the page
 

<style>
.countdown-wrapper {
  display: flex;
  justify-content: space-around;
  text-align: center;
  background: #fff;
  padding: 1em;
  border-radius: 8px;
  margin-top: 1em;
  font-family: sans-serif;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}
.countdown-section {
  flex: 1;
}
.countdown-number {
  font-size: 2.5em;
  font-weight: bold;
  color: #888;
}
.countdown-label {
  text-transform: uppercase;
  font-size: 0.9em;
  letter-spacing: 1px;
  color: #444;
}
.countdown-buttons {
  display: flex;
  justify-content: center;
  gap: 1em;
  margin-top: 1em;
}
.countdown-buttons a {
  text-decoration: none;
  background: #0056b3;
  color: #fff !important;
  padding: 0.5em 1em;
  border-radius: 5px;
  font-size: 0.9em;
}
.countdown-buttons a:hover {
  background: #003f82;
}

</style>
<script>
document.addEventListener('DOMContentLoaded', () => {
  const h3 = Array.from(document.querySelectorAll('h3')).find(el => {
    return /\b(?:jan|feb|mar|apr|may|jun|jul|aug|sep|oct|nov|dec|\d{4})\b/i.test(el.textContent);
  });

  if (!h3) return;

  const match = h3.textContent.match(/([A-Za-z]+ \d{1,2}, \d{4})\s+(\d{1,2}:\d{2}\s?[APMapm]{2})\s*[-–]\s*(\d{1,2}:\d{2}\s?[APMapm]{2})/);
  if (!match) return;

  const [_, datePart, startTimeStr, endTimeStr] = match;

  const startDate = new Date(`${datePart} ${startTimeStr}`);
  const endDate = new Date(`${datePart} ${endTimeStr}`);

  if (isNaN(startDate) || isNaN(endDate)) return;

  const countdownEl = document.createElement('div');
  countdownEl.className = 'countdown-wrapper';
  countdownEl.setAttribute('role', 'timer');
  countdownEl.innerHTML = `
    <div class="countdown-section"><div class="countdown-number" id="days">0</div><div class="countdown-label">Days</div></div>
    <div class="countdown-section"><div class="countdown-number" id="hours">0</div><div class="countdown-label">Hours</div></div>
    <div class="countdown-section"><div class="countdown-number" id="minutes">0</div><div class="countdown-label">Minutes</div></div>
    <div class="countdown-section"><div class="countdown-number" id="seconds">0</div><div class="countdown-label">Seconds</div></div>
  `;

  const buttonWrapper = document.createElement('div');
  buttonWrapper.className = 'countdown-buttons';

  function formatLocalDateTime(date) {
    const pad = n => n.toString().padStart(2, '0');
    return `${date.getFullYear()}${pad(date.getMonth() + 1)}${pad(date.getDate())}T${pad(date.getHours())}${pad(date.getMinutes())}00`;
  }

const container = document.querySelector('div.col-md-7');
const h2 = container ? container.querySelector('h2') : null;
const title = h2 ? encodeURIComponent(h2.textContent.trim()) : encodeURIComponent("Event");

  const start = formatLocalDateTime(startDate);
  const end = formatLocalDateTime(endDate);
  const googleHref = `https://calendar.google.com/calendar/render?action=TEMPLATE&text=${title}&dates=${start}/${end}&details=Event+Countdown&sf=true&output=xml&ctz=America/Chicago`;

  const icsContent = `
BEGIN:VCALENDAR
VERSION:2.0
BEGIN:VEVENT
SUMMARY:Event Countdown
DTSTART:${start}
DTEND:${end}
DESCRIPTION:Countdown to an important event.
END:VEVENT
END:VCALENDAR`.trim();

  const blob = new Blob([icsContent], { type: 'text/calendar' });
  const outlookURL = URL.createObjectURL(blob);

  buttonWrapper.innerHTML = `
    <a href="${googleHref}" target="_blank" rel="noopener">Add to Google Calendar</a>
    <a href="${outlookURL}" download="event.ics">Add to Outlook Calendar</a>
  `;

  h3.insertAdjacentElement('afterend', countdownEl);
  countdownEl.insertAdjacentElement('afterend', buttonWrapper);

  function updateCountdown() {
    const now = new Date();
    const diff = startDate - now;

    if (diff <= 0) {
      document.querySelectorAll('.countdown-number').forEach(el => el.textContent = '0');
      return;
    }

    const d = Math.floor(diff / (1000 * 60 * 60 * 24));
    const h = Math.floor((diff / (1000 * 60 * 60)) % 24);
    const m = Math.floor((diff / (1000 * 60)) % 60);
    const s = Math.floor((diff / 1000) % 60);

    document.getElementById('days').textContent = d;
    document.getElementById('hours').textContent = h;
    document.getElementById('minutes').textContent = m;
    document.getElementById('seconds').textContent = s;
  }

  updateCountdown();
  setInterval(updateCountdown, 1000);
});
</script>