Event Countdown for Home Assistant

configuration.yaml

# Don't set an `initial` value for this component in this file. Instead, set it by calling the `set_datetime` service.
# The reason for this is explained at https://www.home-assistant.io/components/input_datetime/
input_datetime:
  event_countdown:
    name: "Date of the event"
    has_date: true
    has_time: false
# Don't set an `initial` value for this component in this file. Instead, set it by calling the `set_value` service.
# The reason for this is explained at https://www.home-assistant.io/components/input_text/
input_text:
  event_countdown:
    name: "Event title"

event-countdown.js

class Countdown extends HTMLElement {
  set hass(hass) {
    this.eventTitle = hass.states[this.textEntityId]["state"];
    this.eventDate = new Date(hass.states[this.datetimeEntityId]["state"]);

    if (typeof this.content === "undefined") {
      const card = document.createElement("ha-card");
      this.content = document.createElement("div");
      this.content.style.fontSize = "24px";
      this.content.style.lineHeight = "32px";
      this.content.style.padding = "16px";
      card.appendChild(this.content);
      this.appendChild(card);
    }

    if (typeof this.timer === "undefined") {
      this.updateClock();
      this.timer = setInterval(this.updateClock.bind(this), 1000);
    }
  }

  setConfig(config) {
    this.datetimeEntityId = config.datetime_entity;
    this.textEntityId = config.text_entity;
  }

  updateClock() {
    const timeRemaining = this.getTimeRemaining();

    let message = `<strong>${this.eventTitle}</strong>`;

    if (timeRemaining.total <= 0) {
      message += " has arrived!";

      if (typeof this.timer !== "undefined") {
        clearInterval(this.timer);
        delete this.timer;
      }
    } else {
      let parts = [];

      if (timeRemaining.days >= 1) {
        if (timeRemaining.days === 1) {
          parts.push("1 day");
        } else {
          parts.push(`${timeRemaining.days} days`);
        }
      }

      if (timeRemaining.hours >= 1) {
        if (timeRemaining.hours === 1) {
          parts.push("1 hour");
        } else {
          parts.push(`${timeRemaining.hours} hours`);
        }
      }

      if (timeRemaining.minutes >= 1) {
        if (timeRemaining.minutes === 1) {
          parts.push("1 minute");
        } else {
          parts.push(`${timeRemaining.minutes} minutes`);
        }
      }

      if (timeRemaining.seconds >= 1) {
        if (timeRemaining.seconds === 1) {
          parts.push("1 second");
        } else {
          parts.push(`${timeRemaining.seconds} seconds`);
        }
      }

      message += " in " + parts.join(", ");
    }

    this.content.innerHTML = message;
  }

  getTimeRemaining() {
    const t = this.eventDate.getTime() - Date.parse(new Date()) +
      (this.eventDate.getTimezoneOffset() * 1000 * 60);
    const seconds = Math.floor((t / 1000) % 60);
    const minutes = Math.floor((t / 1000 / 60) % 60);
    const hours = Math.floor((t / (1000 * 60 * 60)) % 24);
    const days = Math.floor(t / (1000 * 60 * 60 * 24));

    return {
      total: t,
      days: days,
      hours: hours,
      minutes: minutes,
      seconds: seconds
    };
  }
}

customElements.define("event-countdown", Countdown);

ui-lovelace.yaml

resources:
  - url: "/local/event-countdown.js"
    type: "js"
views:
  - title: Home
    icon: mdi:home
    cards:
      - type: "custom:event-countdown"
        text_entity: "input_text.event_countdown"
        datetime_entity: "input_datetime.event_countdown"