JavaScript Calendar

SUN

MON

TUE

WED

THUR

FRI

SAT

HTML

            <div class="calendar" id="calendar">
    <div class="calendar-btn month-btn" onclick="$('#months').toggle('fast')">
        <span id="curMonth"></span>
        <div id="months" class="months dropdown"></div>
    </div>

    <div class="calendar-btn year-btn" onclick="$('#years').toggle('fast')">
        <span id="curYear"></span>
        <div id="years" class="years dropdown"></div>
    </div>

    <div class="clear"></div>

    <div class="calendar-dates">
        <div class="days">
            <div class="day label">SUN</div>
            <div class="day label">MON</div>
            <div class="day label">TUE</div>
            <div class="day label">WED</div>
            <div class="day label">THUR</div>
            <div class="day label">FRI</div>
            <div class="day label">SAT</div>

            <div class="clear"></div>
        </div>

        <div id="calendarDays" class="days">
        </div>
    </div>
</div>

JavaScript

            
var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
var startYear = 2000;
var endYear = 2020;
var month = 0;
var year = 0;

function loadCalendarMonths() {
    for (var i = 0; i < months.length; i++) {
        var doc = document.createElement("div");
        doc.innerHTML = months[i];
        doc.classList.add("dropdown-item");

        doc.onclick = (function () {
            var selectedMonth = i;
            return function () {
                month = selectedMonth;
                document.getElementById("curMonth").innerHTML = months[month];
                loadCalendarDays();
                return month;
            }
        })();

        document.getElementById("months").appendChild(doc);
    }
}

function loadCalendarYears() {
    document.getElementById("years").innerHTML = "";

    for (var i = startYear; i <= endYear; i++) {
        var doc = document.createElement("div");
        doc.innerHTML = i;
        doc.classList.add("dropdown-item");

        doc.onclick = (function () {
            var selectedYear = i;
            return function () {
                year = selectedYear;
                document.getElementById("curYear").innerHTML = year;
                loadCalendarDays();
                return year;
            }
        })();

        document.getElementById("years").appendChild(doc);
    }
}

function loadCalendarDays() {
    document.getElementById("calendarDays").innerHTML = "";

    var tmpDate = new Date(year, month, 0);
    var num = daysInMonth(month, year);
    var dayofweek = tmpDate.getDay();       // find where to start calendar day of week

    for (var i = 0; i <= dayofweek; i++) {
        var d = document.createElement("div");
        d.classList.add("day");
        d.classList.add("blank");
        document.getElementById("calendarDays").appendChild(d);
    }

    for (var i = 0; i < num; i++) {
        var tmp = i + 1;
        var d = document.createElement("div");
        d.id = "calendarday_" + i;
        d.className = "day";
        d.innerHTML = tmp;

        document.getElementById("calendarDays").appendChild(d);
    }

    var clear = document.createElement("div");
    clear.className = "clear";
    document.getElementById("calendarDays").appendChild(clear);
}

function daysInMonth(month, year)
{
    var d = new Date(year, month+1, 0);
    return d.getDate();
}

window.addEventListener('load', function () {
    var date = new Date();
    month = date.getMonth();
    year = date.getFullYear();
    document.getElementById("curMonth").innerHTML = months[month];
    document.getElementById("curYear").innerHTML = year;
    loadCalendarMonths();
    loadCalendarYears();
    loadCalendarDays();
});

CSS

            
body, *{
    padding:0px;
    margin:0px;
    box-sizing: border-box;
}
.calendar
{
    background-color: white;
    padding: 20px;
    box-shadow: 0px 5px 10px rgba(0,0,0,0.4);
}

.calendar .dropdown
{
    display: none;
    position: absolute;
    background-color: #fff;
    color: #1caff6;
    text-align: center;
    font-size: 14pt;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 30px;
    padding-right: 30px;
    width: 160px;
    left: 0px;
    z-index: 2000;
}

.calendar .dropdown .dropdown-item
{
    cursor:pointer;
    opacity: .7;
    transition: .5s opacity;
}

.calendar .dropdown .dropdown-item:hover
{
    opacity: 1;
}

.calendar .years
{
    display:none;
}

.calendar .title
{
    text-align:center;
    font-size:20pt;
}

.calendar .calendar-btn
{
    float: left;
    background-color: #24aeff;
    color: white;
    text-align: center;
    font-size: 14pt;
    padding-top: 5px;
    padding-bottom: 5px;
    position: relative;
    width: 20%;
    cursor: pointer;
    transition: .5s background-color;
}

.calendar .calendar-btn:hover{
    background-color:#1f71a1;
}

.calendar .year-btn
{
    float:right;
}

.calendar .calendar-dates .days .day
{
    float:left;
    width: 12%;
    margin: 1%;
    padding: 1%;
    font-size:13pt;
    text-align:center;
    border-radius: 10px;
    border: solid 1px #ddd;
}

.calendar .calendar-dates .days .day.blank
{
    background-color: white;
    border:none;
}

.calendar .calendar-dates .days .day.selected
{
    background-color: #1caff6;
    color: white;
    cursor:pointer;
    opacity: .5;
    transition: .5s opacity;
}

.calendar .calendar-dates .days .day.selected:hover
{
    opacity: 1;
}

.calendar .calendar-dates .days .day.label
{
    height: 40px;
    background-color: white;
    color: black;
    border:none;
    font-weight:bold;
}

.clear{
    clear:both;
}

@media only screen and (max-width: 960px) {
    .calendar{
        width: 100%;
        margin: 0px;
        margin: 0px;
        box-sizing: border-box;
        position: relative;
        left: 0px;
    }
}

Menu

Site navigation

Contact

Popular tags

JavaScript Calendar

HTML

JavaScript

CSS