🔨Building your calendar

react-datepicker main goal is to let you control how you want your date picker to look & fill. This means you need to render the element like the days grid, years selector and next/previous month buttons.

Lets start with creating a new component file and calling the useCalendar hook, currently only getting it's displayedMonths and register variables. We will also render our initial days grid.

MyFirstCalendar.tsx

import useCalendar from "../useCalendar";
import "./style.css";

const MyFirstCalendar = () => {
  const { displayedMonths, register } = useCalendar();

  return (
    <div>
      <h1>My first calendar</h1>
      {displayedMonths.map((month) => {
        return (
          <div key={month.name}>
            <h2>
              {month.name} {month.year}
            </h2>
            <div className="daysGrid">
              {month.days.map((day) => {
                return <div {...register(month, day)}>{day.number}</div>;
              })}
            </div>
          </div>
        );
      })}
    </div>
  );
};

export default MyFirstCalendar;

style.css

.daysGrid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 16px;
    width: fit-content;
    margin: 0 auto;
}

What's going on here?

• displayedMonths will always hold the months that should be visible to the user.

• register is a function that returns all the props you need for the connection of your UI - the day component with the useCalendar hook. It exposes stuff like onChange, ARIA attributes and more.

• Each Month holds few parameters, but for the beginning we are using the days array which includes Day object, and we render it on the screen.

• The wrapper div is a grid, which is a standard way of calendar UI structure, but you can definitely try to render what you want!

You should now see your very first calendar! 🔥