.calendar
.header-year
.header-month
-['M', 'T', 'W', 'T', 'F', 'S', 'S'].each do |day|
.day-of-week
#{day}
-(1..42).each do
.day
View Compiled
html {
font-size: 14.3vmin; // 1/7
}
.inverse {
background-color: black;
color: white;
}
.calendar {
display: grid;
font-family: 'Helvetica', 'Arial', sans-serif;
font-weight: bold;
grid-template-columns: repeat(7, auto);
letter-spacing: -0.09em;
line-height: 0.8;
margin: 0 auto;
width: 95vw;
}
.header-year,
.header-month {
font-size: 0.3em;
letter-spacing: -0.05em;
margin-top: 0.3em;
margin-bottom: 1rem;
}
.day-of-week,
.day {
border-left: 1px solid black;
.inverse & {
border-left: 1px solid white;
}
}
.header-year {
grid-column: 5;
}
.header-month {
grid-column: 6 / 8;
}
View Compiled
// Moment-ception to get a Moment object for the current month
// (we can use this in the future to wire up a month switcher)
var currentMonth = moment().month(moment().month());
/**
* Inverts colours if it’s an even-numbered month
*/
function setColor () {
if (currentMonth.format('M') % 2 === 0) {
document.querySelector('body').classList += 'inverse';
}
}
/**
* Renders year and month to header
*/
function renderHeader () {
// Get year and month strings
var yearString = currentMonth.format('YYYY');
var monthString = currentMonth.format('MMMM');
// Get DOM nodes to populate
var headerYear = document.querySelector('.header-year');
var headerMonth = document.querySelector('.header-month');
// Populate said DOM nodes with year and month strings
headerYear.innerHTML = yearString;
headerMonth.innerHTML = monthString;
}
/**
* Finds the first of the month and renders the days accordingly
*/
function renderCalendar () {
// Get the day of the week of the first so we know where to start
// numbering our days (handily, `isoWeekday` starts from Monday)
var firstOfMonthWeekday = currentMonth.date(1).isoWeekday();
// We also need to know when to stop numbering our days
var lastOfMonth = currentMonth.endOf('month').date();
// NodeList of slots in our calendar
var dateList = document.querySelectorAll('.day');
// Lop any calendar slots before the first off our list (a NodeList
// isn’t really an array, so we can’t use `slice` directly).
// `firstOfMonthWeekday` is one-indexed, so we have to subtract one
// to get the index of the first in the returned array.
var dates = Array.prototype.slice.call(dateList, (firstOfMonthWeekday - 1));
// Loop through date array
for (var i = 1; i <= lastOfMonth; i++) {
// Again with the subtraction to get the correct index
dates[i - 1].innerHTML = i;
}
}
setColor();
renderHeader();
renderCalendar();
This Pen doesn't use any external CSS resources.