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 |