JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

HTML

<div id="agenda">
  <div id="agenda-nav">
  
  </div>
  <div id="agenda-content">
  
</div>
</div>

CSS

#agenda{
  
}
#agenda>#agenda-nav{
   background-color: #356DB0;
   overflow: auto;
   max-height: 172px;
}
#agenda>#agenda-content{
  
}
table.agenda-calendar{
  background-color: #356DB0;
  width: 33%;
  color: #fff;
  font-family: helvetica;
  font-size: 10px;
  border-spacing: 1px;
  float: left;
}
table.agenda-calendar>caption{
  background-color: #356DB0;
  color:#fff;
  padding:3px;
  font-size: 15px;
  text-transform: uppercase;
}
table.agenda-calendar th{
  padding: 3px;
  font-size: 10px;
}
table.agenda-calendar td{
  text-align:center;
  border: solid 1px #9fbcde;
  padding: 3px;
  cursor: pointer;
}
table.agenda-calendar td:hover{
  background-color: #9fbcde;
  color: #356DB0;
}
ul.agenda-list{
  list-style: none;
  margin:0px;
  padding:0px;
  font-family: helvetica;
}
ul.agenda-list>li{
  
}
ul.agenda-list>li>ol{
  list-style: none;
  margin:0px;
  padding:0px;
}
ul.agenda-list>li>ol>li{
  background-color:#eee;
  padding:5px;
  margin-bottom:2px;
  margin-left: 60px;
  position: relative;
  min-height:16px;
}
ul.agenda-list>li>ol>li>span.time{
 position: absolute;
 left:-60px;
 font-size: 11px;
}
ul.agenda-list>li>ol>li>div{
  
}

JavaScript

function Agenda(navelem, contentelem, year, month, clear){
	
	if(typeof(clear) == 'undefined'){
		
		clear = true;
		
	}
	
  var t = this;
  
  t.month_labels = ["January","February","March","April","May","June","July","August","September","October","November","December"];
  
  t.day_labels = ["Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"];
	
  t.nth = function(d) {
    if (d > 3 && d < 21) return 'th';
    switch (d % 10) {
      case 1:  return "st";
      case 2:  return "nd";
      case 3:  return "rd";
      default: return "th";
    }
  }
  
	t.getDay = function(date) { // get day number from 0 (monday) to 6 (sunday)
      let day = date.getDay();
      if (day == 0) day = 7; // make Sunday (0) the last day
      return day - 1;
    }
	t.year = year;
	t.mon = month - 1; // months in JS are 0..11, not 1..12
    t.d = new Date(t.year, t.mon);

	t.page = '<ul class="agenda-list">';


    t.table = '<table class="agenda-calendar"><caption>' + t.month_labels[t.mon] + '</caption><tbody class="days-of-week"><tr><th>MON</th><th>TUE</th><th>WED</th><th>THU</th><th>FRI</th><th>SAT</th><th>SUN</th></tr></tbody><tbody><tr>';

      // spaces for the first row
      // from Monday till the first day of the month
      // * * * 1  2  3  4
      for (let i = 0; i < t.getDay(t.d); i++) {
        t.table += '<td></td>';
      }

      // <td> with actual dates
      while (t.d.getMonth() == t.mon) {
        t.table += '<td data-date-day="' + t.d.getDate() + '" data-date-month="' + parseInt(t.d.getMonth()+1) + '" data-date-year="' + t.d.getFullYear() + '">' + t.d.getDate() + '<div class="calendar-events"></div></td>';
        
        
        t.page += '<li data-date-day="' + t.d.getDate() + '" data-date-month="' + parseInt(t.d.getMonth()+1) + '" data-date-year="' + t.d.getFullYear() + '"><p>' + t.day_labels[t.getDay(t.d)] + ', ' + t.month_labels[t.mon] + ' ' + t.d.getDate() + '' +  t.nth(t.d.getDate()) + ' ' + t.d.getFullYear() + '</p><ol><li...