83 lines
1.8 KiB
Vue
83 lines
1.8 KiB
Vue
|
<script setup lang="ts">
|
||
|
|
import { computed } from 'vue';
|
||
|
|
import { WEEK_NAMES } from '@/utils/i18n';
|
||
|
|
import type { CalendarCell } from './types';
|
||
|
|
import CalendarItem from './CalendarItem.vue';
|
||
|
|
|
||
|
|
const props = defineProps({
|
||
|
|
cells: {
|
||
|
|
type: Array as () => CalendarCell[],
|
||
|
|
required: true,
|
||
|
|
},
|
||
|
|
})
|
||
|
|
|
||
|
|
// split the flat 42-cell array into 6 rows of 7
|
||
|
|
const rows = computed<CalendarCell[][]>(() => {
|
||
|
|
const r: CalendarCell[][] = []
|
||
|
|
for (let i = 0; i < 6; i++) r.push(props.cells.slice(i * 7, i * 7 + 7))
|
||
|
|
return r
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<div class="calendarGrid card" style="padding: 1.25rem; display: flex; flex-flow: column;">
|
||
|
|
<div style="margin: 0 0 0.75em 0;">
|
||
|
|
<div v-for="(w, i) in WEEK_NAMES" :key="i">
|
||
|
|
<b :style="i >= 5 ? { color: 'red' } : null">{{ w }}</b>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div v-for="(row, ri) in rows" :key="ri">
|
||
|
|
<div
|
||
|
|
v-for="(cell, ci) in row"
|
||
|
|
:key="ci"
|
||
|
|
:isCurrentMonth="cell.isCurrentMonth ? 'true' : 'false'"
|
||
|
|
>
|
||
|
|
<CalendarItem :cell="cell" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.calendarGrid > div:nth-child(n + 2) > div {
|
||
|
|
border-top: 0 solid black;
|
||
|
|
border-left: 0 solid black;
|
||
|
|
border-right: 1px solid black;
|
||
|
|
border-bottom: 1px solid black;
|
||
|
|
|
||
|
|
padding: 0.75em;
|
||
|
|
|
||
|
|
display: flex;
|
||
|
|
flex-flow: column;
|
||
|
|
align-items: flex-start;
|
||
|
|
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.calendarGrid > div:nth-child(n + 2) > div:nth-child(1) {
|
||
|
|
border-left: 1px solid black;
|
||
|
|
}
|
||
|
|
|
||
|
|
.calendarGrid > div:nth-child(2) > div {
|
||
|
|
border-top: 1px solid black;
|
||
|
|
}
|
||
|
|
|
||
|
|
.calendarGrid > div > div {
|
||
|
|
flex-grow: 1;
|
||
|
|
flex-basis: 0;
|
||
|
|
flex-shrink: 0;
|
||
|
|
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.calendarGrid > div > div[isCurrentMonth=false] {
|
||
|
|
background: #d0d0d0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.calendarGrid > div {
|
||
|
|
display: flex;
|
||
|
|
flex-flow: row;
|
||
|
|
}
|
||
|
|
</style>
|