How to Make Responsive Calendar in Html and CSS

Hello there! Today, I’m going to walk you through creating a responsive calendar design using HTML and CSS. But that’s not all! I’ll actually be showing you two versions of this calendar. The first version is a basic one, created using only HTML and CSS. It’s a great starting point and will help you understand the core structure and styling of the calendar.

Once we’ve got that down, we’ll take it up a notch. I’ll show you a second version of the calendar, this time adding in some JavaScript. This will allow us to add some cool functionality to our calendar, like changing months and highlighting the current day.

So, whether you’re just getting started with HTML and CSS, or you’re ready to dive into JavaScript, there’s something here for you. Let’s get started!

How to Design a Simple Calendar Using HTML and CSS?

At the beginning of this post, we’re going to build a calendar using just HTML and CSS. This is a great way to put your skills into practice and create something functional and visually appealing. If you’re a student finding this task challenging, don’t stress. Stick with this post and you’ll have your own responsive calendar in no time. I will guide you step by step. Let’s get started!”

Html Code for Simple Calendar

First, I created a main container for our calendar. This is a div with the id calendar. This will hold all other elements related to our calendar. Inside this, I added a div for the calendar header. This is where we’ll put the controls (Buttons) for changing the month and the display for the current month and year. Within the calendar header, I added two span elements to act as buttons for navigating to the previous and next month. I also added an h1 tag to display the current month and year.

<div id="calendar">
        <div id="calendar-header">
            <span id="month-prev" class="change-month"><</span>
            <h1 id="month">July 2023</h1>
            <span id="month-next" class="change-month">></span>
        </div>

In CSS, First, I set the font for the entire page to Arial. This gives a clean, readable look to our text. Next, I styled the main calendar container. I set it to take up the full width of its container, but not to exceed 600px. This makes it responsive to different screen sizes. I also centered it on the page using margin. Then, I moved on to the calendar header. I used Flexbox to align the elements. I also added some padding and set the background and text colors.

body {
    font-family: Arial, sans-serif;
}
#calendar {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
}
#calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background-color: #333;
    color: #fff;
}

Output:

Back in our main container, after the calendar header, I added another div for the calendar body. This is where we’ll display the days of the week and the dates in the month. Inside this, I added seven div elements, one for each day of the week and also, I added a div for each date in the month.

<div id="calendar-body">
            <div>Sun</div>
            <div>Mon</div>
            <div>Tue</div>
            <div>Wed</div>
            <div>Thu</div>
            <div>Fri</div>
            <div>Sat</div>
            <!-- Days of the month will go here -->
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            <div>7</div>
            <div>8</div>
            <div>9</div>
            <div>10</div>
            <div>11</div>
            <div>12</div>
            <div>13</div>
            <div>14</div>
            <div>15</div>
            <div>16</div>
            <div>17</div>
            <div>18</div>
            <div>19</div>
            <div>20</div>
            <div>21</div>
            <div>22</div>
            <div>23</div>
            <div>24</div>
            <div>25</div>
            <div>26</div>
            <div>27</div>
            <div>28</div>
            <div>29</div>
            <div>30</div>
            <div>31</div>
</div>
</div>

In CSS, For the calendar body, I used CSS Grid to create a seven-column layout, one for each day of the week. I also used the gap rule creates a small space between each grid cell, and I set the background color to match the header. Each day in the calendar body is a div, so I added some padding, set the background color to white, and centered the text.

#calendar-body {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    background-color: #333;
}
#calendar-body div {
    padding: 20px;
    background-color: #fff;
    text-align: center;
}
.change-month {
    cursor: pointer;
}

Output:

And that’s it for the CSS! We’ve created a simple, responsive calendar layout. To add more functionality, like changing months or highlighting the current day, you’d need to use JavaScript or a JavaScript framework. In the next part, I have shared How to create the calendar using html, css and JavaScript. Read it!

How to Design the Calendar Using Html, CSS and JavaScript?

Before we dive into creating a dynamic calendar with JavaScript, it’s crucial to understand the basic structure of a calendar built with HTML and CSS. So, if you haven’t already, please check out the previous section of this post. It’ll give you a solid foundation on which we can add JavaScript functionality. Don’t worry, the CSS stays the same, but we’ll make some tweaks to the HTML.

