Guides

Timezone

To change the timezone of the calendar, pass a time to the prop timezone on the Calendar.Root. A list of valid timezones can be found in the IANA Database.

Notes

If you want to use UTC as timezone, do not use .tz("UTC"), instead use dayjs().utc().
When using a controlled state or passing a defaultValue, ensure the date provided is set to the same timezone.

import dayjs from "dayjs";
import timezone from "dayjs/plugin/timezone";
import utc from "dayjs/plugin/utc";
import { useState } from "react";
import * as Calendar from "react-composable-calendar";
import type { CalendarSingleValue } from "react-composable-calendar/types";

dayjs.extend(timezone);
dayjs.extend(utc);

const [value, setValue] = useState<CalendarSingleValue>(
  dayjs().tz("Europe/Stockholm"),
);

export function Component() {
  return (
    <Calendar.Root
      mode="single"
      value={value}
      onValueChange={setValue}
      timezone="Europe/Stockholm"
    >
      {/* ... */}
    </Calendar.Root>
  );
}

Form Input

To use the calendar as a uncontrolled input field, make sure you render the Calendar.FormInput somewhere inside the root. Then all you need to do is pass a name for the form input. (If in range mode you need to pass two names)

import * as Calendar from "react-composable-calendar";

export function ComponentSingle() {
  return (
    <Calendar.Root mode="single" name="date">
      <Calendar.FormInput />
      {/* ... */}
    </Calendar.Root>
  );
}

export function ComponentRange() {
  return (
    <Calendar.Root mode="range" name={["dateFrom", "dateTo"]}>
      <Calendar.FormInput />
      {/* ... */}
    </Calendar.Root>
  );
}

Components

Calendar.Root

The Root component is the foundational wrapper for the calendar. It manages the calendar’s state, including the current view, selected date(s), and mode (single or range). It also provides context to its child components, allowing them to access and modify the calendar’s state.

Calendar.View

Provides context for a view. A view is a month that is being viewed. You can have multiple views within a calendar root.

Calendar.OffsetViewButton

A Button that offset the current view but a number.

Calendar.ViewOffset

This will offset all children with an amount. Useful if you for example want to show two views next to each other where one of them is them next month.

Calendar.Weekdays

The Weekdays component is responsible for rendering the weekday labels (e.g., Monday, Tuesday, etc.) in the calendar.

Calendar.WeekdayLabel

The WeekdayLabel component is used to display the name of a weekday (e.g., “Monday”, “Tuesday”) within the calendar. It retrieves the current weekday index from the WeekdayContext.

Calendar.MonthTitle

Shows the name of the month that the view is currently in.

Calendar.Days

Will render all days of the month as children.

Calendar.Day

A button that represents a day of the month. If clicked, value is changed to that day.

Calendar.DayLabel

Renders the day’s number in the month.

Calendar.FormInput

Renders an <input /> with the calendars value. If in range mode, two inputs will be rendered.

Calendar.ClearButton

A button that when clicked clears the selected value of the calendar.

Calendar.DayInRange

Conditionally rendered if a day is within the selected range.

Calendar.DayIsToday

Conditionally rendered if a day is today.

Calendar.DayIsSelected

Conditionally rendered if a day is selected.

Calendar.ValueLabel

Shows the selected value formatted as a string.

Calendar.SetYearButton

Renders a Button that changes the view’s year when clicked.