# Adding months navigation Now that we have our calendar, we need to allow the user to navigate through months and years.\ We do that by using the `nextMonth`, `previousMonth`, `nextYear` & `previousYear` functions.

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

const MyFirstCalendar = () => {
  const {
    displayedMonths,
    register,
+ nextMonth,   
+ nextYear,   
+ previousMonth,   
+ previousYear,   
  } = useCalendar();

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

export default MyFirstCalendar;

Now you can navigate through the months and years of your calendar :white\_check\_mark: