After creating a Vue.js component that displays a customized calendar with different background colors for days, I encountered a problem. Whenever I select a day, all my customizations are lost because Flatpickr redraws the DOM elements for the days. How can I ensure that my customizations are retained even after the days grid is updated?
<script>
import { UI_DATE_FORMAT } from "../data/System";
import flatPickr from "vue-flatpickr-component";
import RequestService from "../services/RequestService";
const request = new RequestService();
export default {
props: [],
data() {
return {
selectedDate: "",
currentMonth: null,
busyDaysData: {},
updateDataProcess: false,
dateConfig: {
inline: true,
dateFormat: UI_DATE_FORMAT,
monthSelectorType: "static",
wrap: false,
onDayCreate: function (dObj, dStr, fp, dayElem) {
this.calendarDayCreate(dayElem, fp);
}.bind(this),
},
};
},
components: {
flatPickr,
},
mounted() {},
methods: {
calendarDayCreate(dayElem, fp) {
const month = fp.currentMonth + 1;
const dayDay = dayElem.dateObj.getDate();
const dayMonth = dayElem.dateObj.getMonth() + 1;
if (dayMonth !== month) return;
if (this.updateDataProcess) {
const timer = setTimeout(() => {
if (!this.updateDataProcess) {
clearTimeout(timer);
this.handleDay(dayDay, dayElem);
}
}, 250);
} else {
if (this.currentMonth !== month) {
this.updateDataProcess = true;
new Promise((onSuccess, onError) => {
request.requestData(
{
data: "Calendar\\BusyDaysForMonth",
arguments: {
appointment_id: 0,
month,
extended: true,
},
},
(response) => {
onSuccess(response);
},
(error) => {
onError(error);
}
);
}).then(
(response) => {
this.updateDataProcess = false;
this.currentMonth = month;
this.busyDaysData = response.data;
this.handleDay(dayDay, dayElem);
},
(error) => {
this.updateDataProcess = false;
console.log(error);
}
);
}
}
},
handleDay(day, dayElem) {
if (!this.busyDaysData[day]) return;
console.log(dayElem);
dayElem.classList.add(
"app-" + this.busyDaysData[day].appointment_status ?? ""
);
},
},
};
</script>
<template>
<b-row id="appointments-calendar">
<b-col cols="12">
<flat-pickr
:config="dateConfig"
v-model="selectedDate"
class="form-control flatpickr active"
:placeholder="$t('appointments_input_date_ph')"
>
</flat-pickr>
</b-col>
</b-row>
</template>
<style scoped lang="scss"></style>
https://i.sstatic.net/UNahH.png
https://i.sstatic.net/Li55U.png
Despite trying various event hooks from the Flatpickr documentation (Events & Hooks), I have not been able to find a similar solution to the onDayCreate function for setting up days elements.