This article has no byline and is on a website that is even more weirdly specific than this one is, but I appreciate the trick here. A seven-column grid makes for a calendar layout pretty quick. You can let the days (grid items) fall onto it naturally, except kick the first day over to the correct first column with grid-column-start.
Thoughts:
- I’d go with an
<ol>rather than a<ul>just because it seems like days are definitely ordered. - The days as-a-list don’t really bother me since maybe that makes semantic sense to the content of the calendar (assuming it has some)
- But… seeing the titles of the days-of-the-week as the first items in the same list feels weird. Almost like that should be a separate list or something.
- Or maybe it should all just be a
<table>since it’s sort of tabular data (it stands to reason you might want to cross-reference and look at all Thursdays or whatever).
Anyway, the placement trickery is fun.
Here’s another (similar) approach from our collection of CSS Grid starter templates.
I haven’t done a lot of work with CSS Grid yet and this seemed like a great opportunity to test it out. For my Calendar I moved the dates into a pseudo element that uses
counter()to increment them automatically, so that I could allow for content to be written inside each date without also having to have additional elements to separate them.I also made the Grid offset a CSS variable so that it was easier to repurpose the same code for more months, and used a bit of simple vanilla JS to apply an extra class to today’s date so that it is showcased a bit more.
But like I said… I’m new to Grid and the biggest ‘oopsie’ I keep running into is how the Grid collapses on smaller screens.
https://codepen.io/rkieru/pen/JjROdEe
Looks great on desktop, but once you hit a certain breakpoint the actual calendar elements become subject to the dreaded CSS flow issues. I’ve tried adjusting the
wrapperelement to specify a maximum width but that doesn’t seem to resolve the issue. So is this a Grid thing that someone could enlighten a newbie to, or am I just missing something?You’re right – that is a weirdly specific website. I searched Twitter to see if the person outed themselves, but couldn’t find anything
I love the internet.
Oh man I remember doing calendars with
<
ol> elements back in 2009. https://www.russellheimlich.com/frontend-tips/ordered-list-calendar.htm
It’s like the ghost of Christmas past.
Pretty sweet trick
I had an eInk display for a Raspberry Pi looking for a project, and that link inspired me to build a project using that technique: https://glitch.com/edit/#!/7-calendar-cafe
While the CSS is really nice, I saw a conversation recently between some a11y people that suggested using tables for calendars is actually recommended. The argument was that a calendar is essentially tabular data.