A Calendar in Three Lines of CSS

Here’s a little CSS Grid use case where a list of days is transformed into a calendar:

See the Pen
Simple Calendar With CSS Grid
by Calendar Tricks (@calendartricks)
on CodePen.

My choice for this CSS calendar tutorial is a list. Why? Because it’s the easiest way to show the amazing capabilities of CSS grid.

With a little CSS extra you can easily make Sunday the last day of the week — a format we prefer here in Europe:

.weekday:nth-child(1) {
  grid-column: 7;
  grid-row: 1;
}

.first-day {
  grid-column-start: 2;
}

See the Pen Simple Calendar With CSS Grid by Bramus (@bramus) on CodePen.

Additionally I’d further adjust the code to have the first day be set by use of a CSS Custom Property. That way the calendar would be able to display any month, without needing any CSS adjustments at all.

A Calendar in Three Lines of CSS →

☝️ If you haven’t by now, you really should learn CSS Grid and read up on its best practices.

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.