fc-calendar
An element by Forter
Usage
<script>
import '@forter/calendar';
</script>
<fc-calendar>
</fc-calendar>
## Examples
```html
<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 |