Responsive calendar week names

The challange

To present a full week calendar table to the users and make the most out of the available screen estate without duplicating elements.

The HTML structure, using a simple table, is perfectly fine to use on larger screens, however, on mobile devices it can result in content scrolling out side of the visible part of the screen or breaking to multiple lines. Not ideal if you consider the growing number of mobile users out there.

<table border="1">
    <tr>
        <td>Monday</td>
        <td>Tuesday</td>
        <td>Wednesday</td>
        <td>Thursday</td>
        <td>Friday</td>
        <td>Saturday</td>
        <td>Sunday</td>
    </tr>
</table>

A better approach for responsive content

Using media queries you can detect device screen size and serve a better aligned view.

<ul class="calendar-view__labels">
    <li class="calendar-view__label" data-abbr="Mon">Monday</li>
    <li class="calendar-view__label" data-abbr="Tue">Tuesday</li>
    <li class="calendar-view__label" data-abbr="Wed">Wednesday</li>
    <li class="calendar-view__label" data-abbr="Thu">Thursday</li>
    <li class="calendar-view__label" data-abbr="Fri">Friday</li>
    <li class="calendar-view__label" data-abbr="Sat">Saturday</li>
    <li class="calendar-view__label" data-abbr="Sun">Sunday</li>
</ul>

First, swap table for an unordered list ul. This will give us more flexibility when it comes to the width of the elements. Add the data attributes containing the abbreviated week day name data-abbr="Mon". They contain mobile specific values. Notice that the screen readers can still take an advantage of the full week name displayed in the list item tag.

Then, add some styles to put it all to work. The key style in this approach is the content: attr(data-abbr) applied to the sudo :after element. It lets you grab the value of the data attribute and pass it to the content property.

.calendar-view__labels {
    list-style: none;
    padding: 0;
    display: flex;
    justify-content: space-between;
}
.calendar-view__label {
    position: relative;
}
@media screen and (max-width: 640px) {
    .calendar-view__label {
        visibility: hidden;
        width: calc(100% / 7);
    }
}
.calendar-view__label:after {
    content: attr(data-abbr);
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: Beige;
}
@media screen and (max-width: 640px) {
    .calendar-view__label:after {
        display: block;
        visibility: visible;
    }
}

The new responsive approach

There you go. Try resizing the screen or use different devices to preview the solution. Of course, this approach can be applied in other situations, so feel free to experimant and modify it to your requirements.

• Monday
• Tuesday
• Wednesday
• Thursday
• Friday
• Saturday
• Sunday