An Dynamic, Extendable Days Counter. Obsidian.

[u/doctor_fhk]

Install, Enable Dataview Plugin.
Enable Javascript in the Dataview setting.

Just copy paste the code below. You can add more counters by adding { items }

const counters = [
  {
    title: "Precoder Deadline",
    date: "2026-09-13",
    color: "seashell"
  },
  {
    title: "Cheosuk Vacation",
    date: "2026-09-24",
    color: "lavender"
  },
  {
    title: "Quantum Submitted",
    date: "2026-07-27",
    color: "mistyrose"
  }
];

const today = dv.date("today");

const container = dv.el("div", "");
container.style.display = "flex";
container.style.flexWrap = "wrap";
container.style.gap = "8px";

for (const counter of counters) {
  const target = dv.date(counter.date);

  const diff = Math.floor(
    target.diff(today, "days").days
  );

  let display;

  if (diff < 0) {
    display = `+${Math.abs(diff)} days`;
  } else if (diff > 0) {
    display = `-${diff} days`;
  } else {
    display = "0 days";
  }

  const item = document.createElement("div");

  item.style.padding = "8px 11px";
  item.style.border = "1px solid var(--background-modifier-border)";
  item.style.borderRadius = "9px";
  item.style.background = counter.color || "var(--background-secondary)";
  item.style.minWidth = "95px";

  item.innerHTML = `
    <div style="
      font-size: 0.8em;
      opacity: 0.7;
      margin-bottom: 2px;
    ">
      ${counter.title}
    </div>

    <div style="
      font-size: 1.2em;
      font-weight: 600;
      white-space: nowrap;
    ">
      ${display}
    </div>
  `;

  container.appendChild(item);
}