jQuery fullCalendar 在标题上显示未定义答案

【问题标题】：jQuery fullCalendar displayed undefined on titlejQuery fullCalendar 在标题上显示未定义
【发布时间】：2017-08-30 19:46:03
【问题描述】：

我在 ReactJs 组件上使用 jQuery fullcalendar。

我在渲染方法上有一个<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
});

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

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

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。

【问题讨论】：

出现此未定义消息时，您是否在浏览器控制台中收到任何错误？你有没有在任何地方设置titleFormat？ fullcalendar.io/docs/text/titleFormat 如果这样做，请确保您指定的格式有效。
控制台上没有错误。它是一个小组件。我只用它来显示日历，所以标题格式仍然没有..我尝试将其设置为 titleFormat: 'MMMM YYYY' ，但没有运气.. 不知道如何调试标题。
如果你在 ReactJS 上下文之外使用它可以正常工作吗？
应该没问题，因为jquery日历是react渲染后更新的。还尝试将其放在 componentDidMount 上。没有运气。真的没有办法调试jquery吗？
您可以使用浏览器的开发工具调试页面上的任何脚本。它可能是你想要调试的 fullCalendar 。显然，如果您拥有脚本的非缩小版本，它会更容易。我会先在 ReactJS 上下文之外尝试它，然后你可以排除/排除 React 是否以某种方式干扰它。

标签： javascript jquery reactjs fullcalendar jsx

【解决方案1】：

升级 fullCalendar 后我遇到了同样的问题，我花了一点时间才弄清楚，因为近一年来一切正常，而且我过去升级 fullCalendar 没有任何问题，出于某种原因，我不得不包括 @ 987654321@ 在我使用 fullCalendar 的页面中，请参阅我运行一个 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>

【讨论】：

我已经通过 npm install 在 vue 中添加了 fullcalendar。那么我将如何包含moment.js 呢？在 Vue 中使用 import 'moment' 也许？（那个不行。）

【解决方案2】：

我发现使用 fullcalander.js 而不是 fullcalendar.min.js 为我解决了这个问题。但尚未调查原因。

【讨论】：

【解决方案3】：

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

我通过删除线解决了我的问题

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

离开

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

【讨论】：

您的部分回复似乎被无意中删除了，您可能需要编辑您的答案，以便我们看到完整的答案。

【解决方案4】：

我最终放弃了 jquery 完整日历，转而使用 react-big-calendar。 jQuery 在 react 中表现不佳。

【讨论】：

【解决方案5】：

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

在我的情况下，通过在 moment.js 之后包含 fullcalendar.js 和 scheduler.min.js 解决了问题

【讨论】：

【解决方案6】：

我对 Angular2 组件中的 fullcalendar v3.4.0 和 fullcalendar-scheduler v1.6.2 有同样的问题。我降级到最后一个正常运行的版本 fullcalendar v3.1.0。这个问题好像是在fullcalendar v3.2.0上面引入的

【讨论】：

也为我做了，但后来在 Vue 中。

【解决方案7】：

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

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

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

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

require('fullcalendar-scheduler');

【讨论】：

【解决方案8】：

删除这个：

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

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

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

locale: 'es',
});

【讨论】：

【解决方案9】：

似乎原因是由 moment.js.and 在 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自己的方法@987654327 @ 已更改。moment 是 global 变量。

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

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

【讨论】：

【解决方案10】：

将此添加到您的 FullCalendar 配置中，undefined 将从标题中删除

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

如果你用vue最好从'jquery'导入* as $;

【讨论】：