--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/WeekGuide.ts	Sat Mar 18 19:34:12 2023 -0700
@@ -0,0 +1,50 @@
+import { format } from "date-fns";
+import { css, html, LitElement } from "lit";
+import { customElement } from "lit/decorators.js";
+import { shared } from "./shared";
+
+@customElement("fd-week-guide")
+export class WeekGuide extends LitElement {
+  constructor() {
+    super();
+    setInterval(this.requestUpdate.bind(this), 5 * 60 * 1000);
+  }
+  static styles = [
+    shared,
+    css`
+      :host {
+        display: inline-block;
+      }
+      .wday > span {
+        display: inline-block;
+        background: #282a36;
+        padding: 5px;
+        border: 3px outset #333;
+        text-align: center;
+        vertical-align: middle;
+        border-radius: 10px;
+      }
+      .wday > span.today {
+        background: #282a36;
+        border-color: #ff79c6;
+        color: #ff79c6;
+        text-shadow: 0 0 8px #ff79c6;
+      }
+    `,
+  ];
+  render() {
+    const day = format(new Date(), "EEE").toLowerCase();
+
+    return html`
+      <div class="wday">
+        <span class="wday-sun ${day == "sun" ? "today" : ""}">Sunday</span>
+        <span class="wday-mon ${day == "mon" ? "today" : ""}">Monday</span>
+        <span class="wday-tue ${day == "tue" ? "today" : ""}">Tuesday</span>
+        <span class="wday-wed ${day == "wed" ? "today" : ""}">Wednesday</span>
+        <span class="wday-thu ${day == "thu" ? "today" : ""}">Thursday</span>
+        <span class="wday-fri ${day == "fri" ? "today" : ""}">Friday</span>
+        <span class="wday-sat ${day == "sat" ? "today" : ""}">Saturday</span>
+      </div>
+    `;
+  }
+}