biletiki.store — a website example for searching for flight tickets and hotels using vanilla-calendar.
Read-Only Parameters
After initializing the calendar, additional read-only parameters are created. These parameters contain information about the current state of the calendar, which is automatically updated when interacting with it.
The calendar's state changes with every interaction, which leads to the update of these parameter values. This is why they are available for reading only.
HTMLElement
Type: HTMLElement
const calendar = new VanillaCalendar('#calendar');
console.log(calendar.HTMLElement);const calendar = new VanillaCalendar('#calendar');
console.log(calendar.HTMLElement);The HTMLElement property contains the root HTML element in which the calendar was initialized.
HTMLOriginalElement
Type: HTMLElement
const calendar = new VanillaCalendar('#calendar');
console.log(calendar.HTMLOriginalElement);const calendar = new VanillaCalendar('#calendar');
console.log(calendar.HTMLOriginalElement);The HTMLOriginalElement property contains the original root HTML element without any modifications, in which the calendar was initialized.
HTMLInputElement
Type: HTMLElement
const calendar = new VanillaCalendar('#calendar');
console.log(calendar.HTMLInputElement);const calendar = new VanillaCalendar('#calendar');
console.log(calendar.HTMLInputElement);The HTMLInputElement property represents the root HTML element that is an input field.
currentType
Type: string
const calendar = new VanillaCalendar('#calendar');
console.log(calendar.currentType);const calendar = new VanillaCalendar('#calendar');
console.log(calendar.currentType);The currentType property contains the current type of the calendar.
dateMin
Type: Date
const calendar = new VanillaCalendar('#calendar');
console.log(calendar.dateMin);const calendar = new VanillaCalendar('#calendar');
console.log(calendar.dateMin);The dateMin property represents the minimum date in the Date object format.
dateMax
Type: Date
const calendar = new VanillaCalendar('#calendar');
console.log(calendar.dateMax);const calendar = new VanillaCalendar('#calendar');
console.log(calendar.dateMax);The dateMax property represents the maximum date in the Date object format.
rangeMin
Type: string
const calendar = new VanillaCalendar('#calendar');
console.log(calendar.rangeMin);const calendar = new VanillaCalendar('#calendar');
console.log(calendar.rangeMin);The rangeMin property contains the current minimum date.
rangeMax
Type: string
const calendar = new VanillaCalendar('#calendar');
console.log(calendar.rangeMax);const calendar = new VanillaCalendar('#calendar');
console.log(calendar.rangeMax);The rangeMax property contains the current maximum date.
rangeDisabled
Type: string[]
const calendar = new VanillaCalendar('#calendar');
console.log(calendar.rangeDisabled);const calendar = new VanillaCalendar('#calendar');
console.log(calendar.rangeDisabled);The rangeDisabled property represents an array of disabled dates.
rangeEnabled
Type: string[]
const calendar = new VanillaCalendar('#calendar');
console.log(calendar.rangeEnabled);const calendar = new VanillaCalendar('#calendar');
console.log(calendar.rangeEnabled);The rangeEnabled property contains an array of enabled dates.
selectedDates
Type: string[]
const calendar = new VanillaCalendar('#calendar');
console.log(calendar.selectedDates);const calendar = new VanillaCalendar('#calendar');
console.log(calendar.selectedDates);The selectedDates property contains an array of currently selected dates.
selectedHolidays
Type: string[]
const calendar = new VanillaCalendar('#calendar');
console.log(calendar.selectedHolidays);const calendar = new VanillaCalendar('#calendar');
console.log(calendar.selectedHolidays);The selectedHolidays property represents an array of selected holiday dates.
selectedMonth
Type: number
const calendar = new VanillaCalendar('#calendar');
console.log(calendar.selectedMonth);const calendar = new VanillaCalendar('#calendar');
console.log(calendar.selectedMonth);The selectedMonth property contains the number of the currently selected month.
selectedYear
Type: number
const calendar = new VanillaCalendar('#calendar');
console.log(calendar.selectedYear);const calendar = new VanillaCalendar('#calendar');
console.log(calendar.selectedYear);The selectedYear property represents the number of the currently selected year.
selectedHours
Type: string
const calendar = new VanillaCalendar('#calendar');
console.log(calendar.selectedHours);const calendar = new VanillaCalendar('#calendar');
console.log(calendar.selectedHours);The selectedHours property contains the currently selected hour.
selectedMinutes
Type: string
const calendar = new VanillaCalendar('#calendar');
console.log(calendar.selectedMinutes);const calendar = new VanillaCalendar('#calendar');
console.log(calendar.selectedMinutes);The selectedMinutes property represents the currently selected minutes.
selectedKeeping
Type: string | null
const calendar = new VanillaCalendar('#calendar');
console.log(calendar.selectedKeeping);const calendar = new VanillaCalendar('#calendar');
console.log(calendar.selectedKeeping);The selectedKeeping property contains the AM/PM marker for the 12-hour time format.
selectedTime
Type: string | null
const calendar = new VanillaCalendar('#calendar');
console.log(calendar.selectedTime);const calendar = new VanillaCalendar('#calendar');
console.log(calendar.selectedTime);The selectedTime property contains the full current time.
correctMonths
Type: number
const calendar = new VanillaCalendar('#calendar');
console.log(calendar.correctMonths);const calendar = new VanillaCalendar('#calendar');
console.log(calendar.correctMonths);The correctMonths property contains the current number of months to display if the calendar type is set to 'multiple'.
viewYear
Type: number
const calendar = new VanillaCalendar('#calendar');
console.log(calendar.viewYear);const calendar = new VanillaCalendar('#calendar');
console.log(calendar.viewYear);The viewYear property represents the current displayed year.