JavaScriptでカレンダーを表示する - JavaScriptからReactまで

カレンダーを表示し、『次の月へ』ボタンを押すと、次の月のカレンダーが表示されます。

（ただし、2024年1月は2023年13月と表示されますので改善の余地あります。）

css_test4.html（CSSもJavaScriptもともに埋め込んでます）

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <div id="year_month"></div>
    <div class="dayofweek" id="dayofweek">
        <div>日</div>
        <div>月</div>
        <div>火</div>
        <div>水</div>
        <div>木</div>
        <div>金</div>
        <div>土</div>
    </div>
    <div class="container" id="container"></div>
    <button id="button">次の月へ</button>
    <style>
        .dayofweek{
            display: grid;
            grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
            border:solid 1px #FF0000;
            border-width: 2px 0 0 2px;
        }

        .dayofweek div{
            font-size: 40px;
            height: 100px;
            border:solid 1px #FF0000;
            border-width:0 2px 2px 0;
        }
        .container{
            display: grid;
            grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
            border:solid 1px #FF0000;
            border-width: 2px 0 0 2px;
        }

        .container div{
            font-size: 40px;
            height: 100px;
            border:solid 1px #FF0000;
            border-width:0 2px 2px 0;
        }
    </style>
    <script>

        var today = new Date();
        var year = today.getFullYear();
        var month = today.getMonth();
        var day = today.getDate();

        var thisMonth = month;
        var count=0;

        function showCalendar(date){
            var year = date.getFullYear();
            var month = date.getMonth();
            var day = date.getDate();
    
    
            var firstDayOfThisMonth = new Date(year,month,1);
            var preMagicNumber = firstDayOfThisMonth.getDay();
    
            var firstDayOfFirstWeek = new Date();
            firstDayOfFirstWeek.setDate(firstDayOfThisMonth.getDate()-preMagicNumber);
    
    
            var wrapper_element = document.getElementById('container');
    
    
            for(var i=0;i<preMagicNumber;i++){
                var date = firstDayOfFirstWeek;
                var new_element = document.createElement('div');
                new_element.textContent = date.getDate()+i;
                wrapper_element.appendChild(new_element);
            }
    
    
            var lastDayOfThisMonth = new Date(year,month+1,0);
            var thisMagicNumber = lastDayOfThisMonth.getDate();
            for(var i=0;i<thisMagicNumber;i++){
                var date = firstDayOfThisMonth;
                var new_element = document.createElement('div');
                new_element.textContent = date.getDate()+i;
                wrapper_element.appendChild(new_element);
            }
    
            var firstDayOfNextMonth = new Date(year,month+1,1);
            var postMagicNumber = 7-(preMagicNumber+thisMagicNumber)%7;
            for(var i=0;i<postMagicNumber;i++){
                var date = firstDayOfNextMonth;
                var new_element = document.createElement('div');
                new_element.textContent = date.getDate()+i;
                wrapper_element.appendChild(new_element);
            }
        }

        function next(){
            count++;
            document.getElementById("year_month").innerHTML = `${year}年${month+1+count}月`;
            document.getElementById("container").innerHTML="";
            var firstDayOfEachMonth = new Date(year,month-count,1);
            showCalendar(firstDayOfEachMonth);
        }

        var today = new Date();
        showCalendar(today);

        document.getElementById("button").onclick = function (){
            next();
        }

        document.getElementById("year_month").innerHTML = `${year}年${month+1}月`;
        </script>
</body>