Calendar

Calendar is a component for displaying or selecting dates in a calendar.

Import

pnpm add @yamada-ui/calendar

Copied!

@yamada-ui/calendar is not included in @yamada-ui/react, so it needs to be installed separately.

import { Calendar } from "@yamada-ui/calendar"

Copied!

Usage

Calendar internally uses dayjs.

Editable example

<Calendar />

Copied!

Change Variant

Editable example

<VStack>
  <Calendar
    variant="solid"
    today
    defaultValue={new Date(new Date().setDate(1))}
  />
  <Calendar
    variant="subtle"
    today
    defaultValue={new Date(new Date().setDate(1))}
  />
</VStack>

Copied!

Change Size

Editable example

<VStack>
  <Calendar size="sm" />
  <Calendar size="md" />
  <Calendar size="lg" />
  <Calendar size="full" />
</VStack>

Copied!

Change Color Scheme

Editable example

<VStack>
  <Calendar
    variant="solid"
    colorScheme="secondary"
    today
    defaultValue={new Date(new Date().setDate(1))}
  />
  <Calendar
    variant="subtle"
    colorScheme="green"
    today
    defaultValue={new Date(new Date().setDate(1))}
  />
</VStack>

Copied!

Change Default Type

To change the default type, set defaultType to date or month. By default, date is set.

Editable example

<VStack>
  <Calendar defaultType="date" />
  <Calendar defaultType="month" />
  <Calendar defaultType="year" />
</VStack>

Copied!

Set Default Date

To set the default date, set defaultValue to Date.

Editable example

<Calendar defaultValue={new Date()} />

Copied!

Set Default Month

To set the default month, set defaultMonth to Date.

Editable example

<Calendar defaultMonth={new Date("1993-08-18")} />

Copied!

Change First Day of the Week

To change the first day of the week, set firstDayOfWeek to monday or sunday. By default, monday is set.

Editable example

<VStack>
  <Calendar firstDayOfWeek="sunday" />
  <Calendar firstDayOfWeek="monday" />
</VStack>

Copied!

Set Minimum and Maximum Dates

To set the selectable minimum and maximum dates, set minDate and maxDate to Date.

Editable example

<Calendar
  minDate={new Date(new Date().setDate(1))}
  maxDate={new Date(new Date().setDate(18))}
/>

Copied!

Highlight Today's Date

To highlight today's date, set today to true.

Editable example

<Calendar today />

Copied!

Set Weekend Days

To set weekend days, set weekendDays to an array of numbers. By default, [0, 6] is set.

Editable example

<Calendar weekendDays={[0, 1]} />

Copied!

Set Holidays

To set holidays, set holidays to an array of Date.

Editable example

const holidays = [
  new Date("2023-01-01"),
  new Date("2023-01-02"),
  new Date("2023-01-09"),
  new Date("2023-02-11"),
  new Date("2023-02-23"),
  new Date("2023-03-21"),
  new Date("2023-04-29"),
  new Date("2023-05-03"),
  new Date("2023-05-04"),
  new Date("2023-05-05"),
  new Date("2023-07-17"),
  new Date("2023-08-11"),
  new Date("2023-09-18"),
  new Date("2023-09-23"),
  new Date("2023-10-09"),
  new Date("2023-11-03"),
  new Date("2023-11-23"),
  new Date("2024-01-01"),
  new Date("2024-01-08"),
  new Date("2024-02-11"),
  new Date("2024-02-12"),
  new Date("2024-02-23"),
  new Date("2024-03-20"),
  new Date("2024-04-29"),
  new Date("2024-05-03"),
  new Date("2024-05-04"),
  new Date("2024-05-05"),
  new Date("2024-05-06"),
  new Date("2024-07-15"),
  new Date("2024-08-11"),
  new Date("2024-08-12"),
  new Date("2024-09-16"),
  new Date("2024-09-22"),
  new Date("2024-09-23"),
  new Date("2024-10-14"),
  new Date("2024-11-03"),
  new Date("2024-11-04"),
  new Date("2024-11-23"),
]

