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;
}
}