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%" class="right">
                <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;
}
.event {
    background-color:blue;
    position: absolute;
    left:0;
    right:35px;
    left:105px;
    opacity: .5;
}
.second td {
    height:30px;
    border-bottom: 1px solid #000;
}
.first td {
    height:31px;
}
.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;
    position: relative;
    width: 100%;
}

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...