JSFiddle - React, Tailwind, and code Playground

by sungsoonz

CSS

table
{
border-collapse:collapse;
}
table img
{
width:50px;
height:50px;
}
td,table
{
border-color:blue;
text-align:center;
}
td:hover
{
cursor:pointer;
background-color:yellow;
}

JavaScript

var date=new Date();
var mn=['JAN','FEB','MAR','APR','MAY','JUN','JUL','AUG','SEP','OCT','NOV','DEC'];
y=date.getFullYear();
m=date.getMonth();

function preyear()
{
    y -= 1;
    calendar();
}
function premonth(){
    m -= 1;
    calendar();
}
function nextmonth(){
    m += 1;
    calendar();
}
function nextyear(){
    y += 1;
    calendar();
}
function today(){
    y=date.getFullYear();
    m=date.getMonth();
    calendar();
}

function calendar(){
    var html = "";

    html += "<table border=1><tr><td colspan=8>"+mn[m]+' '+y+"</td></tr>";
    html += "<tr><td  colspan='8'><button value='preyear' onclick='preyear()'><button value='premonth' onclick='premonth()'><button value = 'today' onclick = 'today()'><button value = 'nextmonth' onclick='nextmonth()'><button value = 'nextyear' onclick = 'nextyear()'></td></tr>";
    html += "<tr><td>S</td><td>M</td><td>T</td><td>W</td><td>T</td><td>F</td><td>S</td><td>W</td></tr>";
    html += "<tr>";
    for (var i=1; i<43; i++){
    var fday=new Date(y,m,1);
    days=new Date(y,m,i-fday.getDay());
    if (days.toDateString()== date.toDateString()){
        html += "<td style=color:red>"+days.getDate()+"</td>";
        }
    else{
        html += "<td>"+days.getDate()+"</td>";
        }
    if (i%7 == 0){
        var onejan=new Date(y,0,1);
        html += "<td>"+Math.ceil(((days-onejan)/(60*60*24*1000)+1)/7)    +"</td></tr><tr>";
        }
    }       
    html += "</tr></table>";    
    document.body.innerHTML = html;
}
calendar();