Vue Fullcalendar：能够根据他们的日子在每天的网格上有不同的价格

Question

现在我想知道如何用vue.js或js渲染每天网格上的动态数据？我在网上看到的大多数答案都是关于 Jquery 以及过去版本的过时方法。

这基本上就是我想要的 fullcalendar

在 eventRender 中你可以访问 props 但在 dayRender 中你不能？

          eventRender(info) {
                info.el.firstChild.innerHTML = `
                    <a class="rounded-lg fc-day-grid-event fc-h-event fc-event f-start fc-end">
                        <div class="h-12">
                            <span class="fc-title text-white flex ml-3">
                                <img class="img-circle avatar-small h-8 w-8 p-1" src="${info.event.extendedProps.imageurl}">
                                <span class="ml-3 self-center font-bold">${info.event.extendedProps.username}</span>
                            </span>
                        </div>
                    </a>
                `
            },

我找不到道具所以我使用了一个数据变量，但我需要它，它是动态的。


        dayRender(dayRenderInfo) {
                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>
                `
            },

这是我想要执行的操作的代码，但在 jquery 中并且似乎删除了日期和单元格。

        dayRender: function(date, cell) {
            var dayInfo = $.grep(days, function(e) {
                return e.day === date.format()
            }); 
            console.log(dayInfo);

            <% if !@rooms.blank? %>
                if (dayInfo.length > 0) {
                    if (dayInfo[0].status == "Not_Available") {
                        cell.addClass('fc-past');
                    } else {
                        cell.append('<span class="day-price">' + '$' + dayInfo[0].price + '</span>' )
                    }
                } else {
                    cell.append('<span class="day-price">' + '$<%= @room.price %>' + '</span>')
                }
            <% end %>
        },
    ```

Answer 1

感谢 ADyson 找到了解决方案这是供将来可能需要它的任何人使用的代码。

            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 = `
                        <div class="">
                            <span class="text-green-600 font-semibold day-price">$${dayInfo[0].price}</span>
                        </div>
                    `
                    }
                } else {
                    dayRenderInfo.el.innerHTML = `
                        <div class="">
                            <span class="text-green-600 font-semibold day-price">$${this.calendarPrice}</span>
                        </div>
                    `
                }
            },

Vue Fullcalendar：能够根据他们的日子在每天的网格上有不同的价格

Vue Fullcalender: Be able to have different prices on each day grid based on their day

javascript

vue.js

fullcalendar

fullcalendar-4