JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div class="main">
        <h1>Monthly Availability Calender</h1>
        <label>Month</label>
        <select id="month">
            <option value="1">January</option>
            <option value="2">February</option>
            <option value="3">March</option>
            <option value="4">April</option>
            <option value="5">May</option>
            <option value="6">June</option>
            <option value="7">July</option>
            <option value="8">August</option>
            <option value="9">September</option>
            <option value="10">October</option>
            <option value="11">November</option>
            <option value="12">December</option>
        </select>

        <label>Year</label>
        <select id="year">
            <option value="2016">2016</option>
            <option value="2017">2017</option>
            <option value="2018">2018</option>
        </select>
    </div>

    <div id="weekHeader">
        <div class="dayHeader">Sunday</div>
        <div class="dayHeader">Monday</div>
        <div class="dayHeader">Tuesday</div>
        <div class="dayHeader">Wednesday</div>
        <div class="dayHeader">Thursday</div>
        <div class="dayHeader">Friday</div>
        <div class="dayHeader">Saturday</div>
    </div>

    <div id="results">

    </div>


    <div id="Availability-Buttons">
        <input type="button" value="All Month Available" class="avail" id="yes" />
        <input type="button" value="All Month Unavailable" class="unavail" id="no"/>
        <input type="button" value="Clear Calender" class="cleared" />
    </div>

</body>

CSS

.main {margin-left:50px; margin-top:50px;}

#weekHeader {margin-left:50px; margin-top:50px; clear: left; margin-bottom: 10px; border: 1px red; height: 40px;}

.calCell { height: 100px; width: 102px; border: 1px solid black; float:left; box-sizing: border-box;}

.calCell.empty {
  border: none;
}

.day  {height: 50px; width: 100px; border: 1px solid; float: left; margin-left:5px;text-align: center; vertical-align: middle; line-height: 50px;}
.row {clear: left;}

.dayHeader {height: 30px; width: 100px; background-color: black; color: white; border: 1px solid; float: left;  font-weight: bold;
    text-align: center; padding-top: 5px;}

#results {clear: left; margin-left:50px; height: 250px;}

input[type=button] {width: 200px; height: 40px;}

.avail {
    background-color: green;}
.avail:hover {
    color: white;
    background-color: darkgreen;
}
.avail:active {
    background-color: forestgreen;
}

.unavail {
    background-color: red;}
.unavail:hover {
    color: white;
    background-color: darkred;
}
.unavail:active {
    background-color: crimson;
}

#availability-buttons {
    margin-top:20px;
    margin-left: 500px;
    height: 150px;
    width: 400px;
    border: 1px solid darkblue;
    clear: both;
}

JavaScript

var daysOfTheWeek = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];

var displayCalGrid = function(mnth, yr) {

    var firstDayOfMonth = mnth + "/1/" + yr;
    var d = new Date(firstDayOfMonth);
    var numOfDaysInMonth = daysInMonth(d);
    var firstDayOfWeek = d.getDay();
    var calstr = "";
    
    $("#results").html("");
    
    for(var j = 0; j < firstDayOfWeek; j++){
        calstr += "<div class='calCell empty'></div>";
    }
    
    var maxCalDays = 35;
    for(var i =0; i<numOfDaysInMonth; i++) {
        // if there are 7 cells create string - row
        if((i+ firstDayOfWeek) %7 ==0 && i>0) {
            calstr += "<div class='row'>";
        }
        
        
        // increments through each cell - making up each row
        calstr += "<div class='calCell'>" + (i+1) + "</div>";
        if (i%7 ==0 && i>0) {
            calstr += "</div>";
        }
    }
    $("#results").append(calstr);
    // When a date-cell is clicked - changes color to green -> red -> white
    $(".calCell:not(.empty)").click(function() {
        changeColor($(this));
    });
};


var daysInMonth = function(anyDateInMonth) {
    return new Date(anyDateInMonth.getYear(), anyDateInMonth.getMonth()+1,0) .getDate();
};

// Changes cell background of the calendar
var changeColor = function(temp) {
    // if cell background is white -> change to green
    if(temp.css('background-color') == "rgba(0, 0, 0, 0)") {
        temp.css('background-color', 'green');
        // if cell background is green -> change to red
    } else if (temp.css('background-color') == "rgb(0, 128, 0)") {
        temp.css('background-color', 'red');
    } else {
        // else change back to white
        temp.css('background-color', '');
    }
};

/* Function Gets Month Value & Displays Calendar*/
$(document).ready(function() {
    var d = new Date();
    var mnth = d.getMonth()+1;
    var yr = d.getFullYear();
    
    $("#month").val(mnth); // Grabs Month from the...