calendar.html

<html>

<head>
    <title>JavaScript calendar</title>
    <script>
        function GetEventDates(month) {
            var events = {
                "0": [21],
                "1": [21],
                "2": [25],
                "3": [1,22],
                "4": [21],
                "5": [21],
                "6": [21],
                "7": [21],
                "8": [21],
                "9": [21],
                "10": [21],
                "11": [21],
            };

            return events[month];
        }
        function displayCalendar() {
            var dateNow = new Date();
            var month = dateNow.getMonth();
            var year = dateNow.getFullYear();
            renderCalendar(month, year);
        }

        function renderCalendar(monthToDisplay, yearToDisplay) {
            var htmlContent = "";
            var FebNumberOfDays = "";
            var counter = 1;
            var dateNow = new Date();
            var month = monthToDisplay;
            document.getElementById("currentMonth").value = month;
            var nextMonth = month + 1;
            var prevMonth = month - 1;
            var day = dateNow.getDate();
            var year = yearToDisplay;
            document.getElementById("currentYear").value = year;
            if (month == 1) {
                if ((year % 100 != 0) && (year % 4 == 0) || (year % 400 == 0)) {
                    FebNumberOfDays = 29;
                } else {
                    FebNumberOfDays = 28;
                }
            }

            // names of months and week days.
            var monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
            var dayNames = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thrusday", "Friday", "Saturday"];
            var dayPerMonth = ["31", "" + FebNumberOfDays + "", "31", "30", "31", "30", "31", "31", "30", "31", "30", "31"]
            // days in previous month and next one , and day of week.
            var nextDate = new Date(nextMonth + ' 1 ,' + year);
            var weekdays = nextDate.getDay();
            var weekdays2 = weekdays
            var numOfDays = dayPerMonth[month];

            htmlContent += "<ul class=\"days\">";

            while (weekdays > 0) {
                htmlContent += "<li>&nbsp;</li>";
                weekdays--;
            }

            while (counter <= numOfDays) {
                if (weekdays2 > 6) {
                    weekdays2 = 0;
                    //htmlContent += "</tr><tr>";
                }
                var dates = GetEventDates(month);
                if (dates.indexOf(counter) != -1) {
                    htmlContent += "<li><span class=\"active\">" + counter + "</span></li>";
                }
                else {
                    htmlContent += "<li>" + counter + "</li>";
                }

                weekdays2++;
                counter++;
            }
            htmlContent += "</ul>";

            var calendarBody = "<div class=\"month\"><ul><li class=\"prev\"><a href=\"javascript:void(0)\" onclick=\"javascript:displayPrevMonth()\">&#10094;</a></li><li class=\"next\"><a href=\"javascript:void(0)\" onclick=\"javascript:displayNextMonth()\">&#10095;</a></li><li>" + monthNames[month] + "&nbsp;" + year + "</span></li></ul></div>"
            calendarBody += "<ul class=\"weekdays\">";
            for (i = 0; i < dayNames.length; i++) {
                calendarBody += "<li>" + dayNames[i] + "</li>";
            }
            calendarBody += "</ul>";
            calendarBody += htmlContent;
            document.getElementById("calendar").innerHTML = calendarBody;
        }
        function displayNextMonth() {
            var month = parseInt(document.getElementById("currentMonth").value);
            var year = parseInt(document.getElementById("currentYear").value);
            month++;
            if (month > 11) {
                year++;
                month = 0;
            }
            renderCalendar(month, year);
        }

        function displayPrevMonth() {
            var month = parseInt(document.getElementById("currentMonth").value);
            var year = parseInt(document.getElementById("currentYear").value);
            month--;
            if (month < 0) {
                year--;
                month = 11;
            }
            renderCalendar(month, year);
        }
    </script>
</head>

<body onload="displayCalendar()">
    <div id="calendar"></div>
    <input type="hidden" id="currentMonth" />
    <input type="hidden" id="currentYear" />
</body>
<style>
    /* NEW */
    
    ul {
        list-style-type: none;
    }
    
    body {
        font-family: Verdana, sans-serif;
    }
    /* Month header */
    
    li a {
        text-decoration: none;
        color: black;
    }
    
    .month {
        background: #1abc9c;
        padding: 10px 0;
    }
    /* Month list */
    
    .month ul {
        margin: 0;
        padding: 0;
    }
    
    .month ul li {
        color: white;
        font-size: 20px;
        text-transform: uppercase;
        letter-spacing: 3px;
        text-align: center;
    }
    /* Previous button inside month header */
    
    .month .prev {
        float: left;
    }
    /* Next button */
    
    .month .next {
        float: right;
    }
    /* Weekdays (Mon-Sun) */
    
    .weekdays {
        margin: 0;
        padding: 10px 0;
        background-color: #ddd;
    }
    
    .weekdays li {
        display: inline-block;
        width: 13.6%;
        color: #666;
        text-align: center;
    }
    /* Days (1-31) */
    
    .days {
        padding: 10px 0;
        background: #eee;
        margin: 0;
    }
    
    .days li {
        list-style-type: none;
        display: inline-block;
        width: 13.6%;
        text-align: center;
        margin-bottom: 5px;
        color: #777;
    }
    /* Highlight the "current" day */
    
    .days li .active {
        padding: 5px;
        background: #1abc9c;
        color: white !important
    }
</style>

</html>