vue.jsとTailWindCSSとday.jsで作るズルいカレンダー

カレンダーを作る際にテーブルを作るのも何なのでグリッドレイアウトを使ったらコードもシンプルになりました。

calendar.vue

import dayjs from 'dayjs'
// 月末の日にち
const endDate = dayjs().endOf('month').get('date')
// 月初の曜日
const startWeekday = dayjs().startOf('month').get('day')
//　配列を作ります。
const dates = computed(() => {
    let data = []
    //月の初めの日までは何もなし
    for (let i = 0; i < startWeekday; i++) {
        data.push('')
    }
    //日付を追加します。
    for (let h = 1; h <= endDate; h++) {
        data.push(h)
    }
    return data
})

/*
できたのはこんな配列
["","","","","","",1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31]
*/

あとはCSS グリッドレイアウトで7日ごとに行にします。

calendar.vue

<div class="grid grid-cols-7 gap-4">
    <template v-for="date in dates">
        <span>{{ date }}</span>
    </template>
</div>