77 lines
1.4 KiB
Vue
77 lines
1.4 KiB
Vue
<script setup>
|
|
|
|
const defaultmonths = ref([
|
|
{id: 1, name: 'First'},
|
|
{id: 2, name: 'Second'},
|
|
{id: 3, name: 'Third'},
|
|
{id: 4, name: 'Fourth'},
|
|
{id: 5, name: 'Fifth'},
|
|
{id: 6, name: 'Sixth'},
|
|
{id: 7, name: 'Seventh'},
|
|
{id: 8, name: 'Eighth'},
|
|
{id: 9, name: 'Ninth'},
|
|
{id: 10, name: 'Tenth'},
|
|
{id: 11, name: 'Eleventh'},
|
|
{id: 12, name: 'Twelfth'}
|
|
])
|
|
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
.fullframe {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
min-width: 1.2rem;
|
|
gap: .6rem;
|
|
width: fit-content;
|
|
margin: auto;
|
|
}
|
|
|
|
.month {
|
|
height: fit-content;
|
|
}
|
|
|
|
.header {
|
|
grid-column: 1 / 7;
|
|
grid-row: 1 / 2;
|
|
}
|
|
|
|
.leapweek {
|
|
display: grid;
|
|
grid-template-columns: repeat(6, 1fr);
|
|
}
|
|
|
|
.m13 {
|
|
grid-column: 3;
|
|
}
|
|
|
|
.intercalaryheader {
|
|
grid-column: 2;
|
|
}
|
|
|
|
.intercalarytext {
|
|
margin-left: auto;
|
|
width: 0;
|
|
min-width: fit-content;
|
|
}
|
|
|
|
</style>
|
|
|
|
<template>
|
|
|
|
|
|
<div class="fullframe">
|
|
<MainCalendarFrameMonth
|
|
v-for="month in defaultmonths"
|
|
:monthname="month.name"
|
|
:daycount="30"
|
|
/>
|
|
<div class="intercalaryheader">
|
|
<div class="intercalarytext">Intercalary Week</div>
|
|
</div>
|
|
<MainCalendarFrameMonth
|
|
:daycount="6" />
|
|
</div>
|
|
|
|
</template> |