javascript - FullCalendar dayRender 未在正确的日期呈现价格
问题描述
问题是价格在不正确的行中呈现。
如上面的屏幕截图所示,我遇到了 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");
解决方案
解决了这个问题。它与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>`
}
},,
推荐阅读
- swiftui - 文本不适合时 SWIFTUI 选取框
- javascript - 上一次完成后的 ReactJS 调用函数
- r - ggplot2 - 无论 y 轴的范围如何,都设置中断
- .htaccess - .htaccess 中的 AuthName 未显示在 Chrome 中
- symfony4 - Knp_paginator 模板问题
- react-native - React Native Appium 找不到样式位置视图的自动化 ID:iOS 中的绝对
- angular - Angular8 TypeError:无法读取未定义的属性“forEach”
- clojure - 如何引用它存在的映射中的键?
- android - 无法删除 vcs android studio 中的代理设置
- json - Ansible-使用键匹配将两个嵌套的 json 文件合并为单个文件