Skip to content

Instantly share code, notes, and snippets.

@myfonj

myfonj/calendar.html

Forked from erkiesken/calendar.html
Last active June 30, 2022 05:25
Show Gist options
  • Save myfonj/35cc627ce0304176dfb54d65f8074102 to your computer and use it in GitHub Desktop.
Save myfonj/35cc627ce0304176dfb54d65f8074102 to your computer and use it in GitHub Desktop.
Download ZIP
compact calendar
Raw
calendar.html
<html>
<body>
<style>
.month {
--unit: 1.25rem;
padding-left: calc(var(--firstWeekDay) * var(--unit));
}
.day {
display: inline-block;
width: var(--unit);
height: var(--unit);
background: #EEE;
text-align: center;
line-height: var(--unit);
}
.day.weekend {
background: #CCC;
}
</style>
<script>
const cal = document.createElement('div');
cal.classList.add('calendar');
const y = new Date().getFullYear();
for (let m = 1; m <= 12; m++) {
const days = new Date(y, m, 0).getDate();
const row = document.createElement('div');
row.classList.add('month');
row.dataset.month = m;
for (let day = 1; day <= days; day++) {
const cell = document.createElement('div');
const d = new Date(y, m - 1, day).getDay();
if(day == 1) {
row.style.setProperty('--firstWeekDay', d);
}
cell.innerText = day;
cell.classList.add('day');
if (d == 0 || d == 6) {
cell.classList.add('weekend');
}
cell.dataset.weekday = d;
row.appendChild(cell);
}
cal.appendChild(row);
}
document.body.appendChild(cal);
</script>
</body>
</html>
@jarrodoxical
Copy link 

body {
		font-family: monospace;
		font-weight: bold;
		white-space: pre;
	  }

A nerd calendar needs a monospaced font and a little white space break to start to make it less visually messed up by the busy space going on at the top of your browser.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment