jQuery fullCalendar displayed undefined on title

孤人 提交于 2019-11-30 17:53:46

I was having the same issue after upgrading fullCalendar, took me a bit to figure out because for almost a year everything has been working fine and I had upgraded fullCalendar in the past without any issues, for some reason I had to include moment.js in the page I was using the fullCalendar on, see I run an MVC site and previously the master page (_layout.cshtml) was referencing moment.js, not sure right now why that doesn't work anymore, just as a test I added a reference to moment in the actual page I use fullCalendar and the undefindundefined went away and so did another issue I was having with events.

In my case the fix was:

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

in your case it may just be:

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

I was having the same issue after upgrading fullCalendar.js from v2.6.1 to v3.4.0

In my case the Issue resolved by including fullcalendar.js & scheduler.min.js after moment.js

I have the same issue with fullcalendar v3.4.0 and fullcalendar-scheduler v1.6.2 within an Angular2 component. I downgraded to last functioning version fullcalendar v3.1.0. This issue seems to be introduced above fullcalendar v3.2.0

I was having the same issue, but for me it was not about moment.js.

I use node_modules and the loading sequence was like that :

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

But, after more investigation, I found that fullcalendar-scheduler was already loading fullcalendar module, so I just had to keep the scheduler and all is working fine :

require('fullcalendar-scheduler');

I ended up dumping the jquery full calendar in favor of react-big-calendar. jQuery not playing well with react.

It seems the reason is causes by moment.js.and in the fullcalendar 's source begin line 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;
...

If we put the moment.js in the main page, the first time we load the fullcalendar .the result is correct, and when we second load fullcalendar,becasue the moment.fn's own method format has be changed.and the moment is a global var.

And when we load the moment.js every time when we load fullcalendar,it allways use the moment value in the moment.js

So if we need the fullcalendar,we must use with moment.jstoggerther.

Add this to your FullCalendar config and undefined will be striped form the title

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

If you are using vue better to import * as $ from 'jquery';

I found using fullcalander.js rather than fullcalendar.min.js fixed this problem for me. Have not investigated why though.

Rodrigo Moraes

Probably a locale problem. I had the same issue as I was using pt-br.

I solved mine by removing the line

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

and leaving the

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

Alfredo Medina

Remove this:

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

and include in your fullcalendar code:

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

locale: 'es',
});
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!