Calendar
Calendar
は、日付を表示または選択するカレンダーのコンポーネントです。
インポート
pnpm add @yamada-ui/calendar
@yamada-ui/calendar
は、@yamada-ui/react
に含まれていないため、別途インストールする必要があります。
import { Calendar } from "@yamada-ui/calendar"
使い方
Calendar
は、内部的にdayjsを使用しています。
編集可能な例
<Calendar />
バリアントを変更する
編集可能な例
<VStack> <Calendar variant="solid" today defaultValue={new Date(new Date().setDate(1))} /> <Calendar variant="subtle" today defaultValue={new Date(new Date().setDate(1))} /> </VStack>
サイズを変更する
編集可能な例
<VStack> <Calendar size="sm" /> <Calendar size="md" /> <Calendar size="lg" /> <Calendar size="full" /> </VStack>
カラースキーマを変更する
編集可能な例
<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>
デフォルトのタイプを変更する
デフォルトのタイプを変更する場合は、defaultType
にdate
やmonth
を設定します。デフォルトでは、date
が設定されています。
編集可能な例
<VStack> <Calendar defaultType="date" /> <Calendar defaultType="month" /> <Calendar defaultType="year" /> </VStack>
デフォルトの日付を設定する
デフォルトの日付を設定する場合は、defaultValue
にDate
を設定します。
編集可能な例
<Calendar defaultValue={new Date()} />
デフォルトの月を設定する
デフォルトの月を設定する場合は、defaultMonth
にDate
を設定します。
編集可能な例
<Calendar defaultMonth={new Date("1993-08-18")} />
週の最初の日を変更する
週の最初の日を変更する場合は、firstDayOfWeek
をmonday
またはsunday
を設定します。デフォルトでは、monday
が設定されています。
編集可能な例
<VStack> <Calendar firstDayOfWeek="sunday" /> <Calendar firstDayOfWeek="monday" /> </VStack>
最小と最大の日付を設定する
選択可能な最小と最大の日付を設定する場合は、minDate
とmaxDate
にDate
を設定します。
編集可能な例
<Calendar minDate={new Date(new Date().setDate(1))} maxDate={new Date(new Date().setDate(18))} />
今日の日付を強調表示する
今日の日付を強調表示する場合は、today
をtrue
に設定します。
編集可能な例
<Calendar today />
週末の日を設定する
週末の日を設定する場合は、weekendDays
に数値の配列を設定します。デフォルトでは、[0, 6]
が設定されています。
編集可能な例
<Calendar weekendDays={[0, 1]} />
祝日を設定する
祝日を設定する場合は、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} />
特定の日付を除外する
特定の日付を除外する場合は、excludeDate
を使用します。
編集可能な例
<Calendar excludeDate={(date) => date.getDay() === 0 || date.getDay() === 6} />
ロケールを設定する
ロケールを設定する場合は、データをインポートして、locale
に対象のロケールを設定します。
import "dayjs/locale/ja"
編集可能な例
<Calendar locale="ja" />
ロケールについては、こちらをご覧ください。
日付のフォーマットを変更する
日付のフォーマットを変更する場合は、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>
フォーマットについては、こちらをご覧ください。
当月外の日付を無効にする
当月外の日付を無効にする場合は、disableOutsideDays
をtrue
に設定します。
編集可能な例
<Calendar disableOutsideDays />
当月外の日付を非表示にする
当月外の日付を非表示にする場合は、hiddenOutsideDays
をtrue
に設定します。
編集可能な例
<Calendar hiddenOutsideDays />
表示する月の数を変更する
表示する月の数を変更する場合は、amountOfMonths
に数値を設定します。
編集可能な例
<VStack> <Calendar amountOfMonths={1} disableOutsideDays /> <Calendar amountOfMonths={2} disableOutsideDays /> <Calendar amountOfMonths={3} disableOutsideDays /> </VStack>
ページネーションの単位を変更する
ページネーションの単位を変更する場合は、paginateBy
に数値を設定します。デフォルトでは、amountOfMonths
と同じ数値が設定されるようになっています。
編集可能な例
<Calendar amountOfMonths={2} disableOutsideDays paginateBy={1} />
複数選択を有効にする
複数選択を有効にする場合は、enableMultiple
をtrue
に設定するか、defaultValue
に空の配列を設定します。
編集可能な例
<VStack> <Calendar enableMultiple /> <Calendar defaultValue={[]} /> </VStack>
範囲選択を有効にする
範囲選択を有効にする場合は、enableRange
をtrue
に設定します。
編集可能な例
<Calendar enableRange />
選択可能な最大値の数を設定する
選択可能な最大値の数を設定する場合は、maxSelectValues
に数値を設定します。
編集可能な例
<VStack> <Calendar enableMultiple maxSelectValues={3} /> <Calendar enableRange maxSelectValues={3} /> </VStack>
要素を無効(非表示)にする
要素(ヘッダーやラベルなど)を無効(非表示)にする場合は、withHeader
などをfalse
に設定します。
編集可能な例
<VStack> <Calendar withHeader={false} /> <Calendar withControls={false} /> <Calendar withLabel={false} /> <Calendar withWeekdays={false} /> </VStack>
制御する
編集可能な例
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> )
編集可能な例
const [type, onChangeType] = useState<CalendarProps["type"]>("month") return <Calendar type={type} onChangeType={onChangeType} />
編集可能な例
const [month, onChangeMonth] = useState<Date>(new Date("1993-08-18")) return <Calendar month={month} onChangeMonth={onChangeMonth} />
編集可能な例
const [value, onChange] = useState<Date>(new Date()) return <Calendar value={value} onChange={onChange} />
ラベルボタンをカスタマイズする
ラベルボタンをカスタマイズする場合は、labelProps
にprops
を設定します。
編集可能な例
<VStack> <Calendar labelProps={{ color: "red.500" }} /> <Calendar labelProps={{ icon: <GhostIcon /> }} /> </VStack>
コントロールボタンをカスタマイズする
コントロールボタンをカスタマイズする場合は、controlProps
, prevProps
やnextProps
にprops
を設定します。
編集可能な例
<VStack> <Calendar controlProps={{ icon: <GhostIcon /> }} /> <Calendar prevProps={{ icon: <GhostIcon /> }} /> <Calendar nextProps={{ icon: <GhostIcon /> }} /> </VStack>
スタイリングをカスタマイズする
編集可能な例
<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>
編集可能な例
<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>
編集可能な例
<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>
編集可能な例
<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>
編集可能な例
<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> ), }} />
GitHubでこのページを編集する