LORA UI

Calendar

Bundle size

Element that enables users to view and interact with dates in a structured and organized format. It allows users to navigate through different months and years, select specific dates, and often provides a visual representation of events or appointments.

Single Calendar

Single Calendar typically allows users to view and interact with dates, navigate through months or years, and select specific date.

July 2024
SuMoTuWeThFrSa
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
"use client";


import * as Button from "@lora-ui/button";
import * as Calendar from "@lora-ui/calendar";
import { twMerge } from "tailwind-merge";


export default function Single() {
  const monthsInYear = [
    "January",
    "February",
    "March",
    "April",
    "May",
    "June",
    "July",
    "August",
    "September",
    "October",
    "November",
    "December",
  ];


  const daysInWeekStartWithSunday = {
    Sun: "Su",
    Mon: "Mo",
    Tue: "Tu",
    Wed: "We",
    Thu: "Th",
    Fri: "Fr",
    Sat: "Sa",
  };


  function onValueChange(dates) {
    console.log(dates);
  }


  return (
    <Calendar.Root
      daysInWeek={daysInWeekStartWithSunday}
      mode="single"
      defaultDates={[new Date("2024-07-17T00:00:00")]}
      onValueChange={onValueChange}
      className="border-box w-[328px] rounded-xl border border-[#eaecf0] bg-[#ffffff] dark:border-[#1f242f] dark:bg-[#0c111d]"
    >
      <div className="divide-y divide-[#eaecf0] dark:divide-[#1f242f]">
        <div className="px-6 py-5">
          <Calendar.Header className="mb-3 flex h-[36px] items-center justify-between">
            {({ goPreviousMonth, goNextMonth, year, month }) => {
              return (
                <>
                  <Button.Root
                    onClick={goPreviousMonth()}
                    className="flex items-center justify-center whitespace-nowrap rounded-md p-2 disabled:cursor-not-allowed"
                    aria-label="arrow left"
                  >
                    <svg
                      width="15"
                      height="15"
                      viewBox="0 0 15 15"
                      fill="none"
                      xmlns="http://www.w3.org/2000/svg"
                      className="text-[#344054] dark:text-[#cecfd2]"
                    >
                      <path
                        d="M8.84182 3.13514C9.04327 3.32401 9.05348 3.64042 8.86462 3.84188L5.43521 7.49991L8.86462 11.1579C9.05348 11.3594 9.04327 11.6758 8.84182 11.8647C8.64036 12.0535 8.32394 12.0433 8.13508 11.8419L4.38508 7.84188C4.20477 7.64955 4.20477 7.35027 4.38508 7.15794L8.13508 3.15794C8.32394 2.95648 8.64036 2.94628 8.84182 3.13514Z"
                        fill="currentColor"
                        fillRule="evenodd"
                        clipRule="evenodd"
                      />
                    </svg>
                  </Button.Root>
                  <span className="flex items-center whitespace-nowrap text-base font-semibold text-[#344054] dark:text-[#cecfd2]">
                    {monthsInYear[month - 1] + " " + year}
                  </span>
                  <Button.Root
                    onClick={goNextMonth()}
                    className="flex items-center justify-center whitespace-nowrap rounded-md p-2 disabled:cursor-not-allowed"
                    aria-label="arrow right"
                  >
                    <svg
                      width="15"
                      height="15"
                      viewBox="0 0 15 15"
                      fill="none"
                      xmlns="http://www.w3.org/2000/svg"
                      className="text-[#344054] dark:text-[#cecfd2]"
                    >
                      <path
                        d="M6.1584 3.13508C6.35985 2.94621 6.67627 2.95642 6.86514 3.15788L10.6151 7.15788C10.7954 7.3502 10.7954 7.64949 10.6151 7.84182L6.86514 11.8418C6.67627 12.0433 6.35985 12.0535 6.1584 11.8646C5.95694 11.6757 5.94673 11.3593 6.1356 11.1579L9.565 7.49985L6.1356 3.84182C5.94673 3.64036 5.95694 3.32394 6.1584 3.13508Z"
                        fill="currentColor"
                        fillRule="evenodd"
                        clipRule="evenodd"
                      />
                    </svg>
                  </Button.Root>
                </>
              );
            }}
          </Calendar.Header>
          <Calendar.Body className="flex w-full flex-col">
            <Calendar.Days className="flex justify-around">
              {Object.keys(daysInWeekStartWithSunday).map((day, index) => (
                <Calendar.Day
                  key={index}
                  className="flex h-[40px] w-10 items-center justify-center text-sm font-medium text-[#344054] dark:text-[#cecfd2]"
                >
                  {daysInWeekStartWithSunday[day]}
                </Calendar.Day>
              ))}
            </Calendar.Days>
            <Calendar.Dates>
              {({ dates }) => {
                return dates.map((row, index) => (
                  <tr key={index} className="flex justify-around">
                    {row.map((date, index) => {
                      return (
                        <Calendar.DateCell
                          key={index}
                          date={date}
                          className="w-10 text-sm font-normal"
                        >
                          <div
                            role="button"
                            tabIndex={date.isDisabled ? -1 : 0}
                            className={twMerge(
                              "relative flex h-[40px] items-center justify-center rounded-full",
                              date.isDisabled
                                ? "text-[#667085] hover:cursor-not-allowed hover:bg-transparent dark:text-[#85888e]"
                                : "hover:[#182230] text-[#344054] hover:cursor-pointer hover:bg-[#f2f4f7] hover:text-sm hover:font-medium dark:text-[#cecfd2] dark:hover:bg-[#1f242f] dark:hover:text-[#ececed]",
                              date.isActived &&
                                "bg-[#7f56d9] text-[#ffffff] hover:bg-[#6941c6] hover:text-sm hover:font-medium hover:text-[#ffffff] dark:bg-[#7f56d9] dark:text-[#f5f5f6] dark:hover:bg-[#9e77ed] dark:hover:text-[#f5f5f6]",
                            )}
                          >
                            {date.date}
                            {date.isMarked && (
                              <div
                                className={twMerge(
                                  "absolute bottom-1 h-[5px] w-[5px] rounded-full",
                                  date.isActived
                                    ? "bg-[#ffffff] dark:bg-[#f5f5f6]"
                                    : "bg-[#7f56d9] dark:bg-[#7f56d9]",
                                )}
                              />
                            )}
                          </div>
                        </Calendar.DateCell>
                      );
                    })}
                  </tr>
                ));
              }}
            </Calendar.Dates>
          </Calendar.Body>
        </div>
      </div>
    </Calendar.Root>
  );
}

