Build a Current Month Calendar with JavaScript

A monthly calendar needs three pieces of information: the year and month to display, the weekday on which the month starts, and the number of days in that month. Once those values are known, JavaScript can create a six-row by seven-column calendar grid.

const today = new Date();
const year = today.getFullYear();
const month = today.getMonth();
const firstDay = new Date(year, month, 1).getDay();
const lastDate = new Date(year, month + 1, 0).getDate();

Calendar Grid Structure Top ↑

A conventional month view uses seven weekday columns. Six rows are sufficient for every possible month layout, giving a maximum of 42 day cells. Some months need only five rows, but a fixed 42-cell grid makes the positioning logic simple.

const weekdays = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
const totalCells = 6 * 7; // 42

Find the First Weekday of the Month Top ↑

Create a Date for day 1 of the chosen month, then use getDay(). The result tells you how many empty cells appear before day 1 when the week starts on Sunday.

const firstOfMonth = new Date(year, month, 1);
const firstDay = firstOfMonth.getDay();

The year comes from getFullYear() and the zero-based month from getMonth().

Find the Last Date of the Month Top ↑

Day 0 of the following month means “one day before the first,” which is the last day of the target month. This automatically handles 28, 29, 30, and 31-day months.

const lastDate = new Date(year, month + 1, 0).getDate();

Fill the 42 Calendar Cells Top ↑

Track the current day separately from the cell index. A cell receives a date only after the starting weekday is reached and while the day number is not greater than the month's last date.

let day = 1;
for (let cell = 0; cell < 42; cell += 1) {
  if (cell >= firstDay && day <= lastDate) {
    console.log(day);
    day += 1;
  }
}

Render the Calendar with DOM Methods Top ↑

The historical tutorial used document.write() to construct the table while the document was loading. For new code, create elements and insert them into a dedicated container instead. This avoids replacing the document if the function is called after loading and makes the markup easier to control.

const td = document.createElement("td");
td.textContent = day;
row.append(td);

Current Month Calendar Demo

Show the Calendar in a Layer Top ↑

The next step is to keep the calendar hidden until the user requests it. The supporting layer demo uses a button with aria-expanded rather than an image-only click target.

Learn the basic show/hide layer pattern or open the calendar layer demo.

Extend the Calendar Top ↑

Once the grid works, you can make each date selectable. The next tutorial, copying a calendar date to an input field, adds that behavior. Later projects add previous/next month navigation and linked start/end calendars.

← Date Reference All Date Projects →

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: