JSFiddle - React, Tailwind, and code Playground

by blackpolygon

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic Calendar View</title>
    <style>
        body {
            background-color: #000;
            color: #FFF;
        }

        .calendar-container {
            display: flex;
            flex-direction: column-reverse;
            flex-wrap: nowrap;
            height: 90vh;
            overflow-y: scroll;
        }

        .month {
            border: 2px solid white;
            min-width: 200px;
            min-height: 150px;
            margin: 10px;
            display: grid;
            grid-template-columns: repeat(7, 1fr);
        }

        .month-header {
            grid-column: span 7;
            background-color: #444;
            text-align: center;
        }

        .weekdays {
            grid-column: span 7;
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            background-color: #333;
        }

        .day, .weekday {
            border: 1px solid white;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .day.checked {
            background-color: lightgreen;
        }

        .day:focus {
            outline: 2px solid yellow;
        }
    </style>
</head>

<body>
    <div class="calendar-container">
        <!-- Months will be appended here -->
    </div>

    <script>
        const monthNames = ["January", "February", "March", "April", "May", "June",
            "July", "August", "September", "October", "November", "December"
        ];
        const weekdays = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];

        const today = new Date();
        let currentMonth = today.getMonth();
        let currentYear = today.getFullYear();

        function createMonth(year, month) {
            const monthDiv = document.createElement('div');
           ...