jQuery fullCalendar displayed undefined on title

Question

i\'m using jQuery fullcalendar on a ReactJs component.

i have a

on the render method

and on componentD

Answer 1

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

Answer 2

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.

Answer 3

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');

Answer 4

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>

Answer 5

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';

Answer 6

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',
});