JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://datejs.googlecode.com/files/date.js"></script>
<div id="month"></div>
<div class="cal">
<table id="calendar">
<thead>
<tr>
<td>SUN</td>
<td>MON</td>
<td>TUE</td>
<td>WED</td>
<td>THU</td>
<td>FRI</td>
<td>SAT</td>
</tr>
</thead>
<tbody id="calendar-body"></tbody>
</table>
</div> <a id="calendar-prev">Prev</a>
<a id="calendar-next">Next</a>
CSS
.today {
background-color:#27E3C0;
}
.available {
background-color:#0CED00;
}
.unavailable {
background-color:#E32730;
}
.exceeded {
background-color:#FF6600;
}
.selected {
background-color:#CCCCCC;
}
JavaScript
var firstday = new Date();
var lastday = new Date();
var calendarmonth = new Date();
var CCheck;
$(document).ready(function () {
Date.today();
firstday.setMonth(Date.today().getMonth(), 1);
lastday.setMonth(Date.today().getMonth() + 1, 0);
calendarmonth.setMonth(Date.today().getMonth());
calendarInit();
$('#calendar-prev').on('click', function () {
if (CCheck > 35) {
//render 6 rows
for (i = 1; i < 7; i++) {
$('#row' + i).remove();
}
} else {
//render 5 rows
for (i = 1; i < 6; i++) {
$('#row' + i).remove();
}
}
$("#month").empty();
calendarmonth.addMonths(-1);
firstday.addMonths(-1);
lastday.setMonth(firstday.getMonth() + 1, 0);
calendarInit();
});
$('#calendar-next').on('click', function () {
if (CCheck > 35) {
//render 6 rows
for (i = 1; i < 7; i++) {
$('#row' + i).remove();
}
} else {
//render 5 rows
for (i = 1; i < 6; i++) {
$('#row' + i).remove();
}
}
$("#month").empty();
calendarmonth.addMonths(1);
firstday.addMonths(1);
lastday.setMonth(firstday.getMonth() + 1, 0);
calendarInit();
});
addRemoveClickTrigger();
});
function calendarInit() {
CCheck = lastday.getDate() + firstday.getDay();
var i;
var colNo;
var a = 1;
var days = new Array();
$("#month").append("Month: " + calendarmonth.toString("MMMM, yyyy"));
if (CCheck > 35) {
//render 6 rows
for (i = 1; i < 7; i++) {
$('#calendar tbody').append('<tr id = row' + i + '></tr>');
colNo = a + 6;
for (a; a <= colNo; a++) {
var datenum = a - firstday.getDay();
if (datenum < 1) {
$('#row' +...