JQuery fullCalendar displayed undefined by title

Question

I am using jQuery fullcalendar for the ReactJs component.

I have a <div id="calendar"></div> of a rendering method

and on componentDidUpdate, I updated the calendar with the following codes:

 $('#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 }); 

and it displays the character "undefined" in the header. Where am I wrong? and how to debug where the undefined line came from?

Currently, I have made a hacked decision to remove the entire undefined line from the header by adding the following:

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

is there a better solution?

I am using jquery FullCalendar v2.9.1

with the following event data examples:

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

Note: I ended up dropping the full jquery calendar in favor of a reaction-large calendar.

Answer 1

I had the same problem after updating fullCalendar, I figured it out a bit, because almost a year everything worked fine, and I updated fullCalendar in the past without any problems, for some reason I had to turn on moment.js on the page in which I used fullCalendar, see I launch the MVC website, and the main page ( _layout.cshtml ) _layout.cshtml referred to moment.js , not sure right now why this is no longer working, as a test I added a link to the moment on the actual page that I I use fullCalendar, and undefindundefined is gone, and I made another problem with the events.

In my case, the fix was:

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

in your case, it could be simple:

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

Answer 2

I had the same problem after updating fullCalendar.js from version 2.2.1 to version 4.0.0

In my case, the problem was resolved by including fullcalendar.js and scheduler.min.js after moment.js

Answer 3

I have the same problem with fullcalendar v3.4.0 and fullcalendar-scheduler v1.6.2 inside the Angular2 component. I downgraded to the latest current version of fullcalendar v3.1.0. This issue seems to be introduced above fullcalendar v3.2.0

Answer 4

I ended up dropping the full jquery calendar in favor of a reaction-large calendar. jQuery does not respond well to the reaction.

Answer 5

I had the same problem, but for me it was not about the moment.

I am using node_modules and the loading sequence was like this:

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

But after further investigation, I found that fullcalendar-scheduler is already loading the fullcalendar module, so I just needed to leave the scheduler, and everything worked fine:

 require('fullcalendar-scheduler'); 

Answer 6

It seems that the reason is in the reasons: moment.js And in the source line of the fullcalendar 1247 source

 (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 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 moment.js on the main page, the first time we load fullcalendar The result is correct, and when we load fullcalendar second fullcalendar , moment.fn that moment moment.fn native format method has been changed. And this moment is a global var.

And when we load the moment .js every time we load fullcalendar , it always uses the moment value at the moment. moment.js

Therefore, if we need fullcalendar , we should use it with moment.js toggerther.

Answer 7

I found using fullcalander.js and not fullcalendar.min.js fixed this problem for me. However, they did not investigate why.

Answer 8

Probably the locale problem. I had the same problem as when using pt-br.

I solved mine by deleting the line

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

and leaving

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

Answer 9

Delete it:

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

and include in your code the full calendar:

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