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

Question

Now I want to know how to render the dynamic data on each day grid with vue.js or js? Most answers I see online are about Jquery with outdated methods from past versions.

This basically what I want fullcalendar

In eventRender you can access props but you can't in 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>
                `
            },

I could not find props so I used a data variable, but I need it, to be dynamic.

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

Here is code of what I want to do, yet is in jquery and seems date and cell where removed.

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

            <% if [email protected]? %>
                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

Found solution thanks to ADyson Here is the code for anyone that may need it in future.

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