Skip to content

Instantly share code, notes, and snippets.

@voronianski

voronianski/esnextbin.md

Created March 2, 2016 10:10
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save voronianski/8a0b7b67b74519122a12 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save voronianski/8a0b7b67b74519122a12 to your computer and use it in GitHub Desktop.
Download ZIP
esnextbin sketch
Raw
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>ESNext Bin Sketch</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
font-family: sans-serif;
color: #333;
}
table {
display: inline-block;
vertical-align: top;
margin: 1rem;
}
td {
text-align: center;
line-height: 1.75rem;
width: 1.75rem;
}
thead td {
color: #999;
font-size: .75rem;
text-transform: uppercase;
}
tbody td {
font-size: .875rem;
}
tbody td:hover {
background-color: #333;
color: #fff;
cursor: pointer;
}
td.before, td.after {
color: #999;
}
</style>
</head>
<body>
<!-- put markup and other contents here -->
</body>
</html>
Raw
index.js
'use strict';
// Monday-first version: https://jsfiddle.net/pakastin/3guory3u/
for (var i = 0; i < 12; i++) {
// create a table for month with thead & tbody
var table = document.createElement('table');
var thead = document.createElement('thead');
var tbody = document.createElement('tbody');
// get weeks for a given month
var calendar = createCalendar(2016, i);
// iterate weeks
for (var j = 0; j < calendar.length; j++) {
// create table row for every week
var tr = document.createElement('tr');
var week = calendar[j];
// iterate days
for (var k = 0; k < week.length; k++) {
// create table cell for every day
var td = document.createElement('td');
var day = week[k];
// set day of month as table cell text content
td.textContent = day.date.getDate();
// add before/after class
day.before && td.classList.add('before');
day.after && td.classList.add('after');
// mount table cell
tr.appendChild(td);
}
// mount table row
tbody.appendChild(tr);
}
// create thead
thead.innerHTML = '<tr><td>' + 'Su Mo Tu We Th Fr Sa'.split(' ').join('</td><td>') + '</td></tr>';
// mount thead & tbody
table.appendChild(thead);
table.appendChild(tbody);
// mount table to body
document.body.appendChild(table);
}
function createCalendar (year, month) {
var results = [];
// find out first and last days of the month
var firstDate = new Date(year, month, 1);
var lastDate = new Date(year, month + 1, 0)
// calculate first sunday and last saturday
var firstSunday = getFirstSunday(firstDate);
var lastSaturday = getLastSaturday(lastDate);
// iterate days starting from first sunday
var iterator = new Date(firstSunday);
var i = 0;
// ..until last saturday
while (iterator <= lastSaturday) {
if (i++ % 7 === 0) {
// start new week when sunday
var week = [];
results.push(week);
}
// push day to week
week.push({
date: new Date(iterator),
before: iterator < firstDate, // add indicator if before current month
after: iterator > lastDate // add indicator if after current month
});
// iterate to next day
iterator.setDate(iterator.getDate() + 1);
}
return results;
}
function getFirstSunday (firstDate) {
var offset = firstDate.getDay();
var result = new Date(firstDate);
result.setDate(firstDate.getDate() - offset);
return result;
}
function getLastSaturday (lastDate) {
var offset = 6 - lastDate.getDay();
var result = new Date(lastDate);
result.setDate(lastDate.getDate() + offset);
return result;
}
Raw
package.json
{
"name": "esnextbin-sketch",
"version": "0.0.0"
}
Raw
transpiled.js
'use strict'
// Monday-first version: https://jsfiddle.net/pakastin/3guory3u/
;
for (var i = 0; i < 12; i++) {
// create a table for month with thead & tbody
var table = document.createElement('table');
var thead = document.createElement('thead');
var tbody = document.createElement('tbody');
// get weeks for a given month
var calendar = createCalendar(2016, i);
// iterate weeks
for (var j = 0; j < calendar.length; j++) {
// create table row for every week
var tr = document.createElement('tr');
var week = calendar[j];
// iterate days
for (var k = 0; k < week.length; k++) {
// create table cell for every day
var td = document.createElement('td');
var day = week[k];
// set day of month as table cell text content
td.textContent = day.date.getDate();
// add before/after class
day.before && td.classList.add('before');
day.after && td.classList.add('after');
// mount table cell
tr.appendChild(td);
}
// mount table row
tbody.appendChild(tr);
}
// create thead
thead.innerHTML = '<tr><td>' + 'Su Mo Tu We Th Fr Sa'.split(' ').join('</td><td>') + '</td></tr>';
// mount thead & tbody
table.appendChild(thead);
table.appendChild(tbody);
// mount table to body
document.body.appendChild(table);
}
function createCalendar(year, month) {
var results = [];
// find out first and last days of the month
var firstDate = new Date(year, month, 1);
var lastDate = new Date(year, month + 1, 0);
// calculate first sunday and last saturday
var firstSunday = getFirstSunday(firstDate);
var lastSaturday = getLastSaturday(lastDate);
// iterate days starting from first sunday
var iterator = new Date(firstSunday);
var i = 0;
// ..until last saturday
while (iterator <= lastSaturday) {
if (i++ % 7 === 0) {
// start new week when sunday
var week = [];
results.push(week);
}
// push day to week
week.push({
date: new Date(iterator),
before: iterator < firstDate, // add indicator if before current month
after: iterator > lastDate // add indicator if after current month
});
// iterate to next day
iterator.setDate(iterator.getDate() + 1);
}
return results;
}
function getFirstSunday(firstDate) {
var offset = firstDate.getDay();
var result = new Date(firstDate);
result.setDate(firstDate.getDate() - offset);
return result;
}
function getLastSaturday(lastDate) {
var offset = 6 - lastDate.getDay();
var result = new Date(lastDate);
result.setDate(lastDate.getDate() + offset);
return result;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment