Calendar pure javascript

Calendar pure javascript

by Adi Jaya

HTML

<div class="wrapper">

    <div class="container-calendar">
        <h3 id="monthAndYear"></h3>
        
        <div class="button-container-calendar">
            <button id="previous" onclick="previous()">Previous</button>
            <button id="next" onclick="next()">Next</button>
        </div>
        
        <table class="table-calendar" id="calendar" data-lang="en">
            <thead id="thead-month"></thead>
            <tbody id="calendar-body"></tbody>
        </table>
        
        <div class="footer-container-calendar">
             <label class="lead mr-2 ml-2" for="month">Jump To: </label>
             <select id="month" onchange="jump()">
                 <option value=0>Jan</option>
                 <option value=1>Feb</option>
                 <option value=2>Mar</option>
                 <option value=3>Apr</option>
                 <option value=4>May</option>
                 <option value=5>Jun</option>
                 <option value=6>Jul</option>
                 <option value=7>Aug</option>
                 <option value=8>Sep</option>
                 <option value=9>Oct</option>
                 <option value=10>Nov</option>
                 <option value=11>Dec</option>
             </select>
             <select id="year" onchange="jump()"></select>       
        </div>

    </div>
    
</div>

CSS

html {
    font-family: sans-serif;
    font-size: 15px;
    line-height: 1.4;
    color: #444;
}

body {
    margin: 0;
    background: #504f4f;
    font-size: 1em;
}

.wrapper {
    margin: 15px auto;
    max-width: 1100px;
}

.container-calendar {
    background: #ffffff;
    padding: 15px;
    max-width: 320px;
    margin: 0 auto;
    overflow: auto;
}

.button-container-calendar button {
    cursor: pointer;
    display: inline-block;
    zoom: 1;
    background: #00a2b7;
    color: #fff;
    border: 1px solid #0aa2b5;
    border-radius: 4px;
    padding: 5px 10px;
}

.table-calendar {
    border-collapse: collapse;
    width: 100%;
}

.table-calendar td, .table-calendar th {
    padding: 5px;
    border: 1px solid #e2e2e2;
    text-align: center;
    vertical-align: top;
}

#monthAndYear {
    text-align: center;
    margin-top: 0;
}

.button-container-calendar {
    position: relative;
    margin-bottom: 1em;
    overflow: hidden;
    clear: both;
}

#previous {
    float: left;
}

#next {
    float: right;
}

.footer-container-calendar {
    margin-top: 1em;
    border-top: 1px solid #dadada;
    padding: 10px 0;
}

.footer-container-calendar select {
    cursor: pointer;
    display: inline-block;
    zoom: 1;
    background: #ffffff;
    color: #585858;
    border: 1px solid #bfc5c5;
    border-radius: 3px;
    padding: 5px 1em;
}

JavaScript

function generate_year_range(start, end){
    var years = "";
    for(var year = start; year <= end; year++){
        years += "<option value='"+ year +"'>"+ year +"</option>";
    }
    return years;
}

var createYear = generate_year_range(1970,2050);
document.getElementById("year").innerHTML = createYear;


today = new Date();
currentMonth = today.getMonth();
currentYear = today.getFullYear();
selectYear = document.getElementById("year");
selectMonth = document.getElementById("month");

var calendar = document.getElementById("calendar");
var lang = calendar.getAttribute('data-lang');

var months = "";
var days = "";

var monthDefault = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ];

var dayDefault = [ "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat" ];

if( lang == "en" ){
	months = monthDefault;
    days = dayDefault;
}
else if( lang == "id" ) {
	months = [ "Januari", "Februari", "Maret", "April", "Mei", "Juni", "Juli", "Agustus", "September", "Oktober", "November", "Desember" ];
    days = [ "Ming", "Sen", "Sel", "Rab", "Kam", "Jum", "Sab" ];
} 
else if( lang == "fr" ) {
	months = [ "Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre" ];
    days = [ "dimanche", "lundi", "mardi", "mercredi", "jeudi", "vendredi", "samedi" ];
} 


else {
	months = monthDefault;
    days = dayDefault;	
}


var $dataHead = "<tr>";
for ( dhead in days ) {
	let row = document.createElement("tr");
	$dataHead += "<th>"+ days[dhead] +"</th>";
}
$dataHead += "</tr>";

//alert($dataHead);
document.getElementById("thead-month").innerHTML = $dataHead; 


monthAndYear = document.getElementById("monthAndYear");
showCalendar(currentMonth, currentYear);



function next() {
    currentYear = (currentMonth === 11) ? currentYear + 1 : currentYear;
    currentMonth = (currentMonth + 1) % 12;
    showCalendar(currentMonth, currentYear);
}

function...