Calendar
A calendar component representing a month with selectable days.
If you're seeking a ready-to-use date picking solution, consider using DatePicker.
Showcase
MonTueWedThuFriSatSun
Source
<Calendar month={0} year={2020} />Properties #
Functional Properties
Name | Default | Type | Description |
|---|---|---|---|
month * | number | An index of the desired month. 0 is for January, 11 is for December. | |
year * | number | The desired year. | |
locale | undefined | string | The language tag defining the desired locale (e.g., en-US). If left undefined, the user's locale will be used. This will affect the weekdays and the day number representations. |
firstWeekday | 1 | number | The index of the weekday to start the week at. 0 is for Sunday and 6 is for Saturday. |
selectionStart | null | Date | If a selection should be displayed, this should be a Date object signifying the start of the selection (can be outside the shown days). |
selectionEnd | null | Date | If a selection should be displayed, this should be a Date object signifying the end of the selection (can be outside the shown days). |
disabledDates | [] | Array<Date | {start?: Date; end?: Date}> | A range of dates (or date ranges) for which to disable selection. |
* Required
Class Properties
Falsy values passed to classes will be disregarded.
Name | Default | Type | Description |
|---|---|---|---|
weekdaysClass | null | string | A class string to add to the list of weekdays above the calendar. |
weekClass | null | string | A class string to add to the element containing each row of days in the calendar. |
dayClass | null | string | A class string to add to each day in the calendar. |
Translation Properties
Name | Default | Type | Description |
|---|---|---|---|
| titleTodayNotAvailableMessage | "Today, not available" | string | The tooltip text that appears when hovering over the current day when it is disabled. |
| titleTodayMessage | "Today" | string | The tooltip text that appears when hovering over the current day. |
| titleNotAvailableMessage | "Not available" | string | The tooltip text that appears when hovering over a day that is disabled. |
Events #
Name | Event Detail | Description |
|---|---|---|
day-select | { value } | Fired when any of the days are clicked. The value is a Date object of the clicked day. |
SCSS Variables #
Name | Description | Default |
|---|---|---|
$dark | The text color of the days in the calendar. | #333333 |
$disabled | The text color of the days in the calendar outside the current month. | #888888 |
$danger | The color of the disabled days in the calendar. | #B80000 |
$main-text | The text color of the selected days in the calendar. | #FFFFFF |
$main | The tint color of the selected days in the calendar and on hover. | #4300B0 |
$regular-font-weight | The font weight of the days. | 400 |
$font From Button | The font of the days in the calendar. | 'Ubuntu' |
$button-radius From Button | The curvature radius of a button. | 1.5625em |