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

<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>Simple Calendar in HTML</title>

    
</head>

<body onload="calendar()">
    <!--  Lets make a simple Calendar using HTML, CSS and Javascript -->

    <div class="month">
        <ul>
            <!-- add previous and next buttons -->
            <li class="prev">&#10094;</li>
            <li class="next">&#10095;</li>
            <li class="month-title">
                <span class="month-name"></span>
                <br>
                <span class="year"></span>
            </li>
        </ul>
    </div>
    <ul class="weekdays">
        <li>Mo</li>
        <li>Tu</li>
        <li>We</li>
        <li>Th</li>
        <li>Fr</li>
        <li>Sa</li>
        <li>Su</li>
    </ul>

    

    <ul class="days">
    
    </ul>

</body>

</html>

        * {
            box-sizing: border-box;
        }
        
        html {
            display: flex;
            justify-content: center;
            align-items: center;
            margin: auto;
            height: 100vh;
            user-select: none;
        }
        
        body {
            font-family: Verdana, Geneva, Tahoma, sans-serif;
        }
        
        ul {
            list-style-type: none;
        }
        
        .month {
            padding: 70px 25px;
            width: 100%;
            background-color: #35403e;
            text-align: center;
        }
        
        .month .prev {
            float: left;
            padding-top: 10px;
            cursor: pointer;
        }
        
        .month .next {
            float: right;
            padding-top: 10px;
            cursor: pointer;
        }
        
        .month ul {
            margin: 0;
            padding: 0;
        }
        
        .month ul li {
            color: white;
            font-size: 20px;
            text-transform: uppercase;
            letter-spacing: 3px;
            font-weight: 900;
        }
        
        .weekdays {
            margin: 0;
            padding: 10px 0;
            background-color: #ddd;
        }
        
        .weekdays li {
            display: inline-block;
            width: 12.6%;
            color: #666;
            text-align: center;
        }
        
        .days {
            padding: 10px 0;
            background-color: #eee;
            margin: 0;
        }
        
        .days li {
            display: inline-block;
            width: 13.6%;
            text-align: center;
            margin-bottom: 5px;
            font-size: 15px;
            color: #777;
        }

        /* lets add some active class  for current date*/
        .active{
            padding: 5px;
            background-color: #35403e;
            color: white;
        }
        /*  TO make it responsive lets add some media queries */
        
        @media screen and (max-width:720px) {
            .weekdays li,
            .days li {
                width: 13.1%;
            }
        }
        
        @media screen and (max-width:420px) {
            .weekdays li,
            .days li {
                width: 12.1%;
            }
            .days li .active{
                padding: 2px;
            }
        }
        
        @media screen and (max-width:290px) {
            .weekdays li,
            .days li {
                width: 12.2%;
            }
        }
    

    //   now Lets make our calendar dynamic using some javascript

    let dayList = document.querySelector('.days');
    let monthName = document.querySelector('.month-name');
    let yearName = document.querySelector('.year');
    let prev = document.querySelector('.prev');
    let next = document.querySelector('.next');

    // lets create an Date object

    let dt = new Date();
    let month = dt.getMonth()+1 //as it will return value between 0-11 so to make it 1-12 we add 1 to it
    let year = dt.getFullYear();
    let currentDay = dt.getDate();

    // make an array of month name to map with the month value we obtained using getMonth()
    let monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'july', 'August', 'September', 'October', 'November', 'December']


    // now lets handle the previous and next button click
    prev.addEventListener('click',event=>{
        if(month===1){
            month =12;
            month-=1;
        }else{
            month-=1;
        }
        calendar();
    })

    next.addEventListener('click',event=>{
        if(month===12){
            month =1;
            month+=1;
        }else{
            month+=1;
        }
        calendar();
    })
    // now lets make a calendar function

    const calendar = ()=>{
        monthName.innerHTML = monthNames[month-1];
        yearName.innerHTML = year;
        dayList.innerHTML = ''
        
        daysInMonth = new Date(year, month, 0).getDate(); //get toatl number of days in a particular month


        //  but still there is a problem
        // you can see that for every month the date starts from monday
        // it should not be as that
        // date of a new month should start from the next immediate dat from when the previous month ends
        // so lets match that pattern by adding gaps before the starting of the day in month

        // get day number at which the current month start (0 for sunday, 6 for saturday)

        dayNumber = new Date(year,month-1,1).getDay();
        let gaps
        if (dayNumber === 0) {
            gaps = 6
        }else{
            gaps = dayNumber - 1;
            // Ex:: if it is monday dayNumber = 1, so gaps = 1-1 = 0;
            // if it is thursdat dayNumber = 4, so gaps = 4-1 = 3;
        }

        for(day = -gaps + 1 ;day<=daysInMonth; day++){
            const days = document.createElement('li');
            if(day<=0){
                days.innerHTML = "";
                dayList.appendChild(days);
            } else if (day===currentDay&&month===dt.getMonth()+1 && year===dt.getFullYear()){
                //make this date as active as it is current date i.e. today
                days.setAttribute('class','active');
                days.innerHTML = day;
                dayList.appendChild(days)
            }
            else{
                days.innerHTML = day;
                dayList.appendChild(days);
            }
        }
    }

    // thats it our calendar is ready

        
    

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.