[Migration from v2.*.*] New API for all options and actions in v3.0.0

Documentation for v2.9.10 is here.

Below is the new Calendar API object with default values, all parameters and actions have been renamed to a flat representation without nesting, except for the locale objects, popups, CSSClasses and DOMTemplates, but these have also been renamed.

The locale object now contains either a language tag (a string) or an object from the required labels.

A new labels object has been added which contains the aria-label required for accessibility, you must localize these labels yourself.

The names of CSS classes have been shortened, and CSS modifiers have also been removed, since now the states in the calendar are through data attributes.

Each key in the object has a comment containing the old option name and path.

{
  type: 'default', // type

  inputMode: false, // input
  positionToInput: 'left', // settings.visibility.positionToInput

  firstWeekday: 1, // settings.iso8601
  monthsToSwitch: 1, // jumpMonths
  themeAttrDetect: 'html[data-theme]', // settings.visibility.themeDetect

  locale: 'en', // settings.lang
  // Or specify an object for your labels
  // locale: {
  //   months: {
  //     long: [],
  //     short: [],
  //   },
  //   weekday: {
  //     long: [],
  //     short: [],
  //   }
  // },

  dateToday: 'today', //date.today
  dateMin: '1970-01-01', // date.min
  dateMax: '2470-12-31', // date.max

  displayDateMin: undefined, // settings.range.min
  displayDateMax: undefined, // settings.range.max
  displayDatesOutside: true, // settings.visibility.daysOutside
  displayDisabledDates: false, // settings.visibility.disabled
  displayMonthsCount: undefined, // months

  disableDates: [], // settings.range.disabled
  disableAllDates: false, // settings.range.disableAllDays
  disableDatesPast: false, // settings.range.disablePast
  disableDatesGaps: false, // settings.range.disableGaps
  disableWeekdays: [], // settings.range.disableWeekday
  disableToday: false, // settings.visibility.today

  enableDates: [], // settings.range.enabled
  enableEdgeDatesOnly: true, // settings.range.edgesOnly
  enableDateToggle: true, // toggleSelected or cancelableDay
  enableWeekNumbers: false, // settings.visibility.weekNumbers
  enableMonthChangeOnDayClick: true, // switchMonthForDate
  enableJumpToSelectedDate: false, // jumpToSelectedDate

  selectionDatesMode: 'single', // settings.selection.day
  selectionMonthsMode: true, // settings.selection.month
  selectionYearsMode: true, // settings.selection.year
  selectionTimeMode: false, // settings.selection.time

  selectedDates: [], // settings.selected.dates
  selectedMonth: undefined, // settings.selected.month
  selectedYear: undefined, // settings.selected.year
  selectedHolidays: [], // settings.selected.holidays
  selectedWeekends: [0, 6], // settings.selected.weekend
  selectedTime: undefined, // settings.selected.time
  selectedTheme: 'system', // settings.visibility.theme

  timeMinHour: 0, // settings.range.hourMin
  timeMaxHour: 23, // settings.range.hourMax
  timeMinMinute: 0, // settings.range.minuteMin
  timeMaxMinute: 59, // settings.range.minuteMax
  timeControls: 'all', // settings.selection.controlTime
  timeStepHour: 1, // settings.selection.stepHours
  timeStepMinute: 1, // settings.selection.stepMinutes

  sanitizerHTML: (dirtyHTML) => dirtyHTML, // sanitizer

  onClickDate: undefined, // actions.clickDay
  onClickWeekDay: undefined, // actions.clickWeekDay
  onClickWeekNumber: undefined, // actions.clickWeekNumber
  onClickTitle: undefined, // actions.clickTitle
  onClickMonth: undefined, // actions.clickMonth
  onClickYear: undefined, // actions.clickYear
  onClickArrow: undefined, // actions.clickArrow
  onChangeTime: undefined, // actions.changeTime
  onChangeToInput: undefined, // actions.changeToInput
  onCreateDateRangeTooltip: undefined, // new
  onCreateDateEls: undefined, // actions.getDays
  onCreateMonthEls: undefined, // actions.getMonths
  onCreateYearEls: undefined, // actions.getYears
  onInit: undefined, // actions.initCalendar
  onUpdate: undefined, // actions.updateCalendar
  onDestroy: undefined, // actions.destroyCalendar
  onShow: undefined, // actions.showCalendar
  onHide: undefined, // actions.hideCalendar

  popups: {}, // popups

  labels: { // new
    application: 'Calendar',
    navigation: 'Calendar Navigation',
    arrowNext: {
      month: 'Next month',
      year: 'Next list of years',
    },
    arrowPrev: {
      month: 'Previous month',
      year: 'Previous list of years',
    },
    month: 'Select month, current selected month:',
    months: 'List of months',
    year: 'Select year, current selected year:',
    years: 'List of years',
    week: 'Days of the week',
    weekNumber: 'Numbers of weeks in a year',
    dates: 'Dates in the current month',
    selectingTime: 'Selecting a time ',
    inputHour: 'Hours',
    inputMinute: 'Minutes',
    rangeHour: 'Slider for selecting hours',
    rangeMinute: 'Slider for selecting minutes',
    btnKeeping: 'Switch AM/PM, current position:',
  },

  layouts: { // DOMTemplates
    default: '',
    multiple: '',
    month: '',
    year: '',
  },

  styles: { // CSSClasses
    calendar: 'vc',
    controls: 'vc-controls',
    grid: 'vc-grid',
    column: 'vc-column',
    header: 'vc-header',
    headerContent: 'vc-header__content',
    month: 'vc-month',
    year: 'vc-year',
    arrowPrev: 'vc-arrow vc-arrow_prev',
    arrowNext: 'vc-arrow vc-arrow_next',
    wrapper: 'vc-wrapper',
    content: 'vc-content',
    months: 'vc-months',
    monthsMonth: 'vc-months__month',
    years: 'vc-years',
    yearsYear: 'vc-years__year',
    week: 'vc-week',
    weekDay: 'vc-week__day',
    weekNumbers: 'vc-week-numbers',
    weekNumbersTitle: 'vc-week-numbers__title',
    weekNumbersContent: 'vc-week-numbers__content',
    weekNumber: 'vc-week-number',
    dates: 'vc-dates',
    date: 'vc-date',
    dateBtn: 'vc-date__btn',
    datePopup: 'vc-date__popup',
    time: 'vc-time',
    timeContent: 'vc-time__content',
    timeHour: 'vc-time__hour',
    timeMinute: 'vc-time__minute',
    timeKeeping: 'vc-time__keeping',
    timeRanges: 'vc-time__ranges',
    timeRange: 'vc-time__range',
  },

  context: { // Context variables
    isInit: false, // isInit
    inputModeInit: false, // isInputInit
    currentType: undefined, // currentType

    locale: { // new
      months: {
        short: [],
        long: [],
      },
      weekdays: {
        short: [],
        long: [],
      },
    },

    mainElement: undefined, // HTMLElement
    originalElement: undefined, // HTMLOriginalElement
    inputElement: undefined, // HTMLInputElement

    dateMin: undefined, // dateMin
    dateMax: undefined, // dateMax

    displayYear: undefined, // viewYear
    displayDateMin: undefined, // rangeMin
    displayDateMax: undefined, // rangeMax

    disableDates: undefined, // rangeDisabled
    enableDates: undefined, // rangeEnabled

    selectedDates: undefined, // selectedDates
    selectedMonth: undefined, // selectedMonth
    selectedYear: undefined, // selectedYear
    selectedHours: undefined, // selectedHours
    selectedMinutes: undefined, // selectedMinutes
    selectedKeeping: undefined, // selectedKeeping
    selectedTime: undefined, // selectedTime
  }
}