问题
Problem is that the price is rendering in incorrect row.
As in the screenshot above, I am having 2 problems.
I have dates from July 12-14 and I disabled them. The dates do get disable but the price which should be removed instead is removed in dates July 5-7. [1]: https://i.stack.imgur.com/EMv3Z.png
I changed price from July 9-11 but it renders as if the price is on July 2-4 [2]: https://i.stack.imgur.com/mvRKL.png
dayRender(dayRenderInfo) {
const dayInfo = this.CalendarDays.filter(CalendarDay => moment(CalendarDay.day).isSame(dayRenderInfo.date, 'day'));
if (dayInfo.length > 0) {
// console.log(dayInfo[0].is_available === false);
if (dayInfo[0].is_available === false) {
dayRenderInfo.el.innerHTML = "";
dayRenderInfo.el.classList.add("fc-past");
} else {
dayRenderInfo.el.innerHTML = `
<div class="relative h-auto w-auto bg-gray-400">
<span class="text-green-600 font-semibold absolute day-price">$${dayInfo[0].price}</span>
</div>
`
}
} else {
dayRenderInfo.el.innerHTML = `
<div class="relative h-auto w-auto bg-gray-400">
<span class="text-green-600 font-semibold absolute day-price">$${this.calendarPrice}</span>
</div>
`
}
},
Something that confuses me a lot is that adding classList does work properly. Yet issue is with rendering the pricing with innerHTML
dayRenderInfo.el.innerHTML = "";
dayRenderInfo.el.classList.add("fc-past");
回答1:
Solved the issue. It was related to CSS issue.
Solved it by changing this class.
.day-price {
position: absolute;
color: #00A699;
bottom: 4px;
right: 2px;
}
and removing some css classes
dayRender(dayRenderInfo) {
const dayInfo = this.CalendarDays.filter(CalendarDay => moment(CalendarDay.day).isSame(dayRenderInfo.date, 'day'));
if (dayInfo.length > 0) {
if (dayInfo[0].is_available === false) {
dayRenderInfo.el.innerHTML = "";
dayRenderInfo.el.classList.add("fc-past");
}
else {
dayRenderInfo.el.innerHTML = `<span class="text-green-600 font-semibold day-price">$${dayInfo[0].price}</span>`
}
} else {
dayRenderInfo.el.innerHTML = `<span class="text-green-600 font-semibold day-price">$${this.calendarPrice}</span></div>`
}
},,
来源:https://stackoverflow.com/questions/62548646/fullcalendar-dayrender-not-rendering-the-price-in-correct-day