【问题标题】:How can I display data in my Calendar using Full Calendar and Vue js?如何使用完整日历和 Vue js 在我的日历中显示数据?
【发布时间】:2020-04-30 17:46:49
【问题描述】:

我正在尝试在日历上显示我的数据。我正在使用完整日历和 Vue js。我正在成功检索数据,我正在使用发出 api 请求的 service.file,它加载数据并将其加载到事件中:''。这是在后端的 Laravel/php 中完成的。如果您需要查看此代码,请告诉我,但它只是将我的采访表中的所有内容返回到 json。当我 console.log() 可以看到数据并尝试将其绑定到 <Fullcalendar /> 组件上,如下所示,但我无法让它显示在日历中。 我做错了什么?

<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>
<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>

【问题讨论】:

  • 如果您用测试本地数据替换您的数据,它仍然无法工作?

标签: javascript vue.js fullcalendar fullcalendar-4


【解决方案1】:

我将表中的列从 start_date 更改为 start,而表中的 title 列是空的。我向他们添加了一些数据,现在它正在工作。 ——

【讨论】:

  • 是的,您必须匹配 fullCalendar 期望的字段,否则它不知道在哪里可以找到对象中的重要数据
  • 如果我想在其中显示其他数据怎么办?例如,在我的表单中,我有 'date2' input ,我的表中有一个 date2 列。因此,此人可以选择 2 个可能的日期,直到其中一个被确认。我怎样才能像我们做起始值一样显示 date2 值?或者例如,如果在我的表单中我有“时间”输入字段,而在我的表格中我有一个“时间”列,那么用户可以选择日期和时间。如何在日历上显示“时间”值?
  • 您在事件的 JSON 中提供的所有其他非标准属性都进入 fullCalendar 事件的 extendedProps 对象(请参阅文档中的事件解析页面)。如果您想使用它们并将它们显示在日历上,您可以通过 eventRender 回调自定义事件的外观(文档中同样有一篇文章)。
  • allDay 是一个标准的、记录在案的属性,所以你当然不想把它放在extendedProps 中。但无论如何,正如我所说,fullCalendar 将为您创建 extendedProps,您不必自己创建它 - 您可以将所有事件的属性作为平面列表提供,并且 fullCalendar 将在将您的属性复制到时转换结构 fullCalendar事件对象。
  • P.S.你说“我怎样才能在日历上显示'时间'值?”......事件已经有时间了。时间会自动显示。这是一个很好的简单演示,显示了 extendedProps 和 eventRender (并显示时间在开始/结束日期的一部分时自动显示):jsfiddle.net/z9354ah8/1
猜你喜欢
  • 1970-01-01
  • 2022-10-13
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2017-06-30
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多