【html・css・js】デイリーのカレンダー（表示のみ）を作ってみた

html・css・js（Vueをつかってみました）で、カレンダーのデイリー表示的なのを作ってみました。
こんな感じのやつです
Vueのdataのeventsがイベント（タイトル、開始時刻、終了時刻）のオブジェクトを格納する配列になっています。
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>schedule</title>
    <style>
        #daily-calendar * { 
            box-sizing: border-box;
        }

        .time-cell {
            width: 80px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            color: grey;
            font-size: 90%;
        }

        .event-bg-cell {
            width: 250px;
            height: 50px;
            border-top: solid lightgray 1px;
        }

        .event-bg-cell:last-child {
            border-bottom: solid lightgray 1px;
        }

        .event {
            position: absolute;
            width: 95%;
            padding-left: 5px;
            border: solid 1px white;
            border-radius: 8px; top: 0px;
            font-size: 90%;
            color: white; 
            background-color:#5080AA; 
        }
    </style>
</head>
<body>
    <div 
        id="daily-calendar"
        style="display: flex; width: 330px;"
    >
        <div>
            <div v-for="n in 25" class="time-cell">
                {{ (n - 1) + ":00" }}
            </div>
        </div>
        <div style="position: relative; margin: 25px 0;">
            <div>
                <div v-for="n in 24" class="event-bg-cell"></div>
            </div>
            <div
                v-for="event in events"
                :style="{
                    top: getPosition(event.dtFrom) + 'px',
                    height: getPosition(event.dtTo) - getPosition(event.dtFrom) + 'px'
                }"
                class="event"
            >
                {{ event.title }}
            </div>
        </div>
    </div>

    <script src="https://unpkg.com/vue@next"></script>
    <script>
        Vue.createApp({
            data() {
                return {
                    events: [
                        { 
                            title: "予定その１", 
                            dtFrom: new Date(2021, 8-1, 26, 8, 00),
                            dtTo: new Date(2021, 8-1, 26, 10, 30) 
                        },
                        {   
                            title: "予定その２",
                            dtFrom: new Date(2021, 8-1, 26, 12, 00),
                            dtTo: new Date(2021, 8-1, 26, 13, 30)
                        },
                        {
                            title: "予定その３",
                            dtFrom: new Date(2021, 8-1, 26, 14, 00),
                            dtTo: new Date(2021, 8-1, 26, 15, 30)
                        }
                    ]
                }
            },
            methods: {
                // 時刻からスケジュールのY位置を算出する
                getPosition: function(dateTime){
                    const now = new Date()
                    // 本日00:00のDateオブジェクト
                    const todaysStart = new Date()
                    todaysStart.setHours(0, 0, 0, 0)
                    // 本日24:00のDateオブジェクト
                    const todaysEnd = new Date()
                    todaysEnd.setDate(todaysEnd.getDate() + 1)
                    todaysEnd.setHours(0, 0, 0, 0)
                    // カレンダー最上部からの位置(px)を返す
                    if ( dateTime <= todaysStart ) {
                        return 0            // 本日00:00以前の場合は最上部
                    } else if ( dateTime >= todaysEnd ) {
                        return 50 * 24      // 本日24:00以降の場合は最下部
                    } else {
                        // 本日00:00からの時間数 * 50px
                        const hourFromStart = ( dateTime.getHours() + (dateTime.getMinutes() / 60) )
                        return hourFromStart * 50
                    }
                }
            }
        }).mount('#daily-calendar')
    </script>
</body>
</html>