feat(frontend) : add current time indicator line on calendar
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -108,6 +108,18 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Current time indicator -->
|
||||
<div
|
||||
v-if="isToday(day.date)"
|
||||
class="absolute left-0 right-0 z-10 pointer-events-none"
|
||||
:style="{ top: `${currentTimeTopPx}px` }"
|
||||
>
|
||||
<div class="relative flex items-center">
|
||||
<div class="absolute -left-[5px] h-[10px] w-[10px] rounded-full bg-orange-500" />
|
||||
<div class="h-[2px] w-full bg-orange-500" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Drag ghost preview -->
|
||||
<div
|
||||
v-if="dragState && dragState.targetDayIndex === dayIndex"
|
||||
@@ -154,6 +166,27 @@ const gridBodyEl = ref<HTMLElement | null>(null)
|
||||
const dayColumnEls = ref<HTMLElement[]>([])
|
||||
const stickyOffset = computed(() => props.stickyOffset ?? 0)
|
||||
|
||||
// --- Current time indicator ---
|
||||
const nowMinutes = ref(0)
|
||||
let nowTimer: ReturnType<typeof setInterval> | undefined
|
||||
|
||||
function updateNowMinutes() {
|
||||
const now = new Date()
|
||||
nowMinutes.value = now.getHours() * 60 + now.getMinutes()
|
||||
}
|
||||
|
||||
const currentTimeTopPx = computed(() => (nowMinutes.value / 60) * hourHeight)
|
||||
|
||||
updateNowMinutes()
|
||||
|
||||
onMounted(() => {
|
||||
nowTimer = setInterval(updateNowMinutes, 60_000)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
clearInterval(nowTimer)
|
||||
})
|
||||
|
||||
function getScrollParent(): HTMLElement | null {
|
||||
let el = calendarEl.value?.parentElement
|
||||
while (el) {
|
||||
|
||||
Reference in New Issue
Block a user