14

i'm using jQuery fullcalendar on a ReactJs component.

i have a <div id="calendar"></div> on the render 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 shows "undefined" character on title. where did i go wrong? and how to debug where the undefined string came from?

jquery full calendar

currently, i made a hacked solution to remove all undefined string from the title 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 any better solution?

i'm using jquery FullCalendar v2.9.1

with the following sample data on the events:

[{"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 dumping the jquery full calendar in favor of react-big-calendar.

Grand Julivan
  • 264
  • 2
  • 13
  • do you get any errors in the browser console when this undefined message is appearing? And did you set titleFormat anywhere? https://fullcalendar.io/docs/text/titleFormat/ If you did, make sure the format you specified is valid. – ADyson Apr 05 '17 at 09:36
  • no errors on the console. and it's a small component. i only used it to display the calendar, so still no on the title format.. i've tried to set it to titleFormat: 'MMMM YYYY' , but no luck.. no clue on how to debug the title. – Grand Julivan Apr 05 '17 at 09:42
  • does it work ok if you use it outside the ReactJS context? – ADyson Apr 05 '17 at 09:52
  • should be no problem, because the jquery calendar is being updated after react renders. also tried to put that on componentDidMount. no luck. is there really no way to debug jquery? – Grand Julivan Apr 05 '17 at 09:53
  • you can debug any script on your page using the browser's developer tools. It's probably fullCalendar you want to debug though really. Obviously it'll be easier if you have the non-minified versions of the scripts. I would try it first outside the ReactJS context though, then you can rule in/out whether React is interfering with it in some way. – ADyson Apr 05 '17 at 10:15
  • I came to this page from google, I upgraded from fullCalendar 3.0.0 to 3.3.1 and I am having the same issue, no errors in console, I am not using ReactJs at all though. – Devnsyde Apr 17 '17 at 17:15

10 Answers10

8

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>
Devnsyde
  • 1,297
  • 1
  • 13
  • 34
  • I've added fullcalendar in vue with npm install. How would I be including `moment.js` then? In Vue using `import 'moment'` perhaps? (That one doesn't work.) – Code-MonKy Mar 09 '18 at 14:29
5

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

Haseeb Ibrar
  • 337
  • 5
  • 18
3

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

Yingding Wang
  • 450
  • 3
  • 14
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');
JPG Dev
  • 51
  • 3
2

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

Ali Seivani
  • 496
  • 3
  • 21
0

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

Grand Julivan
  • 264
  • 2
  • 13
0

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.

startewho
  • 63
  • 8
-1

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

Bobster
  • 13
  • 2
-1

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>

Carsten Løvbo Andersen
  • 26,637
  • 10
  • 47
  • 77
Rodrigo Moraes
  • 11
  • 1
  • It looks like part of your response was inadvertently removed, you may want to edit your answer so that we can see the whole answer. – Joe Lissner May 15 '17 at 20:45
-2

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',
});
TIGER
  • 2,864
  • 5
  • 35
  • 45
Alfredo
  • 1