JSFiddle - React, Tailwind, and code Playground

by charlescarver

HTML

<div id="calendar_container" data-date="">
    <div class="calendar_navigation">	<a href="#" class="calendar_today calendar_watch">Today</a> -	<a href="#"
        class="calendar_lastMonth calendar_watch">Back</a> -	<a href="#" class="calendar_nextMonth calendar_watch">Next</a>

    </div>
</div>
<div id="event_container">
    <div class="event_startTime">From
        <input type="text" size="2" class="event_smonth" />/
        <input type="text" size="2" class="event_sday" />/
        <input type="text" size="4" class="event_syear" />
        <input type="text" size="2" class="event_shour" />:
        <input type="text" size="2" class="event_sminute" />
        <input type="text" size="2" class="event_smeridiem" />
    </div>
    <div class="event_endTime">From
        <input type="text" size="2" class="event_emonth" />/
        <input type="text" size="2" class="event_eday" />/
        <input type="text" size="4" class="event_eyear" />
        <input type="text" size="2" class="event_ehour" />:
        <input type="text" size="2" class="event_eminute" />
        <input type="text" size="2" class="event_emeridiem" />
    </div>
    <button>Done</button>
</div>
<div id="day_container" data-date="">
    <div class="day_date"></div>
    <table id="day" cellpadding="0" cellspacing="0">
        <tr>
            <td>
                <table class="first" cellpadding="0" cellspacing="0"></table>
            </td>
            <td width="100%">
                <table class="second" cellpadding="0" cellspacing="0"></table>
            </td>
        </tr>
    </table>
    </table>
</div>

CSS

* {
    font-family: Helvetica;
}
.calendar_current {
    font-weight:bold;
    background-color:#ccc;
}
#calendar {
    width:100%;
    text-align: center;
}
.calendar_next, .calendar_back {
    color:#999;
}
.calendar_navigation {
    display: inline-table;
    border:1px solid #000;
    padding:10px;
    width:100%;
}
#day_container {
    display: inline-table;
    margin-top:10px;
    border:1px solid #000;
    padding:25px;
    padding-top:30px;
    width:100%;
}
#event_container {
    display: inline-table;
    margin-top:10px;
    border:1px solid #000;
    padding:10px;
    width:100%;
}
.day_date {
    margin-bottom: 30px;
}
.second td {
    height:25px;
    border-bottom: 1px solid #000;
}
.first td {
    height:26px;
}
.first {
    width:70px;
    text-align: center;
    margin-top:-25px;
    padding-right: 15px;
}
.second {
    width:100%;
    border-top: 1px solid #000;
    border-right: 1px solid #000;
    border-left: 1px solid #000;
}

JavaScript

var todays_date = new Date(new Date(new Date(new Date(new Date().setMinutes(0)).setHours(0)).setSeconds(0)).setMilliseconds(0));

// Calendar
function calendar(d) {

    $("#calendar").remove();
    $("#calendar_container").append("<table border='1' id='calendar'></table>");

    var t = new Date(d); // Today [Wed Jan 16 2013 00:00:00 GMT-0500 (EST)]
    var d = t.getDate(); // Today's date (1-31) [16]
    var y = t.getFullYear(); // Full year [2013]
    var m = t.getMonth(); // Month (0-11) [0]
    var mN = ["January", // Month name array (0-11)
    "February",
        "March",
        "April",
        "May",
        "June",
        "July",
        "August",
        "September",
        "October",
        "November",
        "December"];
    var fM = mN[m]; // Full month name [January]
    var dIM = new Date(y, m + 1, 0).getDate(); // Number of days in current month (1-31) [31]
    var dILM = new Date(y, m, 0).getDate(); // Number of days in last month (1-31) [31]
    var dOW = new Date(y, m, 1).getDay(); // Day of the first day of the month (0-6) [2]
    var nOW = Math.ceil((dIM + dOW) / 7); // Number of weeks in the month, including space [5]
    var w = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];

    function datDate(m, day, y) {
        var date = new Date(" " + mN[m] + " " + day + " " + y);
        return date;
    }

    $("#calendar").append("<tr><td class='calendar_month' colspan='7'>" + mN[m] + " - " + y + "</td></tr>");

    $("#calendar").append("<tr class='calendar_daysOfWeek'></tr>");
    for (var i = 0; i < 7; i++) $(".calendar_daysOfWeek").append("<td>" + w[i][0] + "</td>");

    if (m === 0) {
        var month = 12;
    } else {
        var month = m - 1;
    }
    var pre = new Date(y - 1, month + 1, 0).getDate();
    var daysInLastMonth = new Date(y, month + 1, 0).getDate();
    var after = (7 * (nOW)) - (dOW + dIM);
    var count = 0,
        $row;
    for (var i = 0 - dOW; i < dIM; i++) {
        var day...