FullCalendar dayRender 未在正确的日期呈现价格答案

【问题标题】：FullCalendar dayRender not rendering the price in correct dayFullCalendar dayRender 未在正确的日期呈现价格
【发布时间】：2020-06-24 06:02:00
【问题描述】：

问题是价格显示在错误的行中。

如上图所示，我有 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");

【问题讨论】：

我们可以看看你的CalendarDays数组的定义/内容吗？请提供可用的 Javascript 代码。这样我就可以制作可运行的代码来尝试重现和理解您的问题。谢谢。
解决了，是 CSS 问题。

标签： javascript vue.js fullcalendar fullcalendar-4

【解决方案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>`
                }
            },,

【讨论】：