Yamada UIにスターをあげる

スター
Yamada UIYamada UIv1.5.1

Calendar

Calendarは、日付を表示または選択するカレンダーのコンポーネントです。

ソース@yamada-ui/calendar

インポート

pnpm add @yamada-ui/calendar
Copied!
import { Calendar } from "@yamada-ui/calendar"
Copied!

使い方

編集可能な例

<Calendar />
Copied!

バリアントを変更する

編集可能な例

<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!

サイズを変更する

編集可能な例

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

カラースキーマを変更する

編集可能な例

<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!

デフォルトのタイプを変更する

デフォルトのタイプを変更する場合は、defaultTypeにdateやmonthを設定します。デフォルトでは、dateが設定されています。

編集可能な例

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

デフォルトの日付を設定する

デフォルトの日付を設定する場合は、defaultValueにDateを設定します。

編集可能な例

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

デフォルトの月を設定する

デフォルトの月を設定する場合は、defaultMonthにDateを設定します。

編集可能な例

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

週の最初の日を変更する

週の最初の日を変更する場合は、firstDayOfWeekをmondayまたはsundayを設定します。デフォルトでは、mondayが設定されています。

編集可能な例

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

最小と最大の日付を設定する

選択可能な最小と最大の日付を設定する場合は、minDateとmaxDateにDateを設定します。

編集可能な例

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

今日の日付を強調表示する

今日の日付を強調表示する場合は、todayをtrueに設定します。

編集可能な例

<Calendar today />
Copied!

週末の日を設定する

週末の日を設定する場合は、weekendDaysに数値の配列を設定します。デフォルトでは、[0, 6]が設定されています。

編集可能な例

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

祝日を設定する

祝日を設定する場合は、holidaysにDateの配列を設定します。

編集可能な例

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!

特定の日付を除外する

特定の日付を除外する場合は、excludeDateを使用します。

編集可能な例

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

ロケールを設定する

ロケールを設定する場合は、データをインポートして、localeに対象のロケールを設定します。

import "dayjs/locale/ja"
Copied!

編集可能な例

<Calendar locale="ja" />
Copied!

日付のフォーマットを変更する

日付のフォーマットを変更する場合は、dateFormatやyearFormatに文字列を設定します。

編集可能な例

<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!

当月外の日付を無効にする

当月外の日付を無効にする場合は、disableOutsideDaysをtrueに設定します。

編集可能な例

<Calendar disableOutsideDays />
Copied!

当月外の日付を非表示にする

当月外の日付を非表示にする場合は、hiddenOutsideDaysをtrueに設定します。

編集可能な例

<Calendar hiddenOutsideDays />
Copied!

表示する月の数を変更する

表示する月の数を変更する場合は、amountOfMonthsに数値を設定します。

編集可能な例

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

ページネーションの単位を変更する

ページネーションの単位を変更する場合は、paginateByに数値を設定します。デフォルトでは、amountOfMonthsと同じ数値が設定されるようになっています。

編集可能な例

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

複数選択を有効にする

複数選択を有効にする場合は、enableMultipleをtrueに設定するか、defaultValueに空の配列を設定します。

編集可能な例

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

範囲選択を有効にする

範囲選択を有効にする場合は、enableRangeをtrueに設定します。

編集可能な例

<Calendar enableRange />
Copied!

選択可能な最大値の数を設定する

選択可能な最大値の数を設定する場合は、maxSelectValuesに数値を設定します。

編集可能な例

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

要素を無効(非表示)にする

要素(ヘッダーやラベルなど)を無効(非表示)にする場合は、withHeaderなどをfalseに設定します。

編集可能な例

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

制御する

編集可能な例

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!

編集可能な例

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

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

編集可能な例

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

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

編集可能な例

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

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

ラベルボタンをカスタマイズする

ラベルボタンをカスタマイズする場合は、labelPropsにpropsを設定します。

編集可能な例

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

コントロールボタンをカスタマイズする

コントロールボタンをカスタマイズする場合は、controlProps, prevPropsやnextPropsにpropsを設定します。

編集可能な例

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

スタイリングをカスタマイズする

編集可能な例

<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!

編集可能な例

<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!

編集可能な例

<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!

編集可能な例

<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!

編集可能な例

<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!

GitHubでこのページを編集する

前NativeTable次LineChart