web-dev-qa-db-fra.com

jQuery fullCalendar affiché non défini sur le titre

j'utilise jQuery fullcalendar sur un composant ReactJs.

j'ai un <div id="calendar"></div> sur la méthode de rendu

et sur composantDidUpdate, j'ai mis à jour le calendrier avec les codes suivants:

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

et il montre le caractère "non défini" sur le titre.

 jquery full calendar

actuellement, J'ai créé une solution piratée pour supprimer toutes les chaînes non définies du titre en ajoutant les éléments suivants:

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

},

y a-t-il une meilleure solution?

j'utilise jquery FullCalendar v2.9.1

avec les exemples de données suivants sur les événements:

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

remarque: j'ai fini par vider le calendrier complet de jQuery en faveur de react-big-calendar.

javascriptjqueryreactjsfullcalendarjsx
8
Grand Julivan

J'avais le même problème après la mise à jour de fullCalendar, cela m’a pris un peu pour comprendre car pendant presque un an tout fonctionnait bien et j’avais mis à jour fullCalendar par le passé sans problème, pour une raison quelconque, j’ai dû inclure moment.js dans la page J'utilisais fullCalendar sur, voir que j'exécutais un site MVC et auparavant, la page maître (_layout.cshtml) faisait référence à moment.js, je ne savais pas pourquoi cela ne fonctionnait plus, juste à titre de test, j'avais ajouté une référence à l'instant présent. J'utilise fullCalendar et l'undefindundefined est parti, tout comme un autre problème que j'avais avec les événements.

Dans mon cas, le correctif était: 

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

dans votre cas, cela peut simplement être:

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

J'avais le même problème après la mise à niveau de fullCalendar.js de v2.6.1 à v3.4.0

Dans mon cas, le problème a été résolu en incluant fullcalendar.js & scheduler.min.js after moment.js  

3
Haseeb Ibrar

J'ai le même problème avec fullcalendar v3.4.0 et fullcalendar-scheduler v1.6.2 dans un composant Angular2. J'ai rétrogradé à la dernière version fonctionnelle fullcalendar v3.1.0. Ce problème semble être introduit au-dessus de fullcalendar v3.2.0

2
Yingding Wang

J'avais le même problème, mais pour moi, il ne s'agissait pas d'un moment.

J'utilise node_modules et la séquence de chargement était comme ça:

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

Mais, après plus d’investigation, j’ai trouvé que fullcalendar-scheduler chargeait déjà le module fullcalendar. Il me suffisait donc de conserver le planificateur et tout se passait bien:

require('fullcalendar-scheduler');
1
JPG Dev

J'ai fini par vider le calendrier complet de jQuery en faveur de react-big-calendar. JQuery ne fonctionne pas bien avec react.

0
Grand Julivan

Il semble que la raison en soit causée par moment.js. Et dans la source du calendrier complet Begin ligne 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;
...

Si nous plaçons le moment.js dans la page principale, la première fois que nous chargeons le fullcalendar. Le résultat est correct et lorsque nous chargons en second fullcalendar, nous allons utiliser la propre méthode du moment.fn, format, et le moment est un globalvar.

Et quand on charge le moment.js à chaque fois que l'on charge fullcalendar, il utilise toujours la valeur moment dans le moment.js

Donc, si nous avons besoin de fullcalendar, nous devons utiliser avec moment.jstoggerther.

0
startewho