Calendar Html Code

To transform our static calendar into a dynamic one, we’ll need to make some changes to our HTML. You’ll notice I’ve cleared out all the div elements from the calendar-body. Why? Because we’re going to generate those dynamically with JavaScript. This will allow our calendar to update and change in response to user interaction.

<div id="calendar">
        <div id="calendar-header">
            <span id="month-prev" class="change-month"><</span>
            <h1 id="month"></h1>
            <span id="month-next" class="change-month">></span>
        </div>
        <div id="calendar-body"></div>
    </div>
    <script src="script.js"></script>

The CSS for this project will be the same as what we discussed in the previous section of this post, but we’ll add one more section at the end of the CSS file to highlight the current date.

Here’s the additional CSS code:

#calendar-body div.today {
    background-color: #f00;
    color: #fff;
}

JavaScript Code for Calendar

In JavaScript, the first thing I did was create a Date object for held the current date when the script ran. I used this object to determine the current month, year, and day. Next, I defined the renderCalendar function:

This function was responsible for generating and displaying the calendar. I started by setting the day of date to the first day of the current month. Then, I got references to the calendar-body and month elements, which I needed later.

let date = new Date();

function renderCalendar() {
    date.setDate(1);

    const monthDays = document.getElementById('calendar-body');
    const month = document.getElementById('month');

After that, I calculated some important dates:

After that, I calculated some important dates. lastDay was the last day of the current month, prevLastDay was the last day of the previous month, firstDayIndex was the day of the week the month starts on (0 for Sunday, 1 for Monday, etc.), lastDayIndex was the day of the week the month ends on, and nextDays was the number of days I needed to add at the end of the month to complete the week.

const lastDay = new Date(
        date.getFullYear(),
        date.getMonth() + 1,
        0
    ).getDate();

    const prevLastDay = new Date(
        date.getFullYear(),
        date.getMonth(),
        0
    ).getDate();

    const firstDayIndex = date.getDay();

    const lastDayIndex = new Date(
        date.getFullYear(),
        date.getMonth() + 1,
        0
    ).getDay();

    const nextDays = 7 - lastDayIndex - 1;

    const months = [
        'January',
        'February',
        'March',
        'April',
        'May',
        'June',
        'July',
        'August',
        'September',
        'October',
        'November',
        'December'
    ];
    
    month.innerText = `${months[date.getMonth()]} ${date.getFullYear()}`;

Next, I generated the days of the month. I started by adding the last few days of the previous month, then the days of the current month, and finally the first few days of the next month. This gave me a complete calendar view.

let days = '';

    for (let x = firstDayIndex; x > 0; x--) {
        days += `<div class='prev-date'>${prevLastDay - x + 1}</div>`;
    }

    for (let i = 1; i <= lastDay; i++) {
        if (
            i === new Date().getDate() &&
            date.getMonth() === new Date().getMonth()
        ) {
            days += `<div class='today'>${i}</div>`;
        } else {
            days += `<div>${i}</div>`;
        }
    }

    for (let j = 1; j <= nextDays; j++) {
        days += `<div class='next-date'>${j}</div>`;
        monthDays.innerHTML = days;
    }
}

Finally, I added event listeners to the navigation buttons to change the month.

document.getElementById('month-prev').addEventListener('click', () => {
    document.getElementById('calendar-body').classList.add('fade-out');
    setTimeout(() => {
        date.setMonth(date.getMonth() - 1);
        renderCalendar();
        document.getElementById('calendar-body').classList.remove('fade-out');
    }, 500);
});

document.getElementById('month-next').addEventListener('click', () => {
    document.getElementById('calendar-body').classList.add('fade-out');
    setTimeout(() => {
        date.setMonth(date.getMonth() + 1);
        renderCalendar();
        document.getElementById('calendar-body').classList.remove('fade-out');
    }, 500);
});

renderCalendar();

And that’s it! We’ve created a fully functional, responsive calendar using HTML, CSS, and JavaScript.