@forter/calendar NPM

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`