Calendar
Create a calendar on the page with loads of options available.
Usage
To apply the Calendar component, add the data-f-calendar
attribute to a container element.
Example
Small Calendar
A smaller calendar (all styles can be edited anyway).
Custom Styles
JavaScript options
Option | Possible value | Default | Description |
---|---|---|---|
showMessages |
boolean | true |
Shows feedback notifications |
panes |
Integer | 1 |
Number of calendar panes to show |
interval |
Integer | 1 |
THe interval between months |
dayName |
Integer | 3 |
Number of chars to show in day names |
showNextPrev |
boolean | true |
Whether to show next and previous month names |
showNextPrevFull |
boolean | false |
If showing next previous, whether to show full or partial month names |
overrideStartDay |
boolean | false |
Start on a different day |
startMonth |
Integer (0-11) |
|
Start on a different month |
startYear |
Integer |
|
Start on a different year |
showFullMonthName |
boolean | false |
Show the full name or the 3 character short name |
weekStart |
Integer (0-6) | 6 |
Day of the week to start with (Sunday is 0) |
maxSelectedDays |
Integer | 6 |
The maximum number of days a user can select |
selectMultiple |
Boolean | true |
If you want to be able to select multiple days on the calendar |
selectBetweenDates |
Boolean | true |
If you want a start date and an end date and all to be selected between |
autoSelectBetweenDates |
Boolean | true |
Automatically selects a set number of days from the start day. |
unavailableDays |
Array | [] |
Days of the week that are unavailable globally |
dayNotAvailableMessage |
String | 'That day is not available' |
|
maxSelectedDaysMessage |
String | 'You have already selected the maximum of days.' |
|
startDay |
Integer | null |
Show a default start and end day of the week |
endDay |
Integer | null |
Show a default start and end day of the week |
startDate |
String | null |
A date string to set as the start date |
endDate |
String | null |
A date string to set as the end date |
Init element manually
const objCalendar = FatKit.calendar(element, { /* options */ });