return <Calendar holidays={holidays} />

Copied!

Exclude Specific Dates

To exclude specific dates, use excludeDate.

Editable example

<Calendar excludeDate={(date) => date.getDay() === 0 || date.getDay() === 6} />

Copied!

Set Locale

To set the locale, import the data and set the target locale to locale.

import "dayjs/locale/ja"

Copied!

Editable example

<Calendar locale="ja" />

Copied!

For locales, please check here.

Change Date Format

To change the date format, set dateFormat or yearFormat to a string.

Editable example

<VStack>
  <Calendar locale="ja" dateFormat="YYYY年 MMMM" />
  <Calendar locale="ja" defaultType="month" yearFormat="YYYY年" />
  <Calendar locale="ja" defaultType="month" monthFormat="MM" />
  <Calendar locale="ja" defaultType="year" yearFormat="YY" />
  <Calendar locale="ja" weekdayFormat="dd曜" />
</VStack>

Copied!

For formats, please check here.

Disable Dates Outside the Current Month

To disable dates outside the current month, set disableOutsideDays to true.

Editable example

<Calendar disableOutsideDays />

Copied!

Hide Dates Outside the Current Month

To hide dates outside the current month, set hiddenOutsideDays to true.

Editable example

<Calendar hiddenOutsideDays />

Copied!

Change the Number of Months Displayed

To change the number of months displayed, set amountOfMonths to a number.

Editable example

<VStack>
  <Calendar amountOfMonths={1} disableOutsideDays />
  <Calendar amountOfMonths={2} disableOutsideDays />
  <Calendar amountOfMonths={3} disableOutsideDays />
</VStack>

Copied!

Change Pagination Unit

To change the pagination unit, set paginateBy to a number. By default, the same number as amountOfMonths is set.

Editable example

<Calendar amountOfMonths={2} disableOutsideDays paginateBy={1} />

Copied!

Enable Multiple Selection

To enable multiple selection, set enableMultiple to true or set defaultValue to an empty array.

Editable example

<VStack>
  <Calendar enableMultiple />
  <Calendar defaultValue={[]} />
</VStack>

Copied!

Enable Range Selection

To enable range selection, set enableRange to true.

Editable example

<Calendar enableRange />

Copied!

Set Maximum Number of Selectable Values

To set the maximum number of selectable values, set maxSelectValues to a number.

Editable example

<VStack>
  <Calendar enableMultiple maxSelectValues={3} />
  <Calendar enableRange maxSelectValues={3} />
</VStack>

Copied!

Disable (Hide) Elements

To disable (hide) elements (such as headers or labels), set withHeader and others to false.

Editable example

<VStack>
  <Calendar withHeader={false} />
  <Calendar withControls={false} />
  <Calendar withLabel={false} />
  <Calendar withWeekdays={false} />
</VStack>

Copied!

Control

Editable example

const typeRef = useRef<() => void>(null)
const prevRef = useRef<() => void>(null)
const nextRef = useRef<() => void>(null)

const onChangeType = () => {
  if (typeRef.current) typeRef.current()
}
const onPrev = () => {
  if (prevRef.current) prevRef.current()
}
const onNext = () => {
  if (nextRef.current) nextRef.current()
}

return (
  <VStack>
    <Wrap gap="md">
      <Button onClick={onPrev}>Prev</Button>
      <Button onClick={onChangeType}>Change Type</Button>
      <Button onClick={onNext}>Next</Button>
    </Wrap>

    <Calendar
      withHeader={false}
      typeRef={typeRef}
      prevRef={prevRef}
      nextRef={nextRef}
    />
  </VStack>
)

Copied!

Editable example

const [type, onChangeType] = useState<CalendarProps["type"]>("month")

return <Calendar type={type} onChangeType={onChangeType} />

Copied!

Editable example

const [month, onChangeMonth] = useState<Date>(new Date("1993-08-18"))

