From 373b08d5e8e788c065efa251e0929aaf763dcd67 Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Sat, 6 Sep 2025 14:09:10 +0900
Subject: [PATCH] =?UTF-8?q?enhance:=20=E3=82=AB=E3=83=AC=E3=83=B3=E3=83=80?=
 =?UTF-8?q?=E3=83=BC=E3=82=A6=E3=82=A3=E3=82=B8=E3=82=A7=E3=83=83=E3=83=88?=
 =?UTF-8?q?=E3=81=AE=E6=97=A5=E4=BB=98=E5=A4=89=E6=9B=B4=E3=81=AF=E6=99=82?=
 =?UTF-8?q?=E9=96=93=E9=80=9A=E3=82=8A=E3=81=AB=E8=A1=8C=E3=81=86=E3=82=88?=
 =?UTF-8?q?=E3=81=86=E3=81=AB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/composables/use-lowres-time.ts        |  4 ++-
 .../frontend/src/widgets/WidgetCalendar.vue   | 33 +++++++++++++++++--
 2 files changed, 33 insertions(+), 4 deletions(-)

diff --git a/packages/frontend/src/composables/use-lowres-time.ts b/packages/frontend/src/composables/use-lowres-time.ts
index f7e3794afe..3c5b561f51 100644
--- a/packages/frontend/src/composables/use-lowres-time.ts
+++ b/packages/frontend/src/composables/use-lowres-time.ts
@@ -7,6 +7,8 @@ import { ref, readonly, computed } from 'vue';
 
 const time = ref(Date.now());
 
+export const TIME_UPDATE_INTERVAL = 10000; // 10秒
+
 /**
  * 精度が求められないが定期的に更新しないといけない時計で使用（10秒に一度更新）。
  * tickを各コンポーネントで行うのではなく、ここで一括して行うことでパフォーマンスを改善する。
@@ -29,4 +31,4 @@ export function useLowresTime() {
 
 window.setInterval(() => {
 	time.value = Date.now();
-}, 10000);
+}, TIME_UPDATE_INTERVAL);
diff --git a/packages/frontend/src/widgets/WidgetCalendar.vue b/packages/frontend/src/widgets/WidgetCalendar.vue
index 5ce06287a1..6bf182450e 100644
--- a/packages/frontend/src/widgets/WidgetCalendar.vue
+++ b/packages/frontend/src/widgets/WidgetCalendar.vue
@@ -43,7 +43,7 @@ import { useWidgetPropsManager } from './widget.js';
 import type { WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget.js';
 import type { FormWithDefault, GetFormResultType } from '@/utility/form.js';
 import { i18n } from '@/i18n.js';
-import { useLowresTime } from '@/composables/use-lowres-time.js';
+import { useLowresTime, TIME_UPDATE_INTERVAL } from '@/composables/use-lowres-time.js';
 
 const name = 'calendar';
 
@@ -75,8 +75,13 @@ const monthP = ref(0);
 const dayP = ref(0);
 const isHoliday = ref(false);
 
-watch(fNow, (to) => {
-	const now = new Date(to);
+const nextDay = new Date();
+nextDay.setHours(24, 0, 0, 0);
+let nextDayMidnightTime = nextDay.getTime();
+let nextDayTimer: number | null = null;
+
+function update(time: number) {
+	const now = new Date(time);
 	const nd = now.getDate();
 	const nm = now.getMonth();
 	const ny = now.getFullYear();
@@ -106,8 +111,30 @@ watch(fNow, (to) => {
 	yearP.value = yearNumer / yearDenom * 100;
 
 	isHoliday.value = now.getDay() === 0 || now.getDay() === 6;
+}
+
+watch(fNow, (to) => {
+	update(to);
+
+	// 次回更新までに日付が変わる場合、日付が変わった直後に強制的に更新するタイマーをセットする
+	if (nextDayMidnightTime - to <= TIME_UPDATE_INTERVAL) {
+		if (nextDayTimer != null) {
+			clearTimeout(nextDayTimer);
+			nextDayTimer = null;
+		}
+
+		nextDayTimer = window.setTimeout(() => {
+			update(nextDayMidnightTime);
+			nextDayTimer = null;
+		}, nextDayMidnightTime - to);
+	}
 }, { immediate: true });
 
+watch(day, () => {
+	nextDay.setHours(24, 0, 0, 0);
+	nextDayMidnightTime = nextDay.getTime();
+});
+
 defineExpose<WidgetComponentExpose>({
 	name,
 	configure,