laravel - 如何在 Vue FullCalendar 上的事件中添加图像？imageurl 返回未定义

问题描述

我正在尝试使用 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>

结果仅返回正确日期的时间和标题。

我还尝试将 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",

我不知道该遵循哪种方法了。有什么帮助吗？谢谢你。

更新

我意识到一些参数已经改变（完整日历更新）并且我改变了我的 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"，我不知道如何解决它。

标签： laravelvue.jsfullcalendar

laravel - 如何在 Vue FullCalendar 上的事件中添加图像？imageurl 返回未定义

问题描述

解决方案

推荐阅读