enhance: カレンダーウィジェットの日付変更は時間通りに行うように

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);

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,