问题在于价格在错误的行中呈现。
如上面的屏幕截图所示,我遇到2个问题。
我的约会日期为7月12日至14日,因此我将其禁用了。 日期确实被禁用,但是应该删除的价格已在日期中删除 7月5日至7日。 [1]:https://i.stack.imgur.com/EMv3Z.png
我从7月9日至11日更改了价格,但它呈现的价格好像是7月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>
`
}
},
让我感到困惑的是添加classList确实可以正常工作。 然而,问题在于使用innerHTML呈现定价
dayRenderInfo.el.innerHTML = "";
dayRenderInfo.el.classList.add("fc-past");
答案 0 :(得分:1)
解决了该问题。 这与CSS问题有关。
通过更改此类来解决。
.day-price {
position: absolute;
color: #00A699;
bottom: 4px;
right: 2px;
}
并删除一些CSS类
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>`
}
},,