Responsive Yearly Calendar with Flexbox

Terence Eden — Fri, 28 Apr 2023 11:34:47 +0000

This blog has a calendar showing my yearly archives. It was in a table layout - which made sense when I first designed it - but had a few spacing niggles and was hard to make responsive.

Now, it behaves like this:

The code is relatively straightforward. The HTML for the calendar looks like this:

<div class="calendars">
    <div class="calendar">
        <div class="calendar-year">2018</div>
        <div class="calendar-month">January</div>
        <div class="calendar-month">February</div>
        <div class="calendar-month">March</div>
        <div class="calendar-month">April</div>
        <div class="calendar-month">May<br></div>
        <div class="calendar-month">June</div>
        <div class="calendar-month">July</div>
        <div class="calendar-month">August</div>
        <div class="calendar-month">September</div>
        <div class="calendar-month">October</div>
        <div class="calendar-month">November</div>
        <div class="calendar-month">December</div>
    </div>

    <div class="calendar">
        <div class="calendar-year">2017</div>
        <div class="calendar-month">January</div>
        <div class="calendar-month">February</div>
                ...

Repeat as many times as needed.

The CSS is slightly more tricky, but mercifully short:

The wrapper which holds all the calendars uses flex-wrap. This means there's no need to set explicit breakpoints - if there's no horizontal space, the calendar will move to the next row.

.calendars {
    display: flex;
    flex-wrap: wrap;
}

Each individual calendar item is a grid with three column layout:

.calendar {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin: .5em;
}

The "Year" at the top spans the first three columns. I find the grid-column-... syntax confusing!

.calendar-year {
    grid-column-start: 1;
    grid-column-end: 4;
    text-align: center;
    outline: 1px black solid;
}

Finally, each individual month has a bit of internal padding and text formatting:

.calendar-month {
    text-align: center;
    padding: .25em;
    outline: 1px black solid;
}

I've used a basic black outline. Obviously, you can add whatever fancy CSS you like to make them look prettier.

flexbox – Terence Eden’s Blog

Responsive Yearly Calendar with Flexbox