Simple Calendar in few lines of code

introduction

There is no doubt that the calendar and date picker 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 mentin, but you can also find it in good old html

<input type="date" />
enter fullscreen mode

exit fullscreen mode

Creating a calendar from scratch can seem like a complicated task, but fear not. In this article, I want to show you how to achieve similar results with minimal effort and a little JavaScript.

code

Believe me or not – the hardest 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;
    })
  );
}
enter fullscreen mode

exit fullscreen mode

As you can see, this function takes an object date Prop as a parameter and returns a two-dimensional array containing the weeks plus the days of the 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
]
enter fullscreen mode

exit fullscreen mode

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

With this we are now ready to render the body for our calendar component using any technology, be it React, Views or plain JavaScript.

Building UI

Below you can find my implementation of the Calendar component based on the function we created, built with a little help from Days, the popular front-end framework.

response example

example view

the packet

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

npm install date2calendar
enter fullscreen mode

exit fullscreen mode


I hope you enjoy this material. Let me know what you think in the comment section below. you my my. can also find Twitter,

Thanks for reading! I

Leave a Comment