CODEWITHSUNDEEP
javascriptjqueryreactjsfullcalendarjsx
Grand Julivan
Grand Julivan

Reputation: 279

jQuery fullCalendar displayed undefined on title

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.

Upvotes: 14

Views: 10487

Answers (10)

Ali Seivani
Ali Seivani

Reputation: 551

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

Upvotes: 2

startewho
startewho

Reputation: 63

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.

Upvotes: 0

Alfredo
Alfredo

Reputation: 1

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

Upvotes: -2

JPG Dev
JPG Dev

Reputation: 51

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

Upvotes: 3

Yingding Wang
Yingding Wang

Reputation: 490

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

Upvotes: 3

Haseeb Ibrar
Haseeb Ibrar

Reputation: 437

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

Upvotes: 5

Grand Julivan
Grand Julivan

Reputation: 279

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

Upvotes: 0

Rodrigo Moraes
Rodrigo Moraes

Reputation: 11

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>

Upvotes: -1

Bobster
Bobster

Reputation: 13

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

Upvotes: -1

Devnsyde
Devnsyde

Reputation: 1337

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>

Upvotes: 8

Related Questions