Range Calendar

Dual Range Calendar allows users to select dates within a specific range on a calendar that across multiple months

August 2024
SuMoTuWeThFrSa
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
September 2024
SuMoTuWeThFrSa
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
"use client";


import * as Button from "@lora-ui/button";
import * as Calendar from "@lora-ui/calendar";
import { twMerge } from "tailwind-merge";


export default function Range() {
  const monthsInYear = [
    "January",
    "February",
    "March",
    "April",
    "May",
    "June",
    "July",
    "August",
    "September",
    "October",
    "November",
    "December",
  ];


  const daysInWeekStartWithSunday = {
    Sun: "Su",
    Mon: "Mo",
    Tue: "Tu",
    Wed: "We",
    Thu: "Th",
    Fri: "Fr",
    Sat: "Sa",
  };


  function onValueChange(dates) {
    console.log(dates);
  }


  return (
    <Calendar.Root
      daysInWeek={daysInWeekStartWithSunday}
      onValueChange={onValueChange}
      defaultDates={[
        new Date("2024-08-17T00:00:00"),
        new Date("2024-08-25T00:00:00"),
      ]}
      className="flex rounded-xl border dark:border-[#1f242f]"
      mode="range"
    >
      <div className="border-box w-[328px] px-6 py-5">
        <Calendar.Header className="mb-3 flex h-[36px] items-center justify-between">
          {({
            goPreviousMonth,
            goNextMonth,
            fromYear,
            fromMonth,
            toYear,
            toMonth,
          }) => {
            return (
              <>
                <Button.Root
                  onClick={goPreviousMonth("from")}
                  className="flex items-center justify-center whitespace-nowrap rounded-md p-2 disabled:cursor-not-allowed"
                  aria-label="arrow left"
                >
                  <svg
                    width="15"
                    height="15"
                    viewBox="0 0 15 15"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                    className="text-[#344054] dark:text-[#cecfd2]"
                  >
                    <path
                      d="M8.84182 3.13514C9.04327 3.32401 9.05348 3.64042 8.86462 3.84188L5.43521 7.49991L8.86462 11.1579C9.05348 11.3594 9.04327 11.6758 8.84182 11.8647C8.64036 12.0535 8.32394 12.0433 8.13508 11.8419L4.38508 7.84188C4.20477 7.64955 4.20477 7.35027 4.38508 7.15794L8.13508 3.15794C8.32394 2.95648 8.64036 2.94628 8.84182 3.13514Z"
                      fill="currentColor"
                      fillRule="evenodd"
                      clipRule="evenodd"
                    />
                  </svg>
                </Button.Root>
                <span className="flex items-center whitespace-nowrap text-base font-semibold text-[#344054] dark:text-[#cecfd2]">
                  {monthsInYear[fromMonth - 1] + " " + fromYear}
                </span>
                <Button.Root
                  onClick={goNextMonth("from")}
                  isDisabled={
                    new Date(fromYear, fromMonth + 1, 0).getTime() ===
                    new Date(toYear, toMonth, 0).getTime()
                  }
                  className="group flex items-center justify-center whitespace-nowrap rounded-md p-2 disabled:cursor-not-allowed"
                  aria-label="arrow right"
                >
                  <svg
                    width="15"
                    height="15"
                    viewBox="0 0 15 15"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                    className="text-[#344054] dark:text-[#cecfd2]"
                  >
                    <path
                      d="M6.1584 3.13508C6.35985 2.94621 6.67627 2.95642 6.86514 3.15788L10.6151 7.15788C10.7954 7.3502 10.7954 7.64949 10.6151 7.84182L6.86514 11.8418C6.67627 12.0433 6.35985 12.0535 6.1584 11.8646C5.95694 11.6757 5.94673 11.3593 6.1356 11.1579L9.565 7.49985L6.1356 3.84182C5.94673 3.64036 5.95694 3.32394 6.1584 3.13508Z"
                      fill="currentColor"
                      fillRule="evenodd"
                      clipRule="evenodd"
                    />
                  </svg>
                </Button.Root>
              </>
            );
          }}
        </Calendar.Header>
        <Calendar.Body className="flex w-full flex-col">
          <Calendar.Days className="flex justify-around">
            {Object.keys(daysInWeekStartWithSunday).map((day, index) => (
              <Calendar.Day
                key={index}
                className="flex h-[40px] w-10 items-center justify-center text-sm font-medium text-[#344054] dark:text-[#cecfd2]"
              >
                {daysInWeekStartWithSunday[day]}
              </Calendar.Day>
            ))}
          </Calendar.Days>
          <Calendar.Dates where="from">
            {({ dates, where }) => {
              return dates.map((row, index) => (
                <tr key={index} className="flex justify-around">
                  {row.map((date, index) => (
                    <Calendar.DateCell
                      key={index}
                      where={where}
                      date={date}
                      className={twMerge(
                        "w-10 text-sm font-normal",
                        date.isStart && "rounded-l-full",
                        date.isEnd && "rounded-r-full",
                        date.isSelected &&
                          date.dateObj.getDay() === 0 &&
                          "rounded-l-full",
                        date.isSelected &&
                          date.dateObj.getDay() === 6 &&
                          "rounded-r-full",
                        date.isSelected && "bg-[#f9fafb] dark:bg-[#1f242f]",
                        date.isEntered && "rounded-r-full",
                      )}
                    >
                      <div
                        role="button"
                        tabIndex={date.isDisabled ? -1 : 0}
                        className={twMerge(
                          "relative flex h-[40px] items-center justify-center rounded-full",
                          date.isDisabled
                            ? "text-[#667085] hover:cursor-not-allowed hover:bg-transparent dark:text-[#85888e]"
                            : "text-[#344054] hover:cursor-pointer hover:bg-[#f2f4f7] hover:text-sm hover:font-medium hover:text-[#182230] dark:text-[#cecfd2] dark:hover:bg-[#1f242f] dark:hover:text-[#ececed]",
                          date.isActived &&
                            "bg-[#7f56d9] text-[#ffffff] hover:bg-[#6941c6] hover:text-sm hover:font-medium hover:text-[#ffffff] dark:bg-[#7f56d9] dark:text-[#f5f5f6] dark:hover:bg-[#9e77ed] dark:hover:text-[#f5f5f6]",
                        )}
                      >
                        {date.date}
                        {date.isMarked && (
                          <div
                            className={twMerge(
                              "absolute bottom-1 h-[5px] w-[5px] rounded-full",
                              date.isActived
                                ? "bg-[#ffffff] dark:bg-[#f5f5f6]"
                                : "bg-[#7f56d9] dark:bg-[#7f56d9]",
                            )}
                          />
                        )}
                      </div>
                    </Calendar.DateCell>
                  ))}
                </tr>
              ));
            }}
          </Calendar.Dates>
        </Calendar.Body>
      </div>


      <div className="border-box w-[328px] px-6 py-5">
        <Calendar.Header className="mb-3 flex h-[36px] items-center justify-between">
          {({
            goPreviousMonth,
            goNextMonth,
            fromYear,
            fromMonth,
            toYear,
            toMonth,
          }) => {
            return (
              <>
                <Button.Root
                  onClick={goPreviousMonth("to")}
                  isDisabled={
                    new Date(fromYear, fromMonth + 1, 0).getTime() ===
                    new Date(toYear, toMonth, 0).getTime()
                  }
                  aria-label="arrow left"
                  className="group flex items-center justify-center whitespace-nowrap rounded-md p-2 disabled:cursor-not-allowed"
                >
                  <svg
                    width="15"
                    height="15"
                    viewBox="0 0 15 15"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                    className="text-[#344054] dark:text-[#cecfd2]"
                  >
                    <path
                      d="M8.84182 3.13514C9.04327 3.32401 9.05348 3.64042 8.86462 3.84188L5.43521 7.49991L8.86462 11.1579C9.05348 11.3594 9.04327 11.6758 8.84182 11.8647C8.64036 12.0535 8.32394 12.0433 8.13508 11.8419L4.38508 7.84188C4.20477 7.64955 4.20477 7.35027 4.38508 7.15794L8.13508 3.15794C8.32394 2.95648 8.64036 2.94628 8.84182 3.13514Z"
                      fill="currentColor"
                      fillRule="evenodd"
                      clipRule="evenodd"
                    />
                  </svg>
                </Button.Root>
                <span className="flex items-center whitespace-nowrap text-base font-semibold text-[#344054] dark:text-[#cecfd2]">
                  {monthsInYear[toMonth - 1] + " " + toYear}
                </span>
                <Button.Root
                  onClick={goNextMonth("to")}
                  aria-label="arrow right"
                  className="flex items-center justify-center whitespace-nowrap rounded-md p-2 disabled:cursor-not-allowed"
                >
                  <svg
                    width="15"
                    height="15"
                    viewBox="0 0 15 15"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                    className="text-[#344054] dark:text-[#cecfd2]"
                  >
                    <path
                      d="M6.1584 3.13508C6.35985 2.94621 6.67627 2.95642 6.86514 3.15788L10.6151 7.15788C10.7954 7.3502 10.7954 7.64949 10.6151 7.84182L6.86514 11.8418C6.67627 12.0433 6.35985 12.0535 6.1584 11.8646C5.95694 11.6757 5.94673 11.3593 6.1356 11.1579L9.565 7.49985L6.1356 3.84182C5.94673 3.64036 5.95694 3.32394 6.1584 3.13508Z"
                      fill="currentColor"
                      fillRule="evenodd"
                      clipRule="evenodd"
                    />
                  </svg>
                </Button.Root>
              </>
            );
          }}
        </Calendar.Header>
        <Calendar.Body className="flex w-full flex-col">
          <Calendar.Days className="flex justify-around">
            {Object.keys(daysInWeekStartWithSunday).map((day, index) => (
              <Calendar.Day
                key={index}
                className="flex h-[40px] w-10 items-center justify-center text-sm font-medium text-[#344054] dark:text-[#cecfd2]"
              >
                {daysInWeekStartWithSunday[day]}
              </Calendar.Day>
            ))}
          </Calendar.Days>
          <Calendar.Dates where="to">
            {({ dates, where }) => {
              return dates.map((row, index) => (
                <tr key={index} className="flex justify-around">
                  {row.map((date, index) => (
                    <Calendar.DateCell
                      key={index}
                      where={where}
                      date={date}
                      className={twMerge(
                        "w-10 text-sm font-normal",
                        date.isStart && "rounded-l-full",
                        date.isEnd && "rounded-r-full",
                        date.isSelected &&
                          date.dateObj.getDay() === 0 &&
                          "rounded-l-full",
                        date.isSelected &&
                          date.dateObj.getDay() === 6 &&
                          "rounded-r-full",
                        date.isSelected && "bg-[#f9fafb] dark:bg-[#1f242f]",
                        date.isEntered && "rounded-r-full",
                      )}
                    >
                      <div
                        role="button"
                        tabIndex={date.isDisabled ? -1 : 0}
                        className={twMerge(
                          "relative flex h-[40px] items-center justify-center rounded-full",
                          date.isDisabled
                            ? "text-[#667085] hover:cursor-not-allowed hover:bg-transparent dark:text-[#85888e]"
                            : "text-[#344054] hover:cursor-pointer hover:bg-[#f2f4f7] hover:text-sm hover:font-medium hover:text-[#182230] dark:text-[#cecfd2] dark:hover:bg-[#1f242f] dark:hover:text-[#ececed]",
                          date.isActived &&
                            "hover: bg-[#7f56d9] text-[#ffffff] hover:bg-[#6941c6] hover:text-[#ffffff] dark:bg-[#7f56d9] dark:text-[#f5f5f6] dark:hover:bg-[#9e77ed] dark:hover:text-[#f5f5f6]",
                        )}
                      >
                        {date.date}
                        {date.isMarked && (
                          <div
                            className={twMerge(
                              "absolute bottom-1 h-[5px] w-[5px] rounded-full",
                              date.isActived
                                ? "bg-[#ffffff] dark:bg-[#f5f5f6]"
                                : "bg-[#7f56d9] dark:bg-[#7f56d9]",
                            )}
                          />
                        )}
                      </div>
                    </Calendar.DateCell>
                  ))}
                </tr>
              ));
            }}
          </Calendar.Dates>
        </Calendar.Body>
      </div>
    </Calendar.Root>
  );
}

