FullCalendar dayRender没有在正确的一天给出价格

Question

问题是价格呈现在不正确的行中。

就像上面的截图一样，我有两个问题。

，

1. ，我有7月12-14日的约会日期，我把他们弄残了。日期确实会被禁用，但是应该删除的价格将在7月5-7日被删除。1：https://i.stack.imgur.com/EMv3Z.png

https://i.stack.imgur.com/mvRKL.png

1. I从7月9-11日起更改价格，但呈现为7月2-4日的价格。

            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");

Answer 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>`
                }
            },,