JSFiddle - React, Tailwind, and code Playground
HTML
<div class="current">-</div>
<div id="calendar_container">
<a href="#" class="today watch">Today</a>
<a href="#" class="back watch">Back</a>
<a
href="#" class="next watch">Next</a>
</div>
CSS
* {
font-family: Helvetica;
}
.current_date {
font-weight:bold;
background-color:#ccc;
}
#calendar {
width:100%;
text-align: center;
}
.current {
height:20px;
}
.calendar_next, .calendar_back {
color:#999;
}
JavaScript
// Calendar
function calendar(d) {
$("#calendar").remove();
$("#calendar_container").append("<table border='1' id='calendar'></table>");
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) {
date = new Date(" " + mN[m] + " " + day + " " + y);
return date;
}
$("#calendar").append("<tr><td class='month' colspan='7'>" + mN[m] + " - " + y + "</td></tr>");
$("#calendar").append("<tr class='day'></tr>");
for (var i = 0; i < 7; i++) $(".day").append("<td>" + w[i][0] + "</td>");
if (m === 0) {
n_m = 12;
} else {
n_m = m - 1;
}
var pre = new Date(y - 1, n_m + 1, 0).getDate();
var daysInLastMonth = new Date(y, n_m + 1, 0).getDate();
var after = (7 * (nOW)) - (dOW + dIM);
var count = 0,
$row;
for (var i = 0 - dOW; i < dIM; i++) {
var day = i + 1;
if (count % 7 === 0) {
$row = $("<tr...