jQuery fullCalendar 在标题上显示未定义

Question

我在 ReactJs 组件上使用 jQuery 全日历。

我在渲染方法上有一个<div id="calendar"></div>

在 componentDidUpdate 上，我使用以下代码更新了日历：

$('#calendar').fullCalendar({
header: {
    left: 'prev,next today',
    center: 'title',
    right: 'month,agendaWeek,agendaDay'
},

events: _this.state.events,
defaultView:'month',
displayEventTime: false,
editable: false,
droppable: false,
durationEditable: false
});

它在标题上显示 "undefined" 个字符。我哪里做错了？以及如何调试未定义字符串的来源？

目前，我做了一个黑客解决方案，通过添加以下内容从标题中删除所有未定义的字符串：

viewRender: function(view, element) {
//note: this is a hack, i don't know why the view title keep showing "undefined" text in it.
//probably bugs in jquery fullcalendar
$('.fc-center')[0].children[0].innerText = view.title.replace(new RegExp("undefined", 'g'), ""); ;

},

有没有更好的解决方案？

我正在使用 jquery FullCalendar v2.9.1

使用以下事件示例数据：

[{"start":"2017-03-24T00:00:00.000Z","end":"2017-03-26T00:00:00.000Z","title":"Open house","description":"Bali 1 open house"}]

注意：我最终放弃了 jquery 完整日历，转而使用 react-big-calendar。

Answer 1

我在升级 fullCalendar 后遇到了同样的问题，我花了一些时间才弄明白，因为近一年来一切都运行良好，我过去升级过 fullCalendar 没有任何问题，出于某种原因我不得不在我使用 fullCalendar 的页面中包含 moment.js，看到我运行一个 MVC 站点，之前母版页 (_layout.cshtml) 引用了 moment.js，现在不确定为什么这不再有效，就像测试一样，我在实际页面中添加了对时刻的引用，我使用 fullCalendar 并且 undefindundefined 消失了，我遇到的另一个事件也是如此。

在我的例子中，修复是：

@Scripts.Render("~/bundles/dates")

在你的情况下，它可能只是：

<script src='//cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js'></script>

Answer 2

我发现使用 fullcalander.js 而不是 fullcalendar.min.js 为我解决了这个问题。虽然还没有调查原因。

Answer 3

可能是语言环境问题。我在使用 pt-br 时遇到了同样的问题。

我通过删除行

解决了我的问题

<script src='../fullcalendar.min.js'></script>

并离开

<script src='../fullcalendar.js'></script>

Answer 4

我最终放弃了 jquery 完整日历，转而使用 react-big-calendar。 jQuery 反应不好。

Answer 5

将 fullCalendar.js 从 v2.6.1 升级到 v3.4.0 后，我遇到了同样的问题

在我的例子中，通过在 之后包含 fullcalendar.js & scheduler.min.js 解决了问题moment.js

Answer 6

我对 Angular2 组件中的 fullcalendar v3.4.0 和 fullcalendar-scheduler v1.6.2 有同样的问题。我降级到最后一个功能版本 fullcalendar v3.1.0。这个问题好像在fullcalendar v3.2.0

上面介绍过

Answer 7

我遇到了同样的问题，但对我来说这与 moment.js 无关。

我使用 node_modules 加载顺序是这样的:

require('fullcalendar');
require('fullcalendar-scheduler');

但是，经过更多调查，我发现 fullcalendar-scheduler 已经在加载 fullcalendar 模块，所以我只需要保留调度程序，一切正常：

require('fullcalendar-scheduler');

Answer 8

删除这个：

<script src='../fullcalendar.min.js'></script>

并在您的完整日历代码中包含：

$('#calendar').fullCalendar({
header: {
    left: 'prev,next today',
    center: 'title',
    right: 'month,agendaWeek,agendaDay'
},

locale: 'es',
});

Answer 9

看来原因是由 moment.js 引起的。并且在 fullcalendar 的来源中开始行 1247

(function(module, exports, __webpack_require__) {

Object.defineProperty(exports, "__esModule", { value: true });
var moment = __webpack_require__(0);
var $ = __webpack_require__(3);
var util_1 = __webpack_require__(4);
var ambigDateOfMonthRegex = /^\s*\d{4}-\d\d$/;
var ambigTimeOrZoneRegex = /^\s*\d{4}-(?:(\d\d-\d\d)|(W\d\d$)|(W\d\d-\d)|(\d\d\d))((T| )(\d\d(:\d\d(:\d\d(\.\d+)?)?)?)?)?$/;
var newMomentProto = moment.fn; // where we will attach our new methods
exports.newMomentProto = newMomentProto;
var oldMomentProto = $.extend({}, newMomentProto); // copy of original moment methods
exports.oldMomentProto = oldMomentProto;
// tell momentjs to transfer these properties upon clone
var momentProperties = moment.momentProperties;
momentProperties.push('_fullCalendar');
momentProperties.push('_ambigTime');
momentProperties.push('_ambigZone');
/*
Call this if you want Moment's original format method to be used
*/
function oldMomentFormat(mom, formatStr) {
    return oldMomentProto.format.call(mom, formatStr); // oldMomentProto defined in moment-ext.js
}
exports.oldMomentFormat = oldMomentFormat;
...

如果我们把 moment.js 放在主页面，第一次加载 fullcalendar 结果是正确的，当我们第二次加载 fullcalendar 时，因为 moment.fn 自己的方法 format 是 changed.and moment 是 global var.

而当我们每次加载 fullcalendar 时加载 moment.js 时，它总是使用 moment.js

中的 moment 值

所以如果我们需要 fullcalendar，我们必须使用 moment.jstoggerther。

Answer 10

将此添加到您的 FullCalendar 配置中，undefined 将从标题中剥离出来

viewRender: function(view, element) {
              $('.fc-center')[0].children[0].innerText = view.title.replace(new RegExp("undefined", 'g'), "");
          }

如果你使用 vue 更好地导入 * as $ from 'jquery';

jQuery fullCalendar 在标题上显示未定义

jQuery fullCalendar displayed undefined on title

javascript

jquery

jsx

fullcalendar

reactjs