Calendar.jsx

import {
  Calendar,
  CalendarRow,
  CalendarCell,
  CalendarWeeks,
  CalendarWeekDays,
} from "@ariakit/react";

function MyCalendar() {
  return (
    <Calendar defaultDate={new Date("2019-03-02")} firstWeekDay={1}>
      <thead>
        <tr>
          <CalendarWeekDays>
            {(days) => days.map((day) => (
              <th key={day}>{day.slice(0, 3)}</th>
            ))}
          </CalendarWeekDays>
        </tr>
      </thead>
      <tbody>
        <CalendarWeeks>
          {(weeks) => weeks.map((dates, i) => (
            <CalendarRow key={i}>
              {dates.map((date) => (
                <CalendarCell key={date} date={date} />
              ))}
            </CalendarRow>
          ))}
        </CalendarWeeks>
      </tbody>
    </Calendar>
  );
}