CSS Grid / JS Calendar

by ian_smithz

HTML

<header>
        <h1 id="year"></h1>
        <h2 id="month"></h2>
        <button id="prev" onclick="prev();">&lt;&lt;&lt;</button>
        <button id="next" onclick="next();">&gt;&gt;&gt;</button>
    </header>

    <nav id="days">
        <div class="dayname red">Sunday</div>
        <div class="dayname">Monday</div>
        <div class="dayname">Tuesday</div>
        <div class="dayname">Wednesday</div>
        <div class="dayname">Thursday</div>
        <div class="dayname">Friday</div>
        <div class="dayname">Saturday</div>
    </nav>

    <nav id="abr">
        <div class="dayname red">Sun</div>
        <div class="dayname">Mon</div>
        <div class="dayname">Tue</div>
        <div class="dayname">Wed</div>
        <div class="dayname">Thu</div>
        <div class="dayname">Fri</div>
        <div class="dayname">Sat</div>
    </nav>

    <main></main>

<script>
fillCalendar();
</script>

CSS

<link href='https://fonts.googleapis.com/css?family=Candal|Bree+Serif' rel='stylesheet' type='text/css'>
      
      html, body, h1, h2 {
            margin: 0;
            padding: 0;
        }

        body {
            display: grid;
            grid-template-columns: 1fr;
            grid-template-rows: auto auto 1fr;
            grid-gap: 20px;

            height: 100vh;
            border: 25px solid white;
            box-sizing: border-box;

            font-family: 'Bree Serif', serif;
            font-size: 1.8em;
        }

        header {
            display: grid;
            grid-template-columns: auto 1fr auto;
            grid-template-rows: auto auto;
        }

        #year {
            grid-row: 1;
            grid-column: 2;
            justify-self: center;

            font-family: 'Candal', sans-serif;
            font-size: 2.5em;
        }

        #month {
            grid-row: 2;
            grid-column: 2;
            justify-self: center;

            font-family: 'Candal', sans-serif;
            font-size: 2em;
        }

        #prev, #next {
            grid-row: 1 / span 2;
            align-self: center;
        }

        button {
            border: 5px solid #BE946A;
            color: #D78822;
            border-radius: 20px;
            padding: 15px;
            margin: 0px 20px;
            background: #D8BC9D;
            font-size: 1.5em;
        }

        button:hover {
            background: #BE946A;
        }

        button:active {
            border: 5px solid #A9ABBE;
            color: #A9ABBE;
            background: #5D628F;
            position: relative;
            top: 2px;
            left: 2px;
        }

        nav {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            grid-gap: 10px;
            justify-items: center;
        }

        #abr {
            display: none;
        }

        main {
            display: grid;
            grid-template-columns:...

JavaScript

var date = new Date();

        function fillCalendar() {
            console.log('bum');
            var monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
            var month = document.getElementById("month");
            month.innerHTML = monthNames[date.getMonth()];

            var year = document.getElementById("year");
            year.innerHTML = date.getUTCFullYear();

            var lastDay = new Date(date.getUTCFullYear(), date.getMonth() + 1, 0).getDate();

            var main = document.querySelector("main");

            for (var dayNumber = 1; dayNumber <= lastDay; dayNumber++) {
                var day = document.createElement('div');
                day.className = "day";
                day.innerHTML = dayNumber;

                if (dayNumber == 1)
                    day.style.gridColumn = new Date(date.getUTCFullYear(), date.getMonth(), 1).getDay() + 1;
                if (new Date(date.getUTCFullYear(), date.getMonth(), dayNumber).getDay() == 0)
                    day.className += " red";

                var today = new Date();
                if (dayNumber == today.getDate() && date.getUTCFullYear() == today.getUTCFullYear() && date.getMonth() == today.getMonth())
                    day.className += " today";

                main.appendChild(day);
            }
        }

        function removeDays() {
            var main = document.querySelector("main");
            main.innerHTML = "";
        }

        function prev() {
            removeDays();

            date = new Date(date.getUTCFullYear(), date.getMonth(), 0);

            fillCalendar();
        }

        function next() {
            removeDays();

            date = new Date(date.getUTCFullYear(), date.getMonth() + 1, 2);

            fillCalendar();
        }

        document.ondblclick = function() {
            // Change alignment of day numbers.
            var days =...