Installation

Install the component from your command line.

npm install @lora-ui/calendar

API Reference

Root

PropTypeDefaultExplanation
daysInWeekObject{ Sun: "Su", Mon: "Mo", Tue: "Tu", Wed: "We", Thu: "Th", Fri: "Fr", Sat: "Sa", }
modeString"single""single" | "range"
defaultDatesDate[]Initialed dates by default
onValueChangeFunction(dates: Date[]) => {}Choosed dates

Header

PropTypeDefaultExplanation
childrenFunction({ goPreviousMonth: Function, goNextMonth: Function, year: Number, month: Number }) => {}

Body

PropTypeDefaultExplanation

Days

PropTypeDefaultExplanation

Day

PropTypeDefaultExplanation

Dates

PropTypeDefaultExplanation
childrenFunction(dates: Date[]) => {}

DateCell

PropTypeDefaultExplanation
dateObject

Keyboard

Date Cell

CommandDescription
Enter
or
Space
Select the date
ArrowDown
Moves focus to the same day of the next week.
ArrowUp
Moves focus to the same day of the previous week.
ArrowRight
Moves focus to the next day.
ArrowLeft
Moves focus to the previous day.
Home
Moves focus to the first day (e.g Sunday) of the current week.
End
Moves focus to the last day (e.g. Saturday) of the current week.
PageUp
  • Changes the grid of dates to the previous month.
  • Moves focus to the day of the month that has the same number. If that day does not exist, moves focus to the last day of the month.
PageDown
  • Changes the grid of dates to the next month.
  • Moves focus to the day of the month that has the same number. If that day does not exist, moves focus to the last day of the month.
Tab
Move focus to the next focusable element
Shift+Tab
Move focus to the previous focusable element

Other

All relevant ARIA attributes are automatically managed.