Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<html>
<head>
    <meta charset="UTF-8">
    <title>Calendar</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div id="calendar-div">
    </div>
  
</body>
</html>
 
.currentmonth {
    color: blue;
    text-align: center;
}
.previous,
.next {
    cursor: pointer;
    border: 1px solid black;
}
.monthname {
    background: red;
}
.weekdays {
    border: 1px solid black;
    background-color: grey;
}
.currentday {
    border: 1px solid black;
    color: #00FF00;
    text-align: center;
}
table.calendar {
    border: 2px solid black;
    margin: 1em auto;
}
table.calendar td,
table.calendar th {
    padding: 0.5em;
}
 
let weekdays = ['Sun', 'Mon', 'Tue', 'Wed', 'Thur', 'Fri', 'Sat'],
    months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
    lastDayInMonth = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31],
    currentDate = new Date(),
    currentMonth = currentDate.getMonth(),
    day = currentDate.getDate(),
    year = currentDate.getFullYear();
function makeCalendar(month) {
    let nextDate = new Date(month + 1 + ' 1 ,' + year),
        firstDay = nextDate.getDay(),
        firstDay2 = firstDay,
        daysInMonth = lastDayInMonth[month],
        calendarView = "",
        i = 1;
    if (month == 1) {
        if ((year % 100 !== 0) && (year % 4 === 0) || (year % 400 === 0)) {
            lastDayInMonth[month] = 29;
        }
    }
    while (firstDay > 0) {
        calendarView += "<td class='premonth'></td>";
        firstDay--;
    }
    while (i <= daysInMonth) {
        if (firstDay2 > 6) {
            firstDay2 = 0;
            calendarView += "</tr><tr>";
        }
        if (i == day && month == currentMonth) {
            calendarView += "<td class='currentday'>" + i + "</td>";
        } else {
            calendarView += "<td class='currentmonth'>" + i + "</td>";
        }
        firstDay2++;
        i++;
    }
    var calendarTable = "<table class='calendar'> <tr class='month'><th class='previous' id='prev'>&lt;</th><th class = 'monthname' colspan='5'>" + months[month] + " " + 2017 + "</th><th class='next' id='next'>&gt;</th></tr>";
    calendarTable += "<tr class='weekdays'>";
    for (let i = 0; i < weekdays.length; i++) {
        calendarTable += "<td>" + weekdays[i] + "</td>";
    }
    calendarTable += "</tr>";
    calendarTable += "<tr>";
    calendarTable += calendarView;
    calendarTable += "</tr></table>";
    return calendarTable;
}
let view = document.getElementById("calendar-div"),
    cal = makeCalendar(currentMonth);
view.innerHTML = cal;
let previous = document.getElementById("prev").addEventListener('click', function() {
    let prevMonth = currentMonth -= 1;
    cal = makeCalendar(prevMonth);
})
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers