Build a calendar

Written byPhuoc Nguyen

Created

19 Dec, 2023

#Creating a calendar layout with tables

Before diving into the modern approach using CSS grid, let's first take a look at the traditional way of creating a calendar layout using tables.

Think of a calendar as consisting of two main components: the weekdays and the dates of the month. We can use the table header to display the weekdays, and the table body to display the dates.

Here is a simple example of using a table to create a calendar layout:

html

<table>
    <thead>
        <tr>
            <th>Sun</th>
            <th>Mon</th>
            <th>Tue</th>
            <th>Wed</th>
            <th>Thu</th>
            <th>Fri</th>
            <th>Sat</th>
        </tr>
    </thead>

    <tbody>
        <!-- Week 1 -->
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td>1</td>
            <td>2</td>
        </tr>

        <!-- Week 2 -->
        <!-- Continue with the rest of the days in the month -->
    </tbody>
</table>

In this example, we use `thead` and `tbody` tags to separate the table header from the body. The `thead` tag shows the weekdays in a single row with different cells. The `tbody` tag, on the other hand, has different rows with cells for each day of the week. We can leave some cells empty for days that don't belong to the month.

To make all date cells of equal width, we can use the `width` property in CSS. We'll set the width to be `calc(100% / 7)`, which means that each cell will take up one-seventh of the available space in its container. This ensures that all cells have the same width, regardless of their content.

css

td {
    width: calc(100% / 7);
}

There's another way to ensure that cells have the same width, which is to use a fixed table layout. This means that each cell will take up an equal amount of space in the table, regardless of the content it holds.

css

table {
    table-layout: fixed;
    width: 100%;
}

When we set `table-layout` to `fixed`, we're telling the browser to use a consistent algorithm for laying out the table, which results in evenly sized and aligned cells.

To make the table adapt to different screen sizes, we can set its width to `100%` so that it fills its container. This allows for easy creation of responsive layouts.

Check out the demo below:

While tables were once a popular choice for layout design, they are no longer recommended for modern web development. Instead, we will be using CSS Grid to create our calendar layout in the next section.

#Creating a calendar with CSS grid

In order to create a calendar using CSS grid, we'll begin by replacing the table and its cells from the previous section with simple `div` elements.

html

<div class="calendar">
    <div class="calendar__days">
        <div>Sun</div>
        <div>Mon</div>
        <div>Tue</div>
        <div>Wed</div>
        <div>Thu</div>
        <div>Fri</div>
        <div>Sat</div>
    </div>

    <div class="calendar__dates">
        <!-- Week 1 -->
        <div></div>
        <div></div>
        <div></div>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>

        <!-- Week 2 -->
        <!-- Continue with the rest of the days in the month -->
    </div>
</div>

In the previous section, we used empty cells (`td`) of a table to represent dates that don't belong to the month. Now, let's apply the same approach to our grid by leaving empty `div` elements for those dates.

To display the days of the week in a grid format, we'll use the `calendar__days` class. First, we'll turn the weekdays container into a grid container by using `display: grid`. Next, we'll define our grid columns using `grid-template-columns`. We want to repeat 7 columns with equal width, so we can use `repeat(7, 1fr)` as our value. This creates 7 columns, each taking up an equal amount of space within our grid container.

Below are the CSS declarations for the class:

css

.calendar__days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

We can use a similar approach to create a grid of dates for the given month. Check out the demo below:

#Conclusion

In this post, we learned how to build a calendar using CSS grid. First, we tackled the old-fashioned way of using tables to create the layout. Then, we moved onto CSS grid, which gives us more flexibility when designing modern web layouts.

This post specifically shows how to use the `repeat` function. It's an easy and efficient way to create equal widths within a grid layout. By simply passing in the number of columns we want to repeat and the desired width of each column, we can create a responsive grid that adapts to different screen sizes.

The big advantage of using `repeat` is that it makes it super simple to change the number of columns in our grid without having to recalculate each column's width. This saves us time and makes our code more maintainable.

If you found this post helpful, please consider giving the repository a star on GitHub or sharing the post on your favorite social networks 😍. Your support would mean a lot to me!

Create a sticky footer←

Position items in a grid→

Questions? 🙋

Do you have any questions about front-end development? If so, feel free to create a new issue on GitHub using the button below. I'm happy to help with any topic you'd like to learn more about, even beyond what's covered in this post.

While I have a long list of upcoming topics, I'm always eager to prioritize your questions and ideas for future content. Let's learn and grow together! Sharing knowledge is the best way to elevate ourselves 🥷.

Ask me questions

Newsletter 🔔

If you're into front-end technologies and you want to see more of the content I'm creating, then you might want to consider subscribing to my newsletter.

By subscribing, you'll be the first to know about new articles, products, and exclusive promotions.

Don't worry, I won't spam you. And if you ever change your mind, you can unsubscribe at any time.

Phước Nguyễn