如何让FullCalendar vue3组件刷新？

问题描述 投票：0回答：1

我将 FullCalendar vue3 组件与 Laravel Breeze/Vue 一起使用，但我无法在需要时刷新日历。我希望日历在选择元素更改后刷新，以便为不同的用户显示新日历。

我正在使用 Vue3 组合 api，但我看不到如何强制刷新日历。我想我需要使用日历 api，但它似乎不起作用。

这是代码的缩小版：

<script setup>
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
import { reactive, ref, computed, watch, onMounted, onUnmounted, nextTick } from "vue";
import { Head, Link, useForm, router } from '@inertiajs/vue3';

import FullCalendar from '@fullcalendar/vue3';
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';
import interactionPlugin from '@fullcalendar/interaction';

const props = defineProps({
    'calendar_users': Object,
});

const calendarFor = reactive({
    id: -1,
});

const calendarOptions = reactive({
    plugins: [
        dayGridPlugin,
        timeGridPlugin,
        interactionPlugin,
    ],
    initialView: 'dayGridMonth',
    headerToolbar: {
        start: 'prevYear,nextYear prev,next today',
        center: 'title',
        end: 'dayGridMonth,timeGridWeek,timeGridDay'
    },
    events: '/get_events' + '?user=' + calendarFor.id,
    height: 'auto',
});

function refresh_calendar() {
    let calApi = this.$refs.fullCalendar.getApi();
    calApi.refetchEvents();
}

</script>

<template>
    <Head title="Calendar" />
    <AuthenticatedLayout>
        <template #header>
            <h2 class="font-semibold text-xl text-gray-800">
                Office Calendar
            </h2>
        </template>
        <div class="py-3">
            <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
                <div class="bg-white overflow-hidden sm:rounded-lg" id="CalendarScreen" name="CalendarScreen">
                    <div class="flex">
                        <div v-if="true" id="left_side" class="min-w-48 m-1 border">
                            <div class="flex mt-8">
                                <label for="calendarFor" class="ml-3 mr-4 font-bold text-lg">Calendar for:</label>
                                <select v-model="calendarFor.id" class=" border rounded-md" id="calendarFor"  @change="refresh_calendar()">
                                    <option value="-1">****</option>
                                    <option v-for="calendar_user in props.calendar_users" :key="calendar_user.id" :value="calendar_user.id">
                                        {{ calendar_user.initials }}
                                    </option>
                                </select>
                            </div>
                        </div>
                        <div id="right_side" class="">
                            <div class="p-4 text-gray-900">
                                <FullCalendar ref='fullCalendar' :options="calendarOptions" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </AuthenticatedLayout>
</template>

页面加载时，事件已加载并且没有错误。但是当我更改日历用户时调用refresh_calendar()函数时出现以下错误：

Screenshot of console error message.

此外，这里还有来自 Vue Devtools 的一些信息，显示了日历组件的引用： Screenshot of devtools showing ref.

我做错了什么？如何让 fullcalendar vue3 组件根据所选用户进行刷新？

谢谢

javascript vue.js fullcalendar laravel-vue
1个回答
0
投票

如果有人很难让 Fullcalendar api 函数与合成 api 中的 Fullcalendar vue 组件一起使用，我想我应该发布这个。

答案已在上面的评论中进行了解释，引用了可能重复的问题。因为脚本设置在 DOM 加载之前运行，所以为了让事情正常工作，您需要在 onMounted 函数中调用 getApi() 。

这是我所做的基本概述：

<script setup>
import { reactive, ref, computed, watch, onMounted, onUnmounted, nextTick } from "vue";

import FullCalendar from '@fullcalendar/vue3';
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';
import interactionPlugin from '@fullcalendar/interaction';

const fullCalendar = ref(null);
let calApi = null;

const calendarOptions = reactive({
    plugins: [
        dayGridPlugin,
        timeGridPlugin,
        interactionPlugin,
    ],
   ...
});

onMounted(() => {
    calApi = fullCalendar.value.getApi();
});

</script>
<template>
    <FullCalendar ref='fullCalendar' :options="calendarOptions" />
</template>

然后，如果您需要做一些超出 calendarOptions 中可用的操作，您可以使用 calApi 变量调用任何 fullcalendar 函数，例如 calApi.refetchEvents();

感谢上面的 Estus Flask 帮助解决这个问题！

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.