JSFiddle - React, Tailwind, and code Playground

by ndikendii

HTML

<script type="text/javascript">
<!--
  var caldate = new Date();
  var thisday = caldate.getDate();
  var thismonth = caldate.getMonth();
  var thisyear = caldate.getFullYear();
  var first_day;
  var month = thismonth;
  var year = thisyear;
  var months = new Array(12);
  
  function setup(d, months_list) {
    var monthnr;
    first_day = d;
    caldate.setDate(1);
    months = months_list.split(',',12);
    fill_calendar();
  }
  
  function fill_calendar() {
    var calday = new Date();
    var daynr, firstcalday, myclass, slotid, slotnr;
    caldate.setFullYear(year, month, 1);
    element = document.getElementById('mmyyyy');
    element.innerHTML = months[month] + ' ' + year;
    //
    calday = caldate;
    firstcalday = 1 - caldate.getDay() + first_day;
    if (firstcalday > 1) {
      firstcalday = firstcalday - 7;
    }
    calday.setDate(firstcalday);
    for (slotnr=0; slotnr<42; slotnr++) {
      daynr = calday.getDate();
      if (calday.getMonth() == month) {
        myclass='day'
      } else {
        myclass='otherday'
        }
      slotid = 's' + slotnr;
      element = document.getElementById(slotid);
      if (daynr < 10 ) {
        daynrstr = '&nbsp;' + daynr;
      } else {
          daynrstr = daynr;
        }
      if (daynr == thisday && month == thismonth && myclass=='day' && year == thisyear) {
        element.innerHTML = '<strong>' + daynrstr + '</strong>';
        myclass = 'today';
      } else {      
          element.innerHTML = daynrstr;
        }      
      element.className=myclass;
      calday.setDate(calday.getDate() + 1);
    }
  }
  
  function next_month() {
    month= month + 1;
    if (month > 11) {
      month = 0;
      year = year + 1;
    }
    fill_calendar();
  }
  
  function last_month() {
    month= month - 1;
    if (month < 0) {
      month = 11;
      year = year - 1;
    }
    fill_calendar();
  }
  
  function next_year() {
    year = year + 1;
    fill_calendar();
  }
  
  function last_year() {
   ...

CSS

#ndikendii-calendar {
	margin: 0 auto;
	width: 100% !important;
	}
	
#ndikendii-calendar th {
	background-color: rgb(218, 62, 62) !important;
	border: 1px solid #fff;
	font-weight: bold;
	padding: 8px;
	text-align: center;
	}

#ndikendii-calendar .mm  {
	color: #fff;
	}
	
#ndikendii-calendar td {
	background: #afdefa;
	border: 1px solid #fff;
	padding: 8px;
	text-align: center;
	}
	
#ndikendii-calendar .today {
	background-color: rgb(218, 62, 62) !important; 
	color: #fff;
	}
	
#ndikendii-calendar .today a {
	color: #fff;
	}

#ndikendii-calendar .otherday {
	background: #eee !important; 
	font-size: 14px;
	text-align: center;
	background-color: Gainsboro;
	border-right-style: dotted;
	border-right-color: LightGray;
	color: Gray;
	cursor: default
	}
	
#ndikendii-calendar caption {
	background-color: rgb(218, 62, 62);
	color: #fff !important;
	font-size: 20px;
	text-align: center;
	font-weight: bold;
	}

#ndikendii-calendar #next, #prev {
    width: 15px;
    font-size: 14px;
    text-align: center;
    cursor: pointer 
    }