JSFiddle - React, Tailwind, and code Playground

HTML

<table id="calendarTable">
    <tr>
        <th id="calendarHeader" colspan="7">Calendar of Events</th>
    </tr>
    <tr>
        <td class="monthNav"><button type="button" id="monthLeftBtn" class="monthNavBtn">«</button></td>
        <th id="monthYearHeader" colspan="5"></th>
        <td class="monthNav"><button type="button" id="monthRightBtn" class="monthNavBtn">»</button></td>
    </tr>
    <tr>
        <td class="dayHolder">Su</td>
        <td class="dayHolder">Mo</td>
        <td class="dayHolder">Tu</td>
        <td class="dayHolder">We</td>
        <td class="dayHolder">Th</td>
        <td class="dayHolder">Fr</td>
        <td class="dayHolder">Sa</td>
    </tr>
    <tr class="dateHolder">
        <td class="dateBox" id="cGrid0"></td>
        <td class="dateBox" id="cGrid1"></td>
        <td class="dateBox" id="cGrid2"></td>
        <td class="dateBox" id="cGrid3"></td>
        <td class="dateBox" id="cGrid4"></td>
        <td class="dateBox" id="cGrid5"></td>
        <td class="dateBox" id="cGrid6"></td>
    </tr>
    <tr class="dateHolder">
        <td class="dateBox" id="cGrid7"></td>
        <td class="dateBox" id="cGrid8"></td>
        <td class="dateBox" id="cGrid9"></td>
        <td class="dateBox" id="cGrid10"></td>
        <td class="dateBox" id="cGrid11"></td>
        <td class="dateBox" id="cGrid12"></td>
        <td class="dateBox" id="cGrid13"></td>
    </tr>
    <tr class="dateHolder">
        <td class="dateBox" id="cGrid14"></td>
        <td class="dateBox" id="cGrid15"></td>
        <td class="dateBox" id="cGrid16"></td>
        <td class="dateBox" id="cGrid17"></td>
        <td class="dateBox" id="cGrid18"></td>
        <td class="dateBox" id="cGrid19"></td>
        <td class="dateBox" id="cGrid20"></td>
    </tr>
    <tr class="dateHolder">
        <td class="dateBox" id="cGrid21"></td>
        <td class="dateBox" id="cGrid22"></td>
        <td class="dateBox" id="cGrid23"></td>
        <td class="dateBox" id="cGrid24"></td>
       ...

CSS

/*CALENDAR STYLING*/
div#rightMainWrapper
{
    width: 30%;
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
    /*background-image: url("/Images/Background_Images/HorizontalGreenFade.jpg");*/
    /*background-color: #555;*/
}

div#eventCalendarWrapper
{
    width: 90%;
    min-width: 90%;
    max-width: 90%;
    margin: auto;
    margin-top: 25px;
    margin-bottom: 25px;
}

div.calendarWrapper
{
    width: 100%;
    height: 215px;
}

table#calendarTable
{
    border: 2px inset #888;
    width: 100%;
    margin: auto;
    background-color: #61915f;
    text-align: center;
    border-radius: 25px 25px 25px 25px;
    -moz-border-radius: 25px 25px 25px 25px;
    -ms-border-radius: 25px 25px 25px 25px;
    -webkit-user-select: none;
    border-spacing: 0;
    -khtml-user-select: none;
    -moz-user-select: -moz-none;
    -o-user-select: none;
    user-select: none;
    -ms-user-select: none;
    behavior: url(/Resources/PIE.htc);
}

th#calendarHeader
{
    width: 100%;
    font-family: Copperplate, "Copperplate Gothic Light", fantasy;
    padding-top: 5px;
    padding-bottom: 5px;
    color: #7a3c18;
    line-height: 1.3em;
}

th#monthYearHeader
{
    color: #dadada;
    font-family: Tahoma, Geneva, sans-serif;
}

button.monthNavBtn
{
    padding-bottom: 4px;
    vertical-align: middle;
    cursor: pointer;
    outline: none;
}

td.dateBox
{
    color: #f3cd51;
    width: 14.29%;
}

td.dateBox:hover
{
    background-color: #0b3773;
    cursor: pointer;
}

td.dayHolder
{
    color: #b70808;
    width: 14.29%;
    border-bottom: 1px solid #888;
    line-height: 1.5em;
}

tr#calendarRowSix
{
    display: none;
}

JavaScript

//Event Calendar Functionality
    var navDate = new Date();  //Date used to navigate the calendar.
    var trueDate = new Date();  //Date used to consistantly reflect the true date.
    var monthDays = new Array();  //An array that stores the number of days in each month.  February is done using another function.
    var stringMonth = "none";  //Variable to store the string value of the navigated month for display on the calendar.
    var sixthRow = false;  //A variable which tells whether the sixth row on the calendar (expands to fit the month) is necessary for the navigated month.
    var gridScroll = 0;  //Variable used in loop to plot the calendar with the appropriate dates.
    var n = 1;  //Number plotter for the calendar.
    var startGrid = 0;  //Will tell where the first day of the navigated month started.
    var endGrid = 0;  //Will tell where the last day of the navigated month ended.
    var isAnEvent = false;  //Temporarily stores whether the calendar cell is an event day or not (for background color manipulation).
    var isHighlighted = false;  //Tells whether a date cell is currently highlighted.
    var smallDateHolder = "";  //Stores the small date upon click of a calendar cell.
    var smallMonthHolder = "";  //Stores the small month upon click of a calendar cell.
    var smallFullDateHolder = "";  //Stores the full small navDate for display above the calendar.
    var smallSuperScript = "";  //Stores the calculated superscript appended to the numerical small date.
    var smallStringMonth = "";  //Stores the string value of the small month.
    var smallCellGridId = "";  //Stores the grid id of the clicked cell.
    var smallFullYear = 0;  //Stores the year for next month new years and previous month previous years, to display above the calendar.
    var tempStoreDate = 0;  //Temporarily stores the date to reset navDate after changing to the 1st (in order to determine first "day" of the month).
    var calendarRefresh = false;  //Determines...