Parameters
$schema
N/A
The schema used as basis for styling the component.
Map
$light-material-schema
$content-foreground
--content-foreground
The foreground of the days, months and years views.
Color
null
$content-background
--content-background
The background of the days, months and years views.
Color
null
$border-size
--border-size
The border size of all calendar views.
Color
null
$header-foreground
--header-foreground
Color
null
$header-background
--header-background
Color
null
$picker-foreground
--picker-foreground
The foreground of the month and year pickers.
Color
null
$picker-background
--picker-background
The background of the month and year pickers.
Color
null
$picker-hover-foreground
--picker-hover-foreground
The :hover color of the month and year pickers.
Color
null
$weekday-color
--weekday-color
The color for weekday labels.
Color
null
$inactive-color
--inactive-color
The color for previous and next month dates (visible only if [hideOutsideDays] is set to false(default)).
Color
null
$weekend-color
--weekend-color
The color for weekend days.
Color
null
$week-number-foreground
--week-number-foreground
The foreground of the week number column.
Color
null
$week-number-background
--week-number-background
The background of the week number column.
Color
null
$ym-selected-current-hover-foreground
--ym-selected-current-hover-foreground
The :hover foreground for the current selected month/year.
Color
null
$ym-selected-current-hover-background
--ym-selected-current-hover-background
The :hover background on hover for the current month/year.
Color
null
$navigation-color
--navigation-color
The color of the icon button responsible for month navigation.
Color
null
$navigation-hover-color
--navigation-hover-color
The :hover color of the icon button responsible for month navigation.
Color
null
$navigation-focus-color
--navigation-focus-color
The :focus color of the icon button responsible for month navigation.
Color
null
$ym-hover-foreground
--ym-hover-foreground
The :hover foreground of the month/year.
Color
null
$ym-hover-background
--ym-hover-background
The :hover background of the month/year.
Color
null
$ym-current-foreground
--ym-current-foreground
The foreground of the current month/year.
Color
null
$ym-current-background
--ym-current-background
The background of the current month/year.
Color
null
$ym-current-hover-foreground
--ym-current-hover-foreground
The :hover foreground of the current month/year.
Color
null
$ym-current-hover-background
--ym-current-hover-background
The :hover background of the current month/year.
Color
null
$ym-selected-foreground
--ym-selected-foreground
The foreground color of the selected month/year.
Color
null
$ym-selected-background
--ym-selected-background
The background color of the selected month/year.
Color
null
$ym-selected-hover-foreground
--ym-selected-hover-foreground
The :hover foreground color of the currently selected month/year.
Color
null
$ym-selected-hover-background
--ym-selected-hover-background
The :hover background color of the currently selected month/year.
Color
null
$ym-selected-current-foreground
--ym-selected-current-foreground
The foreground color of the selected current month/year.
Color
null
$ym-selected-current-background
--ym-selected-current-background
The background color of the selected current month/year.
Color
null
$ym-selected-current-hover-foreground
--ym-selected-current-hover-foreground
The :hover foreground color of the current selected month/year.
Color
null
$ym-selected-current-hover-background
--ym-selected-current-hover-background
The :hover background color of the current selected month/year.
Color
null
$ym-current-outline-color
--ym-current-outline-color
The outline color of the current month/year.
Color
null
$ym-current-outline-hover-color
--ym-current-outline-hover-color
The :hover outline color of the current month/year.
Color
null
$ym-current-outline-focus-color
--ym-current-outline-focus-color
The :focus outline color of the current month/year.
Color
null
$ym-selected-outline-color
--ym-selected-outline-color
The outline color of the selected month/year.
Color
null
$ym-selected-hover-outline-color
--ym-selected-hover-outline-color
The :hover outline color of the selected month/year.
Color
null
$ym-selected-focus-outline-color
--ym-selected-focus-outline-color
The :focus outline color of the selected month/year.
Color
null
$ym-selected-current-outline-color
--ym-selected-current-outline-color
The outline color of the selected current month/year.
Color
null
$ym-selected-current-outline-hover-color
--ym-selected-current-outline-hover-color
The :hover outline color of the selected current month/year.
Color
null
$ym-selected-current-outline-focus-color
--ym-selected-current-outline-focus-color
The :focus outline color of the selected current month/year.
Color
null
$date-hover-foreground
--date-hover-foreground
The :hover foreground in idle state of a date.
Color
null
$date-hover-background
--date-hover-background
The :hover background in idle state of a date.
Color
null
$date-focus-foreground
--date-focus-foreground
The :focus foreground in idle state of a date.
Color
null
$date-focus-background
--date-focus-background
The :focus background in idle state of a date.
Color
null
$date-selected-foreground
--date-selected-foreground
The text color for the selected date.
Color
null
$date-selected-background
--date-selected-background
The background color for the selected date.
Color
null
$date-selected-hover-background
--date-selected-hover-background
The hover background color for the selected date.
Color
null
$date-selected-focus-background
--date-selected-focus-background
The focus background color for the selected date.
Color
null
$date-selected-hover-foreground
--date-selected-hover-foreground
The hover text color for the selected date.
Color
null
$date-selected-focus-foreground
--date-selected-focus-foreground
The focus text color for the selected date.
Color
null
$date-selected-current-background
--date-selected-current-background
The background color for the selected/current date.
Color
null
$date-selected-current-hover-background
--date-selected-current-hover-background
The hover background color for the selected/current date.
Color
null
$date-selected-current-focus-background
--date-selected-current-focus-background
The focus background color for the selected/current date.
Color
null
$date-selected-current-foreground
--date-selected-current-foreground
The text color for the selected/current date.
Color
null
$date-selected-current-hover-foreground
--date-selected-current-hover-foreground
The hover text color for the selected/current date.
Color
null
$date-selected-current-focus-foreground
--date-selected-current-focus-foreground
The focus text color for the selected/current date.
Color
null
$date-selected-range-foreground
--date-selected-range-foreground
The foreground of the dates in the selected range.
Color
null
$date-selected-range-background
--date-selected-range-background
The background of the dates in the selected range.
Color
null
$date-selected-range-hover-foreground
--date-selected-range-hover-foreground
The :hover foreground of the dates in the selected range.
Color
null
$date-selected-range-hover-background
--date-selected-range-hover-background
The :hover background of the dates in the selected range.
Color
null
$date-selected-range-focus-foreground
--date-selected-range-focus-foreground
The :focus foreground of the dates in the selected range.
Color
null
$date-selected-range-focus-background
--date-selected-range-focus-background
The :focus background of the dates in the selected range.
Color
null
$date-selected-current-range-foreground
--date-selected-current-range-foreground
The foreground of the current date in the selected range.
Color
null
$date-selected-current-range-background
--date-selected-current-range-background
The background of the current date in the selected range.
Color
null
$date-selected-current-range-hover-foreground
--date-selected-current-range-hover-foreground
The :hover foreground of the current date in the selected range.
Color
null
$date-selected-current-range-hover-background
--date-selected-current-range-hover-background
The :hover background of the current date in the selected range.
Color
null
$date-selected-current-range-focus-foreground
--date-selected-current-range-focus-foreground
The :focus foreground of the current date in the selected range.
Color
null
$date-selected-current-range-focus-background
--date-selected-current-range-focus-background
The :focus background of the current date in the selected range.
Color
null
$date-selected-special-border-color:
--date-selected-special-border-color:
The border color of the selected special date,
Color
null
$date-selected-special-hover-border-color:
--date-selected-special-hover-border-color:
The :hover border color of the selected special date,
Color
null
$date-selected-special-focus-border-color:
--date-selected-special-focus-border-color:
The :focus border color of the selected special date,
Color
null
$date-current-foreground
--date-current-foreground
The foreground of the current date.
Color
null
$date-current-background
--date-current-background
The background color of the current date.
Color
null
$date-current-hover-foreground
--date-current-hover-foreground
The :hover text color of the current date.
Color
null
$date-current-hover-background
--date-current-hover-background
The :hover background color of the current date.
Color
null
$date-current-focus-foreground
--date-current-focus-foreground
The :focus text color of the current date.
Color
null
$date-current-focus-background
--date-current-focus-background
The :focus background color of the current date.
Color
null
$date-special-background
--date-special-background
The background of the dates marked as special.
Color
null
$date-special-foreground
--date-special-foreground
The foreground of the dates marked as special.
Color
null
$date-special-hover-background
--date-special-hover-background
The background of the dates marked as special.
Color
null
$date-special-hover-foreground
--date-special-hover-foreground
The foreground of the dates marked as special.
Color
null
$date-special-focus-background
--date-special-focus-background
The background of the dates marked as special.
Color
null
$date-special-focus-foreground
--date-special-focus-foreground
The foreground of the dates marked as special.
Color
null
$date-special-border-color
--date-special-border-color
The outline of the dates marked as special.
Color
null
$date-special-range-background
--date-special-range-background
The background of the dates inside a range and marked as special.
Color
null
$date-special-range-hover-background
--date-special-range-hover-background
The :hover background of the dates inside a range and marked as special.
Color
null
$date-special-range-focus-background
--date-special-range-focus-background
The :focus background of the dates inside a range and marked as special.
Color
null
$date-special-range-foreground
--date-special-range-foreground
The foreground of the dates inside a range and marked as special.
Color
null
$date-special-range-border-color
--date-special-range-border-color
The outline of the dates inside a range and marked as special.
Color
null
$border-color
--border-color
The calendar border color.
Color
null
$date-border-color
--date-border-color
The border color of the date.
Color
null
$date-hover-border-color
--date-hover-border-color
The :hover border color of the date.
Color
null
$date-focus-border-color
--date-focus-border-color
The :focus border color of the date.
Color
null
$date-selected-border-color
--date-selected-border-color
The border color of the selected date.
Color
null
$date-selected-hover-border-color
--date-selected-hover-border-color
The :hover border color of the selected date.
Color
null
$date-selected-focus-border-color
--date-selected-focus-border-color
The :focus border color of the selected date.
Color
null
$date-current-border-color
--date-current-border-color
The border color of the current date.
Color
null
$date-current-hover-border-color
--date-current-hover-border-color
The :hover border color of the current date.
Color
null
$date-current-focus-border-color
--date-current-focus-border-color
The :focus border color of the current date.
Color
null
$date-selected-current-border-color
--date-selected-current-border-color
The border color of the selected current date.
Color
null
$date-selected-current-hover-border-color
--date-selected-current-hover-border-color
The :hover border color of the selected current date.
Color
null
$date-selected-current-focus-border-color
--date-selected-current-focus-border-color
The :focus border color of the selected current date.
Color
null
$date-range-border-color
--date-range-border-color
The border color of range selection.
Color
null
$date-range-preview-border-color
--date-range-preview-border-color
The border color of the range selection in preview state(visible before selecting the end of the range).
Color
null
$date-disabled-foreground
--date-disabled-foreground
The foreground color of disabled dates.
Color
color: ('gray', 500, .5)
$date-disabled-range-foreground
--date-disabled-range-foreground
The foreground color of disabled dates.
Color
color: ('gray', 500)
$size
--size
The size of the days, months, and years views.
Number
null
$border-radius
--border-radius
The border radius used for the calendar.
List
null
$date-border-radius
--date-border-radius
The border radius used for the date.
List
null
$date-range-border-radius
--date-range-border-radius
The border radius used for the date range selection.
List
null
$ym-border-radius
--ym-border-radius
The border radius used for the month/year.
List
null
$actions-divider-color
--actions-divider-color
The border color used for the date-picker actions divider.
Color
null
