<script src="https://code.iconify.design/1/1.0.6/iconify.min.js"></script>

    <h1>Simple Calendar</h1>
    <div id="calendar-wrapper"></div>
    <script>
        displayCalendar();
        clacDMY();
    </script>

    body {
        display: flex;
        align-items: center;
        flex-direction: column;
        user-select: none;
    }
    
    #calendar-wrapper {
        background-color: rgb(245, 244, 244);
        padding: 10px;
        width: 600px;
    }
    
    .calendar-container-head {
        display: flex;
    }
    
    .calendar-container-head-itm {
        width: 14%;
        text-align: center;
        font-size: 18px;
        font-weight: bold;
        user-select: none;
    }
    
    .calendar-container-body {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        margin-top: 20px;
    }
    
    .calendar-container-body-itm {
        width: 14%;
        text-align: center;
        font-size: 18px;
        font-weight: normal;
        user-select: none;
        margin: 10px 0;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .calendar-container-body-itm-date {
        height: 40px;
        width: 40px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: .3s ease-in-out;
        position: relative;
    }
    
    .calendar-container-body-itm-date.active {
        box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
        font-weight: bold;
        background-color: rgba(255, 0, 0, 0.603);
        color: #fff;
    }
    
    .calendar-controls {
        margin-bottom: 10px;
        padding-bottom: 10px;
        box-shadow: 0 2px rgb(240, 238, 238);
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 18px;
        font-weight: bold;
    }
    
    .calendar-controls-right span {
        cursor: pointer;
    }
    
    .calendar-controls-right .iconify {
        cursor: pointer;
    }
    
    .calendar-controls-right .iconify:hover {
        color: red;
    }

    var days = [
        {
            title: "Sun"
        },
        {
            title: "Mon"
        },
        {
            title: "Tue"
        },
        {
            title: "Wed"
        },
        {
            title: "Thu"
        },
        {
            title: "Fri"
        },
        {
            title: "Sat"
        }
    ];
    var todaysDate = {};
    var currCalendar = [];
    var calDate = 0;
    var calMonth = 0;
    var calYear = 0;
    var calDay = 0;
    
    function months(month) {
        switch (month) {
          case 1: return 'January';
          case 2: return 'February';
          case 3: return 'March';
          case 4: return 'April';
          case 5: return 'May';
          case 6: return 'June';
          case 7: return 'July';
          case 8: return 'August';
          case 9: return 'September';
          case 10: return 'October';
          case 11: return 'November';
          case 0: return 'December';
        }
    }
    
    function displayCalendar() {  // main calender design
        document.getElementById('calendar-wrapper').innerHTML = `
        <div class="calendar-container">
            <div class="calendar-controls">
                <div class="calendar-controls-left">
                    <div class="calendar-controls-left-date"></div>
                </div>
                <div class="calendar-controls-right">
                    <span title="Go to taday's date" onClick="clacDMY()">Today</span>
                    <span title="Previous month" onClick="prevMonth()" class="iconify" data-icon="ant-design:caret-left-filled"></span>
                    <span title="Next month" onClick="nextMonth()" class="iconify" data-icon="ant-design:caret-right-filled"></span>
                </div>
            </div>
            <div class="calendar-container-head">${displayDays()}</div>
            <div class="calendar-container-body"></div>
        </div>
        `;;
    }
    
    function displayDays() { // dispplay days
        return days.map(day => {
            return `
            <div class="calendar-container-head-itm">
                ${day.title}
            </div>
            `;
        }).join('');
    }
    
    function clacDMY() { // calculate current date, month and year. This is called once js is loaded.
        var date = new Date();
        calDate = date.getDate();
        calMonth = date.getMonth() + 1;
        calYear = date.getFullYear();
        calDay = date.getDay();
    
        todaysDate = {
            D: calDate,
            M: calMonth,
            Y: calYear,
            DAY: calDay
        };
        
        calcMonthDates(calDate, calMonth, calYear);
    }
    
    function calcMonthDates(calDate, calMonth, calYear) { // generates dates for particular month
        let monLen = new Date(calYear, calMonth, 0).getDate();
        let isCalDate = false;
        currCalendar = [];
        document.getElementsByClassName('calendar-controls-left-date')[0].innerText = months(calMonth) + "  " +  (calMonth == 0 ? (calYear - 1) : calYear);
    
        for (let i = 0; i < getFirstDay(1); i++) {
            currCalendar.push({
                date: '',
                day: '',
                month: '',
                year: '',
                curDate: ''
            })
        }
    
        for (let i = 1; i <= monLen; i++) {
            if(i == calDate && calMonth == todaysDate.M && calYear == todaysDate.Y) {
                isCalDate = true;
            }
            else isCalDate = false;
    
            currCalendar.push({
                date: i,
                day: getFirstDay(i),
                month: calMonth,
                year: calYear,
                curDate: isCalDate
            });
        }
    
        displayDates();
    }
    
    function getFirstDay(d) { // first day of month
        var date = new Date();
        date.setFullYear(calYear, (calMonth - 1), d);
        return date.getDay();
    }
    
    function displayDates() { // after getting all dates displays into calendar
        document.getElementsByClassName('calendar-container-body')[0].innerHTML = currCalendar.map(cal => {
            return `
            <div class="calendar-container-body-itm">
                <div class="calendar-container-body-itm-date ${cal.curDate ? 'active' : ''}" style="pointer-events: ${cal.date != '' ? 'auto' : 'none'};">
                    ${cal.date}
                </div>
            </div>
            `;
        }).join('');
    }
    
    function nextMonth() { // called when clicked next button
        calMonth += 1;
    
        if(calMonth == 12) {
            calMonth = 0;
            calYear +=1;
        }
        calcMonthDates(calDate, calMonth, calYear);
    }
    
    function prevMonth() { // called when clicked previous button
        calMonth -= 1;
    
        if(calMonth == -1) {
            calMonth = 11;
            calYear -= 1;
        }
        calcMonthDates(calDate, calMonth, calYear);
    }