Full-Calendar Vue refetch events错误？似乎没有发生任何事情
Full-Calendar Vue refetch events错误是指在使用Full-Calendar和Vue框架开发时，重新获取事件数据时出现的错误。具体解决方法如下：
- 确保正确引入Full-Calendar和Vue相关的依赖库和组件。
- 确认事件数据源是否正确配置，并且能够正常获取到事件数据。
- 在Vue组件中，使用ref属性给Full-Calendar组件命名，例如：
<FullCalendar ref="calendar" />。 - 在需要重新获取事件数据的时机，调用Full-Calendar组件的
refetchEvents方法，例如：this.$refs.calendar.refetchEvents()。 - 确保在调用
refetchEvents方法之前，已经更新了事件数据源，以保证获取到最新的事件数据。 - 如果仍然出现错误，可以检查浏览器的开发者工具中的控制台输出，查看是否有其他相关的错误信息。
Full-Calendar是一个功能强大的日历插件，适用于各种场景，包括会议安排、日程管理、活动展示等。它提供了丰富的配置选项和交互功能，可以轻松地实现日历的展示和事件管理。
腾讯云提供了Serverless云函数（SCF）和云数据库（TencentDB）等产品，可以与Full-Calendar和Vue框架结合使用。通过SCF可以实现事件数据的动态获取和处理，而TencentDB可以作为事件数据的存储和管理平台。具体产品介绍和链接如下：
- 腾讯云函数（SCF）：无服务器云函数计算服务，支持多种编程语言，提供高可用、弹性扩展的计算能力。了解更多：腾讯云函数（SCF）
- 云数据库 TencentDB：高性能、可扩展的云数据库服务，支持多种数据库引擎，提供稳定可靠的数据存储和管理能力。了解更多：云数据库 TencentDB
以上是针对Full-Calendar Vue refetch events错误的解决方法和相关腾讯云产品介绍。希望对您有帮助！
相关·内容
当我添加一个新事件时，我在刷新事件时遇到问题。事件被插入到数据库中没有问题，但调用
this.$refs.calendar.$emit('refetch-events')
抛出以下错误：
[Vue warn]: Error in event handler for "refetch-events": "TypeError: $(...).fullCalendar is not a function"
下面是一些更多的代码，以进一步演示我正在尝试做的事情：
<template>
<div>
<full-cale
浏览 29提问于2017-08-21得票数 0
我想要更新日历，但这里似乎没有发生任何事情。 updatePlan () {
//let calendarApi = this.$refs.fullCalendar.getApi()
this.$refs.fullCalendar.$emit('refetch-events');//nothing appears to happen here
}
浏览 52提问于2020-07-05得票数 0
回答已采纳
我正在使用Vue https://fullcalendar.io/docs/vue的FullCalendar库，我有一个完美的工作日历，但是我不能让点击日期/日历事件来工作。 我在模板中有日历： <full-calendar @dateClick="handleDateClick" :config="config" :events="events"/></full-calendar> 和我的vue代码： export default {
data () {
return {
浏览 126提问于2019-09-09得票数 1
回答已采纳
我正在使用 of FullCalendar，我希望从日历实例中获取当前显示的月份和年份。这是一个Laravel应用程序，所以我将FullCalendar组件注册到app.js中，然后在相关的Vue组件中调用它：
app.js
import FullCalendar from '@fullcalendar/vue';
...
...
Vue.component('full-calendar', FullCalendar);
...
...
const app = new Vue({
el: '#app',
router: new
浏览 17提问于2020-05-22得票数 1
我有问题让vue-full日历与Nuxt一起工作。我在plugins目录中创建了一个插件vue-full-calendar.js，用于检查浏览器环境：
import Vue from 'vue'
if (process.browser) {
window.onNuxtReady(() => {
const VueFullCalendar = require('vue-full-calendar')
Vue.use(VueFullCalendar)
})
}
接下来，我将插件添加到nuxt.config.js中，并将ssr设置为&#
浏览 1提问于2018-05-01得票数 3
我一直在尝试将此vue.js模板实现到我的vue项目中，尽管在第一行设置了直接脚本，但它仍然返回“未捕获ReferenceError: Vue未定义”。
<script type="text/javascript" src="https://vuejs.org/js/vue.min.js"</script>
<template>
<div id="app" class="wrapper">
<fullcalendar class="full-Calendar
浏览 0提问于2018-08-20得票数 1
2回答
我的最终目标是向完整日历中添加一个Bootstrap 4 Popover，以显示日历事件描述，因为根据视图的不同，完整日历会切断标题/描述。因为完整日历是基于我传递给它的事件支柱生成的，所以我还没有弄清楚如何添加任何类型的弹出。(我也许可以用jQuery来完成它，但我真的在尝试将jQuery从项目中删除，以使我的构建规模更小)
这里有关于引导vue：的popover的正常使用的很好的文档
遗憾的是，完整日历并没有提供使用Boostrap文档中描述的任何方法的方法。有一件事我试过了，但没有成功
<template>
<full-calendar
:events=&#
浏览 0提问于2019-04-24得票数 3
回答已采纳
2回答
有人能解释一下我在下面的http get声明中做错了什么吗？我正在尝试动态填充FullCalendar事件，但没有添加任何事件。该服务似乎返回与"of“相同的结果。运行的代码可以在这里获得：
export class AppComponent implements OnInit {
events1 = [];
events2 = [];
calendarOptions1 = {
...
events: this.events1,
};
calendarOptions2 = {
...
events: this.events
浏览 11提问于2022-01-30得票数 1
回答已采纳
1回答
我希望从我的MySQL DB中检索我的事件，并将它发送到Vue组件，以便相应地在FullCalendar组件上显示事件。尽管它将我的事件数组填充为一个完整的HTML文档。
这是我的EventController
public function getEvents()
{
$getEvents = Event::query()->select('projectid','event_id','start_time','end_time','notes','taskid')->get(
浏览 1提问于2021-03-08得票数 0
如果可能的话，是否有人有在FullCalendar中使用异步管道的示例？比如这样的东西？
<full-calendar [events]="events$ | async"></full-calendar>
浏览 4提问于2022-01-30得票数 1
回答已采纳
我使用FullCalendar包作为Vue component (docs)。我有一个带有选择输入和日历组件的表单。 只有当此select输入有值或发生更改时，我才希望通过发出API请求来设置日历上的事件，该请求将从select输入返回链接到该值的事件。发出此请求后，我希望将我的日历事件更新为从API调用接收到的事件。 在更新事件之后，我尝试在calendarApi上使用render()和refetch-events，但没有发生任何更新。 我怎样才能做到这一点呢？ 代码： <template>
<div>
<div class="
浏览 47提问于2021-02-11得票数 0
回答已采纳
我使用的是，它是库的包装器。我已经设置了日历，它运行良好，但我一导入，它就提供了FullCalendar功能，以显示日历中每个日期旁边的“未定义”资源(如您在图像上看到的)。
我找到了关于这个问题的两篇关于堆栈溢出的文章：
--我试图改变moment.js的顺序，但这没有帮助。这个问题也正在发生，即使我一点也不影响moment.js。
--也试图恢复到FullCalendar的旧版本，但没有成功。
这是我正在使用的代码：
<template>
<div>
<full-calendar
ref="
浏览 1提问于2018-01-15得票数 1
1回答
我有一个Ionic 2应用程序，wich正在使用。
我跟随这些在Ionic 2上使用它，它运行得很好。
但是现在，我需要从包含这个自定义组件的页面组件中直接创建事件。
我有一个配置文件组件：-在profile.ts中，我从防火墙中检索每个用户的日期。-在profile.html中，我有一个选择器：<full-calendar></full-calendar>
因此，在配置文件页面中，我可以看到日历，并且我已经编辑了它们的样式。现在我想从这个页面创建事件，但是我不知道如何正确地引用它。
我试过：
import { FullCalendarComponent } from
浏览 3提问于2017-03-06得票数 0
1回答
角满日历不刷新事件。
、、、
我正在尝试使用。
即使将有效事件添加到我的events字段中，它们也不会出现在UI中。显示硬编码事件。因为我对角度很陌生，所以这个错误可能与完整的日历无关。
export class CalendarComponent {
constructor() {}
events: EventInput[] = [];
calendarOptions: CalendarOptions = {
events: this.events,
initialView: 'timeGridWeek',
initialDate: Date.now(),
浏览 9提问于2021-06-05得票数 1
回答已采纳
2回答
在我的cal.vue组件中，我有一个fullcalendar组件。在cal.vue中，我有一个名为submit的方法。在submit中，我使用this.$refs.calendar (成功地)引用了fullcalendar组件。但是，当我在我的提交函数中执行this.$refs.calendar.$emit('refetchEvents');时，事件不会被获取(我的事件不会在我的日历上更新)。为什么我的事件在提交时没有更新，我如何更新它们？
相关代码如下：
<template>
<div id="calendar" :navL="
浏览 149提问于2017-07-13得票数 4
回答已采纳
我是阿波罗世界的新人。对于我的Vue apollo客户端，我使用vue composable和@vue/apollo-composable以及版本V4。以及后端的nodejs服务器和apollo服务器。现在我在useQuery的登录页面上遇到了一个问题，如果我调用查询的结果，他们将显示错误"TS2349:此表达式不可调用。“
import { ref, defineComponent } from '@vue/composition-api'
import gql from 'graphql-tag'
import { useUserLogin } fr
浏览 4提问于2021-01-23得票数 0
我正在做"@fullcalendar/angular": "^5.5.0", 我无法重新呈现从API调用订阅的事件。我到处都找过了，但是，什么都不管用。请帮帮我.. 代码如下： calendar.component.html <full-calendar #calendar [options]="calendarOptions"></full-calendar> calendar.component.ts events = [];
calendarOptions: CalendarOptions = {
浏览 22提问于2021-01-08得票数 1
我正在使用Angular 11的完整日历插件。我一直收到错误消息"Cannot read property '__k‘of null“。这似乎是在调用calendar.render()时发生的。但却找不到真相。任何帮助都是非常感谢的。
这是我的ts文件：
export class FullCalendarComponent {
public calendar: Calendar | undefined;
calendarEl: any;
calendarOptions: CalendarOptions = {
slotMinTime:
浏览 21提问于2021-05-15得票数 1
嗨，对下面的代码有什么想法吗？谢谢，
我的想法是使用vue3 graphql组合api (django后端)创建博客列表。获取和创建新的博客很好。然而，我在为博客的细节创建路由器链接方面有一些问题.我遵循了“阿波罗”网页上提供的例子，但没有帮助。
<template>
{{blog.title}}
</template>
<script>
import { useQuery, useResult } from '@vue/apollo-composable'
import gql from 'graphql-tag'
浏览 4提问于2022-04-10得票数 0
回答已采纳
我有一个带有FullCalendar (同名网站)的日历，我希望当我传递一个日期时，它会变成另一种颜色 下面是我的代码： 我试过他们的医生，但不起作用 `<full-calendar defaultView="dayGridMonth"
(dateClick)="handleDateClick($event)"
locale="fr"
[plugins]="calendarPlugins"
[events]="eve
浏览 64提问于2019-05-15得票数 0
回答已采纳
我正在使用React 和Fullcalendar一起工作。我想一个人不需要知道完整的日历来回答这个问题，。这是一个反应理解的问题。
长话短说，Fullcalendar有一个api，可以从给定的source中重取任何events。在我的例子中，我的source是state.events，由useState生成。当我的refetch发生变化时，我只想使用state。目前为止一切都很好。但是，在第一次初始呈现时，Fullcalendar无法获取任何内容。
const OverviewPage: React.FunctionComponent<IOverviewPageProps> = (
浏览 8提问于2022-05-04得票数 2
回答已采纳
我试着用按钮dayGridMonth，dayGridWeek来制作完整的日历。我阅读了官方文档fullcalendar.io并找到了一个正确的解决方案：“dayGridMonth，dayGridWeek，timeGridDay”。但对我不起作用。
Vuejs代码：
<template>
<full-calendar ref="fullCalendar"
:events="calendarEvents"
:allDaySlot="false"
浏览 1提问于2021-06-29得票数 0
回答已采纳
1回答
嗨，我想在我的项目中使用完整的日历。我试着按照完整日历文档页面中所示的说明来做所有事情。
但我总是犯同样的错误：
ERROR in src/app/calendar/calendar.component.html:2:1 - error NG8001: 'full-calendar' is not a known element:
1. If 'full-calendar' is an Angular component, then verify that it is part of this module.
2. If 'full-calendar&#
浏览 12提问于2021-12-20得票数 0
1回答
此问题是在当前的Fullcalendar视图发生更改时触发事件。例如，当月份更改为前一个或下一个月份时。使用ViewRender没有帮助。在多个资源中，推荐的解决方案是ViewRender，但是我无法找到角度实现，因此，我的实现可能是错误的。此外，在函数中使用视图和元素参数也没有帮助。
我的职能如下：
eventViewRender() {
console.log("Working here");
}
我的HTML标记如下：
<full-calendar
defaultView="dayGridMonth"
[weekends]
浏览 2提问于2020-08-07得票数 2
我使用的是FullCalendar 4.4.0版。在我的代码中没有触发dayClick事件。我的代码如下。 calendar.component.html <full-calendar
defaultView="dayGridMonth"
[plugins]="calendarPlugins"
[events]="calendarEvents"
eventColor= '#6236ff'
eventBorderColor= '#6236ff'
eventTextColor='#ffffff'
浏览 39提问于2021-07-20得票数 0
回答已采纳
1回答
我有一个反应-阿波罗Mutation，被称为当一个用户通过一个播放视频取得一定的进展。每2000 my调用一次回调，当进度为88%时，调用我的突变。在那之后，called是真的，什么也没有发生。
当用户重放视频时，我需要重置突变状态。React有onStart和onEnd的回调，在那里我可以进行实际的重置，但我的问题是，我似乎找不出如何做它。
<Query query={GET_VIDEO} variables={queryVars}>
{({ error, loading, data, refetch }) => {
return <Mutation
浏览 0提问于2018-11-13得票数 3
回答已采纳
我已经开始用Vue做完整的日历了。我试过了，但无法采用完整日历上的一些功能。比如：
如何添加columnHeaderFormat喜欢-为月份-星期一，星期二，周-星期一- 08/11
如何在周日历上只显示预定的时间。如果事件从下午2点到下午4点，那么周/日日历只应显示这2小时。
如何在完整日历中添加默认日期..
如何在FC中添加事件限制。
代码:模板：<full-calendar class="calendar" :options="calendarOptions"/>
脚本: data() {
return {
calendar
浏览 5提问于2021-11-13得票数 1
2回答
我已经在vuejs中配置了完整日历，我在使用完整日历事件时遇到了问题。当我试图触发这些事件时，dateClick和eventClick在控制台上给出了以下警告：
事件"dateClick“在组件中发出，但处理程序被注册为"dateclick”。注意，HTML属性不区分大小写，在使用in-DOM模板时，不能使用v-on来侦听camelCase事件。您可能应该使用“日期单击”而不是"dateClick“。
我也试过切换到日期-点击，但没有运气。
我的Html
<script src="~/Scripts/vue/vue.js">&
浏览 4提问于2021-05-28得票数 0
回答已采纳
2回答
我已经将完整的日历添加到我的项目中，但是由于某些原因，它不能在日期网格中显示事件 我试过更改时区，时间和日期的组合都是一样的。 // Html <full-calendar #calendar
defaultView="dayGridMonth"
selectable="true"
(eventClick)="handleEventClick($event)"
[he
浏览 10提问于2019-10-14得票数 1
1回答
我正尝试在ngx引导标签teg中显示完整的日历模块，但在开始时，我只看到标题，单击标题按钮后，它显示所有日历
我曾尝试在ngOnInit中移动任务，但不起作用
import {AfterViewInit, Component, OnInit} from '@angular/core';
import dayGridPlugin from "@fullcalendar/daygrid";
@Component({
selector: 'app-calendar-module',
templateUrl: './calendar-m
浏览 15提问于2019-08-19得票数 0
我使用的是angular 10和fullcalender 5.3.1。由于某些原因，我无法将fullcalender initialView设置为day view。它始终坚持使用dayGridMonth视图 这是html - <full-calendar id="calendar"
#calendar
[options]="calendarOptions"
[plugins]="options.plugins"
[editable]="true"
[height]="'
浏览 19提问于2020-10-12得票数 2
回答已采纳
1回答
如何更新vForm输入值
、、、、
我使用和，并使用引导模式来编辑日历上的事件。当我点击日历上的一个事件时，它打开了带有表单的模式，并且它是输入的，我从Full日历事件单击()方法将数据发送到vForm，但是它没有显示在表单中，表单输入是空的。到目前为止，我尝试过的是其中没有一个有效的方法，我添加了一些评论来让事情变得更清楚：
失败1:
<script>
import "fullcalendar/dist/fullcalendar.min.js";
import "fullcalendar/dist/fullcalendar.min.css";
import { Form, HasEr
浏览 4提问于2020-05-18得票数 0
回答已采纳
1回答
当我试图将local设置为"en-gb"但它不起作用时，我想改变它的fullcalendar特性。我哪里错了？
<full-calendar #calendar defaultView="dayGridMonth" [header]="{
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
}" local="en-gb"
浏览 0提问于2019-12-07得票数 0
1回答
calendar.html
<full-calendar
defaultView="dayGridMonth"
[plugins]="calendarPlugins"
[weekends]="true"
[events]="[
{ title: 'event 1', date: '2019-06-07' },
{ title: 'event 2', date: '2019-06-12' }
]"
><
浏览 0提问于2019-07-20得票数 1
我正在我的Calendar.vue组件中编写一个VUE.js和FullCalendar应用程序，我遇到了一个问题，this关键字将不会选择元素。组件的模板如下所示：
<template>
<div id="calendar" :event-sources="eventSources" @event-selected="eventSelected" @event-created="eventCreated" :config="config">
<
浏览 22提问于2017-07-09得票数 0
回答已采纳
1回答
我使用完整的日历角度文档创建了一个日历组件。当我试图调用诸如addEvent、Rerender、refetch等方法时，它会给我以下错误：this.calendarComp.render is not a function
尝试导入完整日历/角的FullCalendarComponent，但这甚至不包含fullcalendar.component.d.ts当前代码中的rerenderEvents、addevents等函数，如下所示：
CalendarComponent.ts
@ViewChild('calendar', { static: true }) calendarCom
浏览 0提问于2019-08-21得票数 0
回答已采纳
2回答
我正在使用FullCalendar的角度，我想改变特定的日网格背景，我已经尝试了一些选项，但它没有工作。
<full-calendar #calendar [options]="calendarOptions"></full-calendar>
TS
export class CalendarComponent implements OnInit{
calendarData: CalendarData[] = [];
calendarVisible = false;
calendarOptions: Cale
浏览 12提问于2022-03-10得票数 0
回答已采纳
1回答
我和FullCalendar V4一起工作，还有Ionic -4和角-8.在周视图中它显示了我7天。我希望每一天都以数字显示为一天。例如，它应该显示的是第一天，而不是星期一。
我计划只显示三周，所以从第一天、第二天、第三天开始就应该有日期标签，直到第21天才能显示。
有没有一个内置的方法来做这个。或任何其他方法来这样做。(预先谢谢:)
目前执行情况
columnHeaderText(info){
if(info){
return 'Day ' + this.count++
}
}
<ion-content>
<full
浏览 2提问于2020-01-10得票数 1
回答已采纳
我正在尝试添加背景文本，并根据开始和结束日期时间调整事件栏大小。你能让我知道如何使用活动定位吗？你能和我分享一下如何在事件上添加背景文本和调整事件栏大小的语法吗？ **示例：** {
title : '66666',
start : '2019-04-14 12:30:00',
end : '2019-04-14 16:30:00',
title:<top right corner> TEXT1,
custom text2: time
}
@ViewChild('fullcal
浏览 17提问于2019-04-30得票数 0
1回答
我目前正在我的角v8应用程序的日历上工作。
这是我使用的插件：
这是我在html模板中包含的组件：
<full-calendar
defaultView="dayGridMonth"
[editable]="true"
[eventLimit]="5"
[nowIndicator]="true"
[slotLabelFormat]="timeFormat"
[eventTimeFormat]="ti
浏览 0提问于2019-07-30得票数 7
回答已采纳
1回答
dateClick事件没有工作，我完全按照文档中的说明执行了操作： https://fullcalendar.io/docs/angular html： <full-calendar #calendar (dateClick)="alert('clicked')" defaultView="timeGridWeek"
[nowIndicator]="true" [header]="header" [plugins]="calendarPlugins" [events]
浏览 18提问于2019-05-23得票数 4
我已经将完整的日历从v3更新到了v4，我正在使用angular 8。问题是如何在init和date change上加载事件。 我已经尝试过以下设置： <full-calendar
#calendar
[defaultView]="'timeGridWeek'"
[plugins]="calendarPlugins"
[header]="calendarHeader"
[allDaySlot]="false"
[s
浏览 10提问于2019-06-19得票数 0
在我们的应用程序中，我们有活动模块。我在应用程序中实现了完整的日历，但很难从数据库中获取数据。
成员资格仪表板视图
<div id="calendar">
</div>
<script>
$(document).ready(function(){
$.ajaxSetup({
headers:{
'X-CSRF-TOKEN' : $('meta[name="csrf-token"]').attr('conten
浏览 13提问于2022-06-09得票数 0
我正在使用FullCalendar和Vue。我试图在触发refreshCal()之后重新加载事件，因此用refetchEvents在屏幕上呈现日历。，我必须使用主要组件：
日历:这是代码
<script>
import FullCalendar from '@fullcalendar/vue'
import timeGridPlugin from '@fullcalendar/timegrid'
import resourceTimelinePlugin from '@fullcalendar/resource-timeline&
浏览 8提问于2020-09-06得票数 1
回答已采纳
我想在页面的日历上显示标题，但是标题没有显示。
下面是它的HTML代码：
<div class="card-body pb-0">
<full-calendar
ref="refCalendar"
:options="calendarOptions"
class="full-calendar"
/>
</div>
在剧本里我有
浏览 2提问于2021-05-18得票数 0
回答已采纳
1回答
我有一个rails应用程序，我试图添加一些交互式内容汤姆我的观点。因此，我有一个引导-数据交换-rails创业板的数据和backbone.js的数据处理。但是，当我试图听“changeDate”事件的数据报警器时，我会发现一些错误。视图中的挂钩事件根本不起作用，方法只是没有被调用：
events:
'changeDate #dpstart': 'tryit'
tryit: ->
console.log(this)
this
当我试图捕捉路由器中的事件时，我无法访问我的集合：
initialize: ->
@datepicker
浏览 3提问于2013-03-29得票数 0
1回答
在的帮助下，我们创建了一个graphql useQuery，它正确地从后端检索数据。当一个字符串被输入到一个输入字段时，函数driverRule会被调用来验证输入，而这个函数应该只调用useQuery一次。
问题
但是，当我们使用enable立即执行带有ref useQuery的查询时，将使用refetch()方法调用第二次执行。所有对driverRule的后续调用都将只按需要调用useQuery一次。但是，第一次调用就会执行两次，这是不需要的。
import {computed, defineComponent, ref } from '@vue/composition-api
浏览 0提问于2020-12-10得票数 4
使用jQuery，我们可以很容易地对viewRender进行DOM操作，这样我们就可以向现有的viewRender元素中添加额外的DOM/操作。
$('#calendar').fullcalendar({
customButtons: {
newButton: {
text: 'New Button', // if possible I want this to have an element ui datepicker component here
click: function() {
浏览 0提问于2018-12-03得票数 0
回答已采纳
我已经在我的angular应用程序中添加了@fullcalendar/angular，但我的事件不起作用。
在我的app.module.ts中：
FullCalendarModule.registerPlugins([
dayGridPlugin,
interactionPlugin,
timeGridPlugin
])
imports: [
...
...
FullCalendarModule
]
//.ts文件
import { Component, OnInit, ViewChild } from '@angular/core
浏览 0提问于2020-10-02得票数 2
1回答
尝试从我的组件访问由路由的setupController分配的模型。但只有我的console.log()日志是一个空的对象与其他三个成员相关的对象，似乎还没有解决，但安伯尔检查员说，我的所有承诺都实现了。我的{{#each event in events}}在我的main.hbs里工作得很好..
全日历.：
import Ember from "ember";
export default Ember.Component.extend({
attributeBindings: ['id'],
id: 'calenda
浏览 0提问于2015-04-16得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
