He usado vue-functional-calendar Vue Functional Calendar en mi aplicación VueJS de la siguiente manera.

 <FunctionalCalendar v-model="calendarData" v-on:dayClicked="date_selected" v-on:changedMonth="fetch_disabled_dates_by_month" :is-date-range="true" :is-date-picker="true" :configs="calendarConfigs"> </FunctionalCalendar>

Y los datos del calendarData y las configs son los siguientes:

 export default { name: "ReservationForm", components: { FunctionalCalendar, }, data() { return { calendarData: {}, calendarConfigs: { sundayStart: false, dateFormat: "dd/mm/yyyy", isDatePicker: true, isDateRange: true, disabledDates: [] //it will be updated dynamically from API response }, current_month: 1 //dynamic }; }, .......................

Ahora estoy tratando de actualizar el valor de disabledDates en función de la respuesta de solicitud de API de back-end. this.calendarConfigs.disabledDates = response.data.disabledDates; aquí la respuesta proviene del servidor. Aunque la matriz response.data.disbledDates tiene el formato correcto, pero aquí, ¡pero el valor no se actualiza en el calendario!

Por ejemplo, en el método montado, intenté obtener fechas deshabilitadas a través de la API, aunque la API devuelve datos correctos pero no se actualiza en el calendario.

 axios.defaults.headers.common['Content-Type'] = 'application/json'; axios.post("/api/get-disabled-dates", { month: this.current_month, }) .then((response) => { if(response.data.result == 'success'){ this.calendarConfigs.disabledDates = response.data.disabledDates; //the above line should update the disabled dates at calendar but it's not. Even if I hard code the value here it's not working } });