Calendar

Calendar

The Calendar/Datepicker Component

app.calendar.create() attaches a month grid to an input, which it makes read-only so no keyboard opens. With openIn: 'auto' (the default) it slides up as a sheet on a phone and opens as a popover on a tablet; containerEl renders it inline instead. The checkout's Delivery day field:

The delivery-day calendar's options in src/pages/checkout.f7

      calendar = $f7.calendar.create({
        inputEl: $el.value.find('#delivery-day'),
        dateFormat: { weekday: 'short', month: 'short', day: 'numeric' },
        minDate: today, // today is disabled: the earliest day is tomorrow
        maxDate: new Date(today.getTime() + 14 * 24 * 60 * 60 * 1000),
        disabled: (date) => date.getDay() === 0, // no Sunday deliveries
        closeOnSelect: true,

dateFormat takes Intl.DateTimeFormat options, a token string such as 'DD, MM dd', or a function, and month and day names follow the locale. disabled and events accept a function, a date, an array, or ranges such as { from, to }. rangePicker: true selects a span and timePicker: true adds a time. Opened on 24 September 2026, a Thursday, the calendar disabled every earlier day, today and Sunday the 27th, leaving 25, 26, 28, 29 and 30 in the month (panel A below). Weeks start on Monday (firstDay: 1).

MENU