Calendar widget v1

2026-04-23 10:48:10 +02:00
parent 314fe4600f
commit 910be60ed5
7 changed files with 471 additions and 15 deletions
@@ -0,0 +1,28 @@
+<div class="diary-cal">
+  <div class="diary-cal-label"><a href="{{.DiaryURL}}">Chronological</a></div>
+  <div class="diary-cal-nav">
+    <a href="{{.MonthURL}}" class="diary-cal-heading">{{.MonthName}}</a>
+    <div class="dropdown diary-cal-drop">
+      <button type="button" class="btn btn-small" data-action="cal-month-drop" aria-expanded="false" title="Monat wählen">▾</button>
+      <div class="dropdown-menu">
+        {{range .AllMonths}}<a class="dropdown-item{{if .IsCurrent}} cal-current{{end}}" href="{{.URL}}">{{.Name}}</a>{{end}}
+      </div>
+    </div>
+    <a href="{{.YearURL}}" class="diary-cal-heading">{{.DisplayYear}}</a>
+    <div class="dropdown diary-cal-drop">
+      <button type="button" class="btn btn-small" data-action="cal-year-drop" aria-expanded="false" title="Jahr wählen">▾</button>
+      <div class="dropdown-menu align-right">
+        {{range .Years}}<a class="dropdown-item{{if .IsCurrent}} cal-current{{end}}" href="{{.URL}}">{{.Num}}</a>{{end}}
+      </div>
+    </div>
+  </div>
+  <table class="diary-cal-grid">
+    <thead>
+      <tr><th>Mo</th><th>Di</th><th>Mi</th><th>Do</th><th>Fr</th><th>Sa</th><th>So</th></tr>
+    </thead>
+    <tbody>
+    {{range .Weeks}}<tr>{{range .}}<td class="{{if .IsCurrent}}cal-current{{else if .IsToday}}cal-today{{end}}{{if and .Num (not .HasEntry)}} cal-empty{{end}}">{{if .Num}}<a href="{{.URL}}">{{.Num}}</a>{{end}}</td>{{end}}</tr>
+    {{end}}
+    </tbody>
+  </table>
+</div>
@@ -0,0 +1,60 @@
+(function () {
+  var cal = document.querySelector(".diary-cal");
+  if (!cal) return;
+
+  var toggle = document.createElement("button");
+  toggle.type = "button";
+  toggle.className = "diary-cal-toggle";
+  toggle.textContent = "Kalender";
+  toggle.setAttribute("aria-expanded", "false");
+  toggle.addEventListener("click", function () {
+    var open = cal.classList.toggle("is-open");
+    toggle.setAttribute("aria-expanded", open ? "true" : "false");
+  });
+
+  var main = document.querySelector("main");
+  if (main) {
+    main.parentNode.insertBefore(toggle, main);
+    main.parentNode.insertBefore(cal, main);
+  }
+
+  // Wire up month/year dropdowns inside the calendar.
+  var drops = cal.querySelectorAll(".diary-cal-drop");
+  drops.forEach(function (drop) {
+    var trigger = drop.querySelector("button");
+    var menu = drop.querySelector(".dropdown-menu");
+    if (!trigger || !menu) return;
+    trigger.addEventListener("click", function (e) {
+      e.stopPropagation();
+      drops.forEach(function (other) {
+        if (other !== drop) {
+          other.querySelector(".dropdown-menu").classList.remove("is-open");
+        }
+      });
+      menu.classList.toggle("is-open");
+    });
+  });
+  document.addEventListener("click", function (e) {
+    drops.forEach(function (drop) {
+      if (!drop.contains(e.target)) {
+        drop.querySelector(".dropdown-menu").classList.remove("is-open");
+      }
+    });
+  });
+  document.addEventListener("keydown", function (e) {
+    if (e.key !== "Escape") return;
+    drops.forEach(function (drop) {
+      drop.querySelector(".dropdown-menu").classList.remove("is-open");
+    });
+  });
+
+  var pageHeader = document.querySelector("header");
+  function updateTop() {
+    if (!pageHeader || getComputedStyle(cal).position !== "fixed") return;
+    var rect = pageHeader.getBoundingClientRect();
+    cal.style.top = Math.max(8, rect.bottom + 8) + "px";
+  }
+  window.addEventListener("scroll", updateTop, { passive: true });
+  window.addEventListener("resize", updateTop);
+  updateTop();
+})();