Feature request: Ajax loading or API methods

[johndodev]

Hello,

One of missing feature I see is the possibility to dynamically load dates (like Disabled dates), according to the displayed months. Indeed, we don't want to load 100% of the dates on the page, it can be too much.

A possibility would have been to let the developper use the event to to do, but in this case we would need a api method to set the dates.

Do you see it technically possible ?

[benitolopez]

Hello,

I understand the request, but at the moment, this is not planned. Unfortunately, I don't have the time to work on that feature right now. But I noted it.

Best, Benito

[rudiui17]

@johndodev I had the same requirement and added two functions, so that you can add new disabled dates without recreating the calendar. Please keep in mind, that i didn't test it with all possibilities, as I have moveBothMonths:true and the calendar always open.

 getMonthIdByName(name) {
    // Get month ID by Name
    let monthId = false;
    this.lang("month-names").forEach((month, index) => {
        if (month === name) {
            monthId = index;
        }
    });
    return monthId;
  }
  setDisabledDates(newDisabledDates) {
    let currentYear;
    let monthId;

    // get the current date from calendar title
    let currentDate = this.getMonthDom(1).querySelector('.datepicker__month-name').textContent;

    // set the new disabled dates
    this.disabledDates = newDisabledDates;
    this.parseDisabledDates();

    // get the year and month from the current date
    monthId = currentDate.split(' ', 2)[0];
    monthId = this.getMonthIdByName(monthId);
    currentYear = currentDate.split(' ', 2)[1];

    // create new date on first day of the last selected month
    let temp = new Date();
    temp.setDate(1);
    temp.setFullYear(currentYear);
    temp.setMonth(monthId);

    // jump to the last selected month
    this.showMonth(temp, 1);
    this.showMonth(this.getNextMonth(temp), 2);
    this.showSelectedDays();
  }

add them in the src js file after the destroy() function

you can call the new function with:

  let calendarDatepicker = new HotelDatepicker(...
  calendarDatepicker.setDisabledDates(newDisabledDatesArray);