return <Calendar month={month} onChangeMonth={onChangeMonth} />

Copied!

Editable example

const [value, onChange] = useState<Date>(new Date())

return <Calendar value={value} onChange={onChange} />

Copied!

Customize Label Button

To customize the label button, set labelProps to props.

Editable example

<VStack>
  <Calendar labelProps={{ color: "red.500" }} />
  <Calendar labelProps={{ icon: <Ghost /> }} />
</VStack>

Copied!

Customize Control Buttons

To customize control buttons, set controlProps, prevProps, or nextProps to props.

Editable example

<VStack>
  <Calendar controlProps={{ icon: <Ghost /> }} />
  <Calendar prevProps={{ icon: <Ghost /> }} />
  <Calendar nextProps={{ icon: <Ghost /> }} />
</VStack>

Copied!

Customize Styling

Editable example

<VStack>
  <Calendar defaultType="year" yearProps={{ color: "gray.500" }} />
  <Calendar
    defaultType="year"
    yearProps={{
      component: ({ year }) => (
        <Tooltip label={year}>
          <Center as="span" w="full" h="full">
            {year}
          </Center>
        </Tooltip>
      ),
    }}
  />
</VStack>

Copied!

Editable example

<VStack>
  <Calendar defaultType="month" monthProps={{ color: "gray.500" }} />
  <Calendar
    defaultType="month"
    monthProps={{
      component: ({ year, month }) => (
        <Tooltip label={year}>
          <Center as="span" w="full" h="full">
            {month}
          </Center>
        </Tooltip>
      ),
    }}
  />
</VStack>

Copied!

Editable example

<VStack>
  <Calendar locale="ja" weekdayProps={{ color: "orange.500" }} />
  <Calendar
    locale="ja"
    weekdayProps={{
      component: ({ weekday }) => (
        <Tooltip label={`${weekday}曜日`} gutter={-8}>
          <Center as="span" w="full" h="full">
            {weekday}
          </Center>
        </Tooltip>
      ),
    }}
  />
</VStack>

Copied!

Editable example

<VStack>
  <Calendar
    dayProps={{
      color: "blue.500",
      _weekend: { color: "green.500" },
      _outside: { color: "orange.500" },
    }}
  />

  <Calendar
    dayProps={{
      component: ({ isSelected, col, row, date }) => (
        <Text
          as="span"
          color={
            !isSelected && (col === 3 || row === 3) ? "blue.500" : undefined
          }
        >
          {date.getDate()}
        </Text>
      ),
    }}
  />
</VStack>

Copied!

Editable example

<Calendar
  dateFormat="YYYY年 MMMM"
  locale="ja"
  size="full"
  type="date"
  headerProps={{ mb: 2 }}
  labelProps={{ pointerEvents: "none", icon: { display: "none" } }}
  tableProps={{
    border: "1px solid",
    borderColor: "border",
    th: { border: "1px solid", borderColor: "border" },
    td: { border: "1px solid", borderColor: "border" },
  }}
  dayProps={{
    h: "auto",
    p: 2,
    _selected: {},
    _hover: {},
    _active: {},
    _ripple: {
      display: "none",
    },
    transitionProperty: "none",
    component: ({ date, isSelected }) => (
      <VStack alignItems="center">
        <Center
          bg={isSelected ? "primary" : undefined}
          w={8}
          lineHeight={8}
          rounded="full"
          color={isSelected ? "white" : undefined}
          transitionProperty="background"
          transitionDuration="normal"
        >
          {date.getDate()}
        </Center>

        <List w="full" gap="sm">
          <ListItem
            w="full"
            py="1"
            px="2"
            bg="secondary"
            color="white"
            fontSize="sm"
            lineHeight="taller"
            rounded="md"
          >
            誕生日
          </ListItem>
        </List>
      </VStack>
    ),
  }}
/>

Copied!

Edit this page on GitHub

PreviousNativeTable NextLineChart