67 lines
1.6 KiB
Vue
67 lines
1.6 KiB
Vue
<template>
|
|
<div class="week-row">
|
|
<div class="week-label">W{{ weekNumber }}</div>
|
|
<div class="days-grid">
|
|
<DayCell v-for="day in days" :key="day.dateStr" :day="day" />
|
|
<div class="week-overlay">
|
|
<!-- Event spans will be rendered here -->
|
|
</div>
|
|
</div>
|
|
<div v-if="monthLabel" class="month-name-label" :style="{ height: `${monthLabel.weeksSpan * 64}px` }">
|
|
<span>{{ monthLabel.name }} '{{ monthLabel.year }}</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed } from 'vue'
|
|
import DayCell from './DayCell.vue'
|
|
import { isoWeekInfo, toLocalString, getLocalizedMonthName, monthAbbr } from '@/utils/date'
|
|
|
|
const props = defineProps({
|
|
week: {
|
|
type: Object,
|
|
required: true
|
|
}
|
|
})
|
|
|
|
const weekNumber = computed(() => {
|
|
return isoWeekInfo(props.week.monday).week
|
|
})
|
|
|
|
const days = computed(() => {
|
|
const d = new Date(props.week.monday)
|
|
const result = []
|
|
for (let i = 0; i < 7; i++) {
|
|
const dateStr = toLocalString(d)
|
|
result.push({
|
|
date: new Date(d),
|
|
dateStr,
|
|
dayOfMonth: d.getDate(),
|
|
month: d.getMonth(),
|
|
isFirstDayOfMonth: d.getDate() === 1,
|
|
monthClass: monthAbbr[d.getMonth()]
|
|
})
|
|
d.setDate(d.getDate() + 1)
|
|
}
|
|
return result
|
|
})
|
|
|
|
const monthLabel = computed(() => {
|
|
const firstDayOfMonth = days.value.find(d => d.isFirstDayOfMonth)
|
|
if (!firstDayOfMonth) return null
|
|
|
|
const month = firstDayOfMonth.month
|
|
const year = firstDayOfMonth.date.getFullYear()
|
|
|
|
// This is a simplified calculation for weeksSpan
|
|
const weeksSpan = 4
|
|
|
|
return {
|
|
name: getLocalizedMonthName(month),
|
|
year: String(year).slice(-2),
|
|
weeksSpan
|
|
}
|
|
})
|
|
</script>
|