FullCalendar dayRender无法在正确的日期呈现价格 [英] FullCalendar dayRender not rendering the price in correct day

问题描述

问题在于价格在错误的行中呈现.

Problem is that the price is rendering in incorrect row.

如上面的屏幕截图所示，我遇到2个问题.

As in the screenshot above, I am having 2 problems.

1. 我的约会日期为7月12日至14日，因此我将其禁用. 日期确实被禁用，但是应该删除的价格已在日期中删除 7月5日至7日. [1]: https://i.stack.imgur.com/EMv3Z.png

1. 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

我从7月9日至11日更改了价格，但它呈现的价格好像是7月2-4日 [2]: https://i.stack.imgur.com/mvRKL.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>
                    `
                }


            },

让我感到困惑的是添加classList确实可以正常工作. 然而，问题在于使用innerHTML呈现定价

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

推荐答案

解决了该问题. 这与CSS问题有关.

Solved the issue. It was related to CSS issue.

通过更改此类来解决.

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

这篇关于FullCalendar dayRender无法在正确的日期呈现价格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！