Calendar

PROFI ships with powerful jQuery calendar plugin which will help you build booking/order forms.

Demo

Markup

<div class="calendar"></div>

$('.calendar').calendar({
    minDate: new Date(),
    maxDate: new Date(2021, 10, 22),
    selectedDay: new Date(),
    dayItemContents: ['month-short', 'day'],
}).on('select-a-date', function (e, date) {
    console.log(date);
});

Events

Calendar will emit select-a-date event once user will change selected date.

$('.calendar').on('select-a-date', function (e, date) {
  console.log('selected date:', date);
});

API

Argument + Type Default Description
minDate: Date - Minimal date which can be selected
maxDate: Date - Maximal date which can be selected
selectedDay: Date - Default date selected
firstWeekDay: number 1 First day of the week. 0 = Sunday, 1 = Monday, etc.
dayItemContents: string[] month-full, day What to include in each date’s block. Available options: month-full, month-short, day, weekday-full, weekday-short.
months: {short: string, full: string}[] - Can be used to translate default text values.
weekdays: {short: string, full: string}[] - Can be used to translate default text values.
nativeInputName: string - Provide name attribute value for native input underneath visual UI.