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 */ });