JSFiddle - React, Tailwind, and code Playground

by willslab

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/mustache.js/0.7.2/mustache.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.0.0/moment.min.js"></script>
<div id="calendar"></div>
<script type="text/template" id="table">
<table class="calendar">
	<thead>
		<tr>
			<th>Sun</th>
			<th>Mon</th>
			<th>Tue</th>
			<th>Wed</th>
			<th>Thu</th>
			<th>Fri</th>
			<th>Sat</th>
		</tr>
	</thead>
	<tbody></tbody>
</table>
</script>

<script type="text/template" id="week">
<tr class="week">
	{{#dates}}
	<td>{{.}}</td>
	{{/dates}}
</tr>
</script>

JavaScript

var m = moment();

	var dayShortText = [
		"Sun",
		"Mon",
		"Tue",
		"Wed",
		"Thu",
		"Fri",
		"Sat"
	];

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

	var monthText = [
		// "",
		"January",
		"February",
		"March",
		"April",
		"May",
		"June",
		"July",
		"August",
		"September",
		"October",
		"November",
		"December"
	];

	var dayIndex = m.day();
	var monthIndex = m.month();

	var today = {
		year: m.year(),
		month: {
			index: monthIndex,
			text: monthText[monthIndex]
		},
		date: m.date(),
		day: {
			index: dayIndex,
			shortText: dayShortText[dayIndex],
			longText: dayLongText[dayIndex]
		} 
	};

	console.log("Year: " + today.year);
	console.log("Month: " + today.month.text);
	console.log("Date: " + today.date);
	console.log("Day: " + today.day.shortText);

	var tableTemplate = $('#table').html();
	var weekTemplate = $('#week').html();
	var $calendar = $('#calendar');

	var html = Mustache.render(tableTemplate);

	var weeks = [];

	var weekData = { dates: [ 28, 29, 30, 1, 2, 3, 4 ]};
	var weekHtml = Mustache.render(weekTemplate, weekData);

	var current = moment(m);

	current.date(1);
	current.subtract('days', current.day());
	var count = 0;

	while (count < 6 && current.month() <= m.month()) {
		var week = [];


		for (var i = 0; i < 7; i++) {
			week[i] = current.date();
			current.add('days', 1);
		}

		weeks.push(week);
		count++;
	}

	$calendar.html(html);

	for (var j = 0; j < weeks.length; j++) {
		weekHtml = Mustache.render(weekTemplate, { dates: weeks[j] });

		$calendar.find('tbody').append(weekHtml);
	}