Yamada UIにスターをあげる

スター
Yamada UIYamada UIv1.6.3

Calendar

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

ソース@yamada-ui/calendar

Props

CalendarProps

amountOfMonths

説明

The number of months to display.

タイプ

number

デフォルト

1

colorScheme

説明

The visual color appearance of the component.

タイプ

"blackAlpha" | "whiteAlpha" | "amber" | "blue" | "info" | "link" | "primary" | "cyan" | "emerald" | "flashy" | "fuchsia" | "gray" | "green" | "success" | "indigo" | "lime" | "neutral" | "orange" | "warning" | "pink" | "purple" | "red" | "danger" | "rose" | "sky" | "teal" | "violet" | "secondary" | "yellow"

デフォルト

"primary"

controlProps

説明

Props for calendar control button element.

タイプ

Omit<CalendarControlProps, "operation">

dateFormat

説明

The format used for conversion. Check the docs to see the format of possible modifiers you can pass.

タイプ

string

デフォルト

'MMMM YYYY'

ドキュメント

https://day.js.org/docs/en/display/format#list-of-localized-formats

dayProps

説明

Props for calendar day button element.

タイプ

{ component?: FC<DayProps> | undefined } & ButtonProps

defaultMonth

説明

The initial month of the calendar.

タイプ

Date

デフォルト

'new Date()'

defaultType

説明

The initial type of the calendar.

タイプ

"month" | "date" | "year"

defaultValue

説明

The initial value of the calendar.

タイプ

NonNullable<Y>

disableOutsideDays

説明

If true, outside days will be disabled.

タイプ

boolean

デフォルト

false

enableMultiple

説明

If true, enables date multiple selection.

タイプ

boolean

デフォルト

false

enableRange

説明

If true, enables date range selection.

タイプ

boolean

デフォルト

false

excludeDate

説明

Callback function to determine whether the day should be disabled.

タイプ

(date: Date) => boolean

firstDayOfWeek

説明

Define the first day of the week.

タイプ

"monday" | "sunday"

デフォルト

'monday'

headerProps

説明

Props for calendar header element.

タイプ

HTMLUIProps

hiddenOutsideDays

説明

If true, outside days will be hidden.

タイプ

boolean

holidays

説明

Define holidays.

タイプ

Date[]

labelProps

説明

Props for calendar label button element.

タイプ

{ icon?: | IconProps | ReactElement<any, string | JSXElementConstructor<any>> | undefined } & CalendarLabelProps

maxDate

説明

The maximum possible date.

タイプ

Date

maxSelectValues

説明

The maximum selectable value.

タイプ

number

minDate

説明

The minimum possible date.

タイプ

Date

minSelectValues

説明

The minimum selectable value.

タイプ

number

month

説明

The month of the calendar.

タイプ

Date

monthGridProps

説明

Props for calendar month grid element.

タイプ

HTMLUIProps

monthProps

説明

Props for calendar month button element.

タイプ

{ component?: FC<{ index: number; month: string; year: number }> | undefined } & ButtonProps

nextProps

説明

Props for calendar next control button element.

タイプ

Omit<CalendarControlProps, "operation">

nextRef

説明

Ref to a next function.

タイプ

type ONLY_FOR_FORMAT = | ((instance: (() => void | undefined) | null) => void) | MutableRefObject<(() => void | undefined) | null>

onChange

説明

The callback invoked when value state changes.

タイプ

(value: Y) => void

onChangeMonth

説明

The callback invoked when month state changes.

タイプ

(value: Date) => void

onChangeType

説明

The callback invoked when type state changes.

タイプ

( type: "month" | "date" | "year", year?: number | undefined, month?: number | undefined, ) => void

paginateBy

説明

The number of months to paginate.

タイプ

number

デフォルト

1

prevProps

説明

Props for calendar previous control button element.

タイプ

Omit<CalendarControlProps, "operation">

prevRef

説明

Ref to a previous function.

タイプ

type ONLY_FOR_FORMAT = | ((instance: (() => void | undefined) | null) => void) | MutableRefObject<(() => void | undefined) | null>

size

説明

The size of the Calendar.

タイプ

"sm" | "md" | "lg" | "full"

デフォルト

"md"

tableProps

説明

Props for calendar month table element.

タイプ

MonthTableProps

today

説明

If true, highlight today.

タイプ

boolean

デフォルト

false

type

説明

The type of the calendar.

タイプ

"month" | "date" | "year"

typeRef

説明

Ref to a type function.

タイプ

type ONLY_FOR_FORMAT = | ((instance: (() => void | undefined) | null) => void) | MutableRefObject<(() => void | undefined) | null>

value

説明

The value of the calendar.

タイプ

NonNullable<Y>

variant

説明

The variant of the Calendar.

タイプ

"solid" | "subtle" | "unstyled"

デフォルト

"solid"

weekdayProps

説明

Props for calendar weekday element.

タイプ

{ component?: FC<WeekdayProps> | undefined } & UIProps & Omit<HTMLProps<"div">, keyof UIProps>

weekendDays

説明

Define weekend days.

タイプ

number[]

デフォルト

'[0, 6]'

withControls

説明

If true, display the calendar control buttons.

タイプ

boolean

デフォルト

true

withHeader

説明

If true, display the calendar header.

タイプ

boolean

デフォルト

true

withLabel

説明

If true, display the calendar label button.

タイプ

boolean

デフォルト

true

withWeekdays

説明

If true, display the calendar weekdays.

タイプ

boolean

デフォルト

true

yearGridProps

説明

Props for calendar year grid element.

タイプ

HTMLUIProps

yearProps

説明

Props for calendar year button element.

タイプ

{ component?: FC<{ index: number; year: number }> | undefined } & ButtonProps

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

NativeTableLineChart