Javascript 如何使用完整日历和Vue js在日历中显示数据？

我试图在日历上显示我的数据。我使用的是完整日历和Vue js。我正在成功检索数据，我正在使用发出api请求的service.file，该请求加载数据并将其加载到事件：“”。这是在后端的Laravel/php中完成的。如果您需要查看此代码，请告诉我，但它只是将访谈表中的所有内容返回到json中。当我使用console.log（）时，我可以看到数据，并尝试将其绑定到

组件上，如下所示，但我无法将其显示在日历中。 我做错了什么

<template>
    <div>
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-md-12">
                    <Fullcalendar :plugins="calendarPlugins" :events="events" />
                </div>
            </div>
        </div>
    </div>
</template>

从“@Fullcalendar/vue”导入Fullcalendar；
从“@fullcalendar/daygrid”导入dayGridPlugin；
从“@fullcalendar/timegrid”导入timeGridPlugin；
从“@fullcalendar/interaction”导入interactionPlugin；
从“../services/employer_interview_service.js”导入*作为EmployeerInterviewService；
导出默认值{
组成部分：{
日历
},
数据（）{
返回{
calendarPlugins:[dayGridPlugin，interactionPlugin，timeGridPlugin]，
事件：“”，
};
},
创建（）{
这是getEvents（）；
},
方法：{
getEvents:async函数（）{
const response=等待EmployeerInterviewservice.LoadOccessions（）；
this.events=response.data.events；
console.log（this.events）；
},
},
};

我将表格中的列从

start\u date

更改为

start

，表格中的

title

列为空。我向它们添加了一些数据，现在它开始工作了

如果你用本地的测试数据替换你的数据，它仍然会赢；不工作？是的，您必须匹配fullCalendar期望的字段，否则它不知道在哪里查找对象中的重要数据段。如果我想在其中显示其他数据，该怎么办？例如，在我的表单中有“date2”输入，表中有一个date2列。因此，此人可以选择两个可能的日期，直到其中一个日期得到确认。如何像显示起始值一样显示date2值？例如，如果在我的表单中有“time”输入字段，而在我的表中有“time”列，那么用户可以选择日期和时间。如何在日历上显示“time”值？事件的JSON中提供的所有其他非标准属性都进入fullCalendar事件的extendedProps对象（请参阅文档中的事件解析页面）。如果您想使用它们并在日历上显示它们，您可以通过eventRender回调自定义事件的外观（文档中也有关于它的文章）。allDay是一个标准的、有文档记录的属性，因此您当然不想将其放在extendedProps中。但无论如何，正如我所说，fullCalendar将为您创建extendedProps，您不必自己创建它-您可以将所有事件的属性作为平面列表提供，fullCalendar将在将您的属性复制到fullCalendar事件对象时转换结构。您说“如何在日历上显示“时间”值？”…事件已经有时间了。时间将自动显示。下面是一个很好的简单演示，展示了extendedProps和eventRender（以及作为开始/结束日期的一部分时自动显示的时间）：

<script>
    import Fullcalendar from "@fullcalendar/vue";
    import dayGridPlugin from "@fullcalendar/daygrid";
    import timeGridPlugin from "@fullcalendar/timegrid";
    import interactionPlugin from "@fullcalendar/interaction";
    import * as employerInterviewService from '../services/employer_interview_service.js';

export default {

        components: {
            Fullcalendar
        },

        data() {
            return {
                calendarPlugins: [dayGridPlugin, interactionPlugin, timeGridPlugin],
                events: "",
            };
        },

        created() {
            this.getEvents();
        },

        methods: {

            getEvents: async function() {
                const response = await employerInterviewService.loadInterviews();
                this.events = response.data.events;

                console.log(this.events);

            },

        },

    };
</script>