fc-calendar
An element by Forter
Usage
<script>
import '@forter/calendar';
</script>
<fc-calendar>
</fc-calendar>
## Examples
```html
<!-- Sample: max year and date -->
<fc-calendar pickerOptions='{"dropdowns": {"maxYear": 2024, "minYear": 2015, "months": true, "years": true}, "maxDate": "2024-04-04"}'>
</fc-calendar>
Properties
Property | Attribute | Type | Default | Description |
---|---|---|---|---|
calendars |
never[] |
|||
dates |
dates |
any[] |
List of selected dates. example: []
|
|
disableDatePickerRangeLimit |
number |
|||
format |
format |
string |
"YYYY-MM-DD" | Date Fromat. example: DD-MM-YYYY
|
fullYearHtml |
"" | TemplateResult |
|||
options |
any |
|||
pickerOptions |
pickerOptions |
{} |
{} | Options for litepicker to override the defaults |
single |
single |
boolean |
Toggle single date or date-range. example: true |
Events
Event | Description |
---|---|
change |
when dates picked. example: [] method: fireDatePickedEvent
|
CSS Custom Properties
Property | Description |
---|---|
--fc-calendar-bg-color |
background color. example: pink
|
--fc-calendar-day-color |
day color. example: pink
|
--fc-calendar-day-color-hover |
day hover color. example: pink
|
--fc-calendar-day-is-end-bg |
end day range background color. example: pink
|
--fc-calendar-day-is-end-color |
end day range text color. example: pink
|
--fc-calendar-day-is-in-range |
selected range background color. example: pink
|
--fc-calendar-day-is-start-bg |
start day range background color. example: pink
|
--fc-calendar-day-is-start-color |
start day range text color. example: pink
|
--fc-calendar-day-is-today-color |
today day color. example: pink
|
--fc-calendar-day-width |
calendar day width. example: 10px
|
--fc-calendar-month-button |
next/previous month color. example: pink
|
--fc-calendar-month-button-hover |
next/previous month arrow hover color. example: pink
|
--fc-calendar-month-weekday-color |
weekday color. example: pink
|