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>

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

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

将数据中的变量定义为imageURL: "",

在要显示为html的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 Resource中所做的每个事件动态地更改颜色

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

试图在eventRender中使用：class，但是没有用。因此，您可以只根据条件发送API所需的颜色，然后在laravel上执行操作。

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

3 个答案: