JSFiddle - React, Tailwind, and code Playground

by lostinplace

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>



<script language="JavaScript">
    var CurrentDate = new Date()
    var calMo = CurrentDate.getMonth() + 1;
    var calYr = CurrentDate.getFullYear();
    var updateOption;
    var curEdit;
    var preColor;
    var hiColor = "#d9e5f1";  //"#d9e5f1";

    function VER5_Check() {
        var b = navigator.appName;
        if (b == "Netscape") this.b = "NS";
        else if (b == "Microsoft Internet Explorer") this.b = "IE";
        this.v = parseInt(navigator.appVersion);
        this.IE5 = (navigator.userAgent.indexOf('MSIE 5') > 0);
        this.NS5 = (this.b == "NS" && this.v == 5);
        this.VER5 = (this.IE5 || this.NS5);
    }
    is = new VER5_Check();
    if (!is.VER5) {
        alert("Internet Explorer 5.0 or Netscape NS6 needed to view this site.");
        document.write('<meta http-equiv="refresh" content="0; url=index.shtml">');
    }
</script>


<script type="text/javascript">

    var styledCal = new JEC('styledCalendar', {
        tableClass: 'styledCalendar',
        firstMonth: 201001,
        lastMonth: 202012,
        specialDay: 1,
        linkNewWindow: false,
        //weekdays: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]
    });

    
    //var numDays;

    //numDays = daysInMonth(11, 2011);

    //for (var i = 1; i < 31; i++){
    for (var i = 20111101; i < 20111131; i++){
        var iHold = 0;
        if (i < 10)
            ihold = "0" + i;
        else
            ihold = i;
        //styledCal.defineEvent(calYr + ' ' + calMo + ' ' + i, "");
        //styledCal.defineEvent(201111 + ' ' + iHold, "");
        styledCal.defineEvent(i, "");
    }

    styledCal.defineEvents([
        { eventDate: 20111104, eventDescription: 'MINDSPIN ROCKS!', eventLink: 'http://MindSpinTech.com'},
        { eventDate: 20111105, eventDescription: 'Feed the...

CSS

@CHARSET "UTF-8";

/* "Global" settings for the calendar table */
table.styledCalendar {
  border-collapse: collapse;
  border: 3px solid #49997a;
  font-size: 12px;
  font-family: Arial, Verdana;
  /*margin: 5px;*/
  margin: auto; /* This centers the table on the page*/
}

/* "Global" settings for all table cells in the calendar table */
table.styledCalendar th, table.styledCalendar td {
  border: 1px solid #49997a;
  padding: 2px;
  width: 200px;   /* this makes all of the days the same width (note: 7 * 14% = 98%) */
}

/* Settings for cells in the body of the calendar (i.e., the days) */
table.styledCalendar td {
  height: 125px; /*155px; */
  vertical-align: top;
}

/* Formatting of the events when they appear in a day cell */
table.styledCalendar td div.events {
  font-size: 11px;
  line-height: 18px;
  height: 110px; /*138px; */
  overflow-y: auto; 
  color: black;
}

table.styledCalendar td div.events span {
  display: block;
  margin-bottom: -3px;
}

table.styledCalendar td div.events a {
  display: block;
  margin-bottom: -3px;
  color: black;  
}

table.styledCalendar td div.events a:active, table.styledCalendar td div.events a:focus {
  outline: 0; /* remove the dotted border from the active link */
}

/* Formatting of the year/month banner */
table.styledCalendar thead th {
  background-color: #d9e5f1;
  color: black;
  font-size: 16px;
  font-weight: bold;
  margin: 5px;
}

/* Formatting of the weekday names */
table.styledCalendar tbody th {
  background-color: #d9e5f1;
  color: blue;
  font-size: 10px;
  font-weight: bold;  
  margin: 3px;
}

/* Formatting of the footer cells (with links to other months) */
table.styledCalendar tfoot th {
  border: none;
  background-color: #d9f1f1;
}

table.styledCalendar tfoot th a {
  color: black; /*#b2b28f;*/
  text-decoration: none;
  display: block;
}

table.styledCalendar tfoot th a:hover {
  border: 1px solid #b2b28f;
}

/* Formatting of the day cells */
table.styledCalendar {
  background-color: #ffffff;...

JavaScript

$(function () {

    // Utility to get a DOM element
    var _Dom = {
        get: function (el) {
            if (typeof el == 'string') {
                return document.getElementById(el);
            } else {
                return el;
            }
        }
    };

    // Utility to add an Event handler
    var _Event = {
        add: function () {
            if (typeof window.addEventListener != 'undefined') {
                return function (el, type, fn) {
                    _Dom.get(el).addEventListener(type, fn, false);
                };
            } else if (typeof window.attachEvent != 'undefined') {
                return function (el, type, fn) {
                    // For IE window onload events, need to manually
                    // "chain" the functions together to preserve
                    // the proper order.
                    if (el == window && type == 'load') {
                        var oldOnload = window.onload;
                        if (typeof oldOnload != 'function') {
                            window.onload = fn;
                        } else {
                            window.onload = function () {
                                if (oldOnload) {
                                    oldOnload();
                                }
                                fn();
                            };
                        }
                    } else {
                        var f = function () {
                            fn.call(_Dom.get(el), window.event);
                        };
                        _Dom.get(el).attachEvent('on' + type, f);
                    }
                };
            }
        } ()
    };

    // Utility function that fixes a Netscape 2 and 3 bug
    var _getFullYear = function (d) { // d is a date object
        var yr = d.getYear();
        if (yr < 1000)
            yr += 1900;
        return yr;
    };

    // Various internal utility functions for date manipulation

   ...