Vue Fullcalender: возможность иметь разные цены в сетке каждого дня в зависимости от дня - PullRequest
Новая
       115

Vue Fullcalender: возможность иметь разные цены в сетке каждого дня в зависимости от дня

0 голосов
/ 21 июня 2020

Теперь я хочу знать, как отображать динамические c данные в сетке каждого дня с помощью vue. js или js? Большинство ответов, которые я вижу в Интернете, относятся к Jquery с устаревшими методами из прошлых версий.

Это в основном то, что я хочу fullcalendar

В eventRender вы можете получить доступ к реквизитам, но вы можете '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>
                `
            },

Мне не удалось найти реквизит, поэтому я использовал переменную данных, но она мне нужна, чтобы быть динамической c. 


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

1 Ответ

0 голосов
/ 25 июня 2020

Решение найдено благодаря 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>
                    `
                }
            },
...