From c17312b14977cb8fb032e5f394a64aa0327abef2 Mon Sep 17 00:00:00 2001 From: Yasutake Yohei <61961825+yasutakeyohei@users.noreply.github.com> Date: Mon, 2 Nov 2026 09:22:42 +0900 Subject: hp-archive: カレンダーに「今日」ボタンを追加 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 月表示の横に「今日」ボタンを置き、押すと今日の日付を選んでその月に戻る - ヘッダーの高さが変わらないよう行の高さを固定 - X投稿用のキャプチャ画像を追加 --- drafts/schedule-card-1102.png | Bin 0 -> 1825808 bytes src/components/ScheduleInteractive.astro | 14 +++++++++++++- src/styles/custom.css | 21 +++++++++++++++++++++ 3 files changed, 34 insertions(+), 1 deletion(-) create mode 100644 drafts/schedule-card-1102.png diff --git a/drafts/schedule-card-1102.png b/drafts/schedule-card-1102.png new file mode 100644 index 0000000..2ef42ff Binary files /dev/null and b/drafts/schedule-card-1102.png differ diff --git a/src/components/ScheduleInteractive.astro b/src/components/ScheduleInteractive.astro index 6bcbb1c..4e1894b 100644 --- a/src/components/ScheduleInteractive.astro +++ b/src/components/ScheduleInteractive.astro @@ -323,7 +323,10 @@ calendarEl.innerHTML = `
-
${year}年${month}月
+
+
${year}年${month}月
+ +
@@ -348,6 +351,15 @@ }); }); + calendarEl.querySelectorAll('.schedule-cal-today').forEach((btn) => { + btn.addEventListener('click', () => { + selectedDate = todayKey; + currentMonth = todayMonth; + renderCalendar(); + showDayDetails(selectedDate); + }); + }); + calendarEl.querySelectorAll('.schedule-cal-nav').forEach((btn) => { btn.addEventListener('click', () => { const next = months.indexOf(currentMonth) + Number(btn.dataset.dir); diff --git a/src/styles/custom.css b/src/styles/custom.css index cdaab01..8a27700 100644 --- a/src/styles/custom.css +++ b/src/styles/custom.css @@ -2067,6 +2067,27 @@ td.sanpi-open .sanpi-title { .schedule-cal-title { font-weight: 600; } +.schedule-cal-mid { + display: flex; + align-items: center; + gap: 0.5rem; + /* ボタンを足してもヘッダーの高さが変わらないよう、行の高さを固定する */ + height: 2rem; +} +/* 高さを増やさないよう、月表示と同じ行に小さく置く */ +.schedule-cal-today { + padding: 0 0.5rem; + border: 1px solid var(--sl-color-gray-5); + border-radius: 999px; + background: var(--sl-color-bg); + color: var(--sl-color-text); + font-size: 0.72rem; + line-height: 1.4; + cursor: pointer; +} +.schedule-cal-today:hover { + background: var(--sl-color-gray-6); +} .schedule-cal-nav { width: 2rem; height: 2rem; -- cgit v1.3.1