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