Fullcalendar Dayrender Not Rendering The Price In Correct Day

Problem is that the price is rendering in incorrect row. As in the screenshot above, I am having 2 problems. I have dates from July 12-14 and I disabled them. The dates do get dis

Solution 1:

Solved the issue. It was related to CSS issue.

Solved it by changing this class.

.day-price {
        position: absolute;
        color: #00A699;
        bottom: 4px;
        right: 2px;
    }

and removing some css classes

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