如何将图像添加到 Vue FullCalendar 上的事件？ imageurl returns 未定义

Question

我正在尝试使用 Vue 将图像动态添加到 FullCalendar 事件。但首先，我正在使用静态数据进行测试，但图像没有显示。

这是我经过多次研究后尝试做的事情：

<template>
...
<FullCalendar 
                    defaultView="timeGridWeek" 
                    header="null"
                    :slotDuration="slotDuration"
                    :plugins="calendarPlugins"
                    @dateClick="handleDateClick"
                    :allDaySlot="false"
                    :columnHeaderFormat='columnHeaderFormat'
                    :hiddenDays="hiddenDays"
                    :themeSystem="themeSystem"
                    :minTime="minTime"
                    :maxTime="maxTime"
                    :contentHeight="contentHeight"
                    :events="tutor_applications_not_scheduled"
                    :config="config"
                    @eventRender="eventRender"
                />
...
</template>

<script>
import moment from 'moment'
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlugin from '@fullcalendar/timegrid'
import interactionPlugin from '@fullcalendar/interaction'
import bootstrapPlugin from '@fullcalendar/bootstrap'

export default {
    components: {
        FullCalendar
    },

    data(){
        return {
            tutor_application_setup_id: this.$route.params.tutor_application_setup_id,

            loading: false,

            uri: '/tutor-applications-schedules/',

            calendarPlugins: [dayGridPlugin, timeGridPlugin, interactionPlugin, bootstrapPlugin], 
            slotDuration: '01:00',
            columnHeaderFormat: {weekday:'long'},
            hiddenDays: [], //[0,6] - Sunday and Saturday
            themeSystem: 'bootstrap',
            minTime: '10:00', // will be dynamic
            maxTime: '17:00', // will be dynamic
            contentHeight: 'auto',
            config: {
                timeFormat: 'h(:mm) a',
                eventClick: function(event) {
                    if (event.url) {
                    location.replace(event.url);
                    return false;
                    }
                }
            },

            tutor_applications_schedules: [],
            tutor_applications_not_scheduled: [],
            tutor_applications_scheduled: [],

            errors: [],

        }
    },

    methods: {

        handleDateClick(arg){
            alert(arg.date)
        },

        loadTutorApplicationsSchedules(){
            axios.get(this.uri + this.tutor_application_setup_id).then(response=>{
                this.tutor_applications_schedules = response.data.tutor_applications_schedules
                this.loadTutorApplicationsNotScheduled()
                this.loading = true
            });
        },

        loadTutorApplicationsNotScheduled(){

            // this.tutor_applications_schedules.forEach(schedule => {
                // if(!schedule.is_scheduled){
                    this.tutor_applications_not_scheduled.push({
                        title: 'TEST TITLE',
                        start: '2019-05-22 10:00',
                        end: '2019-05-22 13:00',
                        imageurl: '/images/profile/1557196883.png'
                    });
                // }
            // });

        },

        eventRender: function(event, eventElement) {
            console.log(event) // returning everything
            console.log(event.imageurl) // returning undefined
            if (event.imageurl) {
                eventElement.find("div.fc-content").prepend("<img src='" + event.imageurl +"' width='16' height='16'>");
            }
        },

        loadTutorApplicationsScheduled(){

        },

        moment: function (date) {
            return moment(date)
        },

    },

    mounted(){
        this.loadTutorApplicationsSchedules()
    }
}
</script>

结果returns 只有正确日期的时间和标题。

我还尝试将 img 标签插入 title 属性，并更改了 eventRender，如下所示：

...
title: '<img src="/images/profile/1557196883.png" />TEST TITLE',
...

eventRender: function(event, element, view) {
            var title = element.find( '.fc-title' );
            title.html(title.text());
        },

它将 html 标记作为字符串返回，例如 <img src="/images/profile/1557196883.png" />TEST TITLE。

我的一些依赖项是：

"vue": "^2.5.17",
"@fullcalendar/bootstrap": "^4.1.0",
        "@fullcalendar/core": "^4.1.0",
        "@fullcalendar/daygrid": "^4.1.0",
        "@fullcalendar/interaction": "^4.1.0",
        "@fullcalendar/timegrid": "^4.1.0",
        "@fullcalendar/vue": "^4.1.1",
        "babel-runtime": "^6.26.0",
        "vue-full-calendar": "^2.7.0",

我不知道该采用哪种方法了。有什么帮助吗？谢谢。

更新

我意识到某些参数已更改 (Full Calendar Updates)，并且我更改了 eventRender 函数，现在我可以读取 imageurl。但是，我不知道如何在 Vue 中找到标签并在前面加上我的图像标签。

我现在的代码是这样的：

eventRender: function(info) {
            console.log(info) // returning everything
            console.log(info.event.extendedProps.imageurl) // returning the image path correctly
            if (info.event.extendedProps.imageurl) {
                info.el.find("div.fc-content").prepend("<img src='" + info.event.extendedProps.imageurl +"' width='16' height='16'>"); // this line is the problem now
            }
        },

返回错误 [Vue warn]: Error in v-on handler: "TypeError: info.el.find is not a function"，我不知道如何解决。

Answer 1

在data中定义一个变量为imageURL: "",

在 html 中定义要显示为

的 img 标签

<img v-if="imageURL!=''" :src="imageURL" width='16' height='16'>

您的渲染器函数

eventRender: function(info) {
    if (info.event.extendedProps.imageurl) {
        this.imageURL = info.event.extendedProps.imageurl;
    }
}

Answer 2

它可能与谁有关 :)，this thread helped me，我想出了该怎么做。我将 eventRender 更改为：

eventRender: function(info) {
            if (info.event.extendedProps.imageurl) {
                info.el.firstChild.innerHTML = info.el.firstChild.innerHTML + "<img src='" + info.event.extendedProps.imageurl +"' width='40' height='40'>";
            }
        },

在这种情况下，我可以更加灵活，例如：

info.el.firstChild.innerHTML = "<div><h4><a href='#'>"+ info.event.title +"</a></h4><img src='" + info.event.extendedProps.imageurl +"' width='40' height='40'></div>";

等等

我希望这可以帮助到其他人！

Answer 3

我就是这么想的，把这个函数放到方法里

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

现在我从 Laravel 资源

中为每个事件动态更改颜色

  'backgroundColor'    => $this->status === 1 ? '#48BB78'  : '#F6E05E'

尝试在 eventRender 中使用 :class 但没有成功。因此，您可以根据条件发送 API 所需的颜色，然后在 laravel.

上执行操作

如何将图像添加到 Vue FullCalendar 上的事件？ imageurl returns 未定义

How to add an image to an event on Vue FullCalendar? imageurl returns undefined

fullcalendar

laravel

vue.js