🎨Design & Customizations

Day object holds most of the props you need when it comes to styling your calendar's days grid.

• disabled - true if the day is disabled to select for whatever reason. Usually useful when having allowPast, minDate etc... (Checkout Calendar options for more)

• isToday - true if it's the day is today. For a more convenient user experience, you really want to distinct today sometimes.

• isWeekend - true if the day is a weekend (locale-aware)

• isInCurrentMonth - true if the day is in the range of the displayed month it is rendered within. relevant for when using weeks array of the Month

<div className="daysGrid">
  {month.weeks.map((week) => {
    return week.days.map((day) => {
      return (
        <div
          style={{
            opacity: day.isInCurrentMonth ? "1" : "0.5",
            backgroundColor: day.isToday ? "yellow" : "white",
            color: day.isWeekend ? "red" : "black",
          }}
          {...register(month, day)}
        >
          {day.number}
        </div>
      );
    });
  })}

Some props here are affected by the Calendar Options object that's passed to the useCalendar hook. Check Calendar options for more info.