Simple calendar in a few lines of code 📆

Introduction

There's no doubt that calendars and date pickers are one of the most useful components in the modern front-end world. They are usually part of many popular UI libraries like MUI or Mantine, but you can also find it in the good old HTML 👇

<input type="date" />

Building a calendar from scratch might seem like a complicated thing to do, but fear not. In this article, I would like to show you how to achieve similar results with minimum effort and a little bit of JavaScript.

Code

Believe me or not - the trickiest part is this piece of code 👇

export default function date2calendar({ date }: { date: Date }) {
  // 1. Get year of a given date
  const year = date.getFullYear();
  // 2. Get month of a given date
  const month = date.getMonth();
  // 3. Get first day of the month
  const firstDay = new Date(year, month, 1).getDay();
  // 4. Get last day of the month
  const lastDay = new Date(year, month + 1, 0).getDate();
  // 5. Number of columns (days) in our 2D array
  const days = 7;
  // 6. Number of rows (weeks) in our 2D array
  const weeks = Math.ceil((firstDay + lastDay) / days);

  // 7. Generate rows (weeks)
  return Array.from({ length: weeks }).map((_, week) =>
    // 8. Generate columns (days)
    Array.from({ length: days }).map((_, day) => {
      // 9. Convert 2D array index to 1D array index
      const index = week * days + day;
      // 10. Get day number, this might be negative or greater that last day in month, which means this day is outside of current month
      const dateDay = index - firstDay + 1;
      // 11. Return day if it's in range, otherwise return 0
      return dateDay > 0 && dateDay <= lastDay ? dateDay : 0;
    })
  );
}

As you can see, this function takes an object with date prop as a parameter and based on that returns a two-dimensional array that contains weeks with days for a month of a given date.

// November 2022
[
  [0, 0, 1, 2, 3, 4, 5],     // week 1
  [6, 7, 8, 9, 10, 11, 12],  // week 2
  // ...
  [27, 28, 29, 30, 0, 0, 0], // week 5
]

These zeros here represents the days that are outside the current month (last days of previous month, and first days of the next month). This function assumes that the week starts on Sunday, so based on that we can see that November 2022 starts on Tuesday and ends on Wednesday.

With that now we're ready to render the body for our calendar component using any technology you want, no matter if it's React, Vue or plain JavaScript.

Building UI

Below you can find my implementation of a calendar component based on a function we just created, built with popular front-end frameworks with a little bit of help from dayjs.

React example

Vue example

Package

Feel free to use this code in your project. It's available as an NPM package, so you can easily add it to your project by running this command 👇

npm install date2calendar

I hope you enjoyed this content. Let me know what you think in the comment section down below. You can also find me on my Twitter.

Thanks for reading! 👋