@forter/calendar

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