document.addEventListener('dateUpdate', async function (event) {
  const { year, month, date, week } = event.detail;
  const selectedDate = new Date(year, month, date);

  const diff = ((new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate(), 0) - selectedDate)/86400000);
  const num = Math.abs(diff).toFixed();
  let calc;

  diff < 0 ? calc = `In ${num} Day${num>1?'s':''}.` : diff == 0 ? calc = `Today.`: calc = `${num} Day${num>1?'s':''} ago.`

  const appointments = await window.letnice.appointments.getByDate(year, month, date);
  const appointmentsHtml = !appointments
    ? []
    : appointments.map(appointment => `
        - ${appointment.label}
      `);

  document.dispatchEvent(new CustomEvent('footerChange', {
    detail: `
      ${monthNames[month]} ${date}, ${dayNames[week]}. ${calc}
      <br />
      ${appointmentsHtml.join('')}
    `
  }));
});