web-dev-qa-db-ja.com

タイトルに未定義で表示されるjQuery fullCalendar

reactJsコンポーネントでjQuery fullcalendarを使用しています。

<div id="calendar"></div>レンダーメソッド

そしてcomponentDidUpdateで、私は次のコードでカレンダーを更新しました：

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

タイトルに「未定義」の文字が表示されます。どこで私は間違えましたか？そして、未定義の文字列がどこから来たかをデバッグする方法は？

jquery full calendar

現在、私は次のコードを追加して、タイトルからすべての未定義の文字列を削除するハッキングされたソリューションを作成しました：

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

},

より良い解決策はありますか？

私はjquery FullCalendar v2.9.1を使用しています

イベントに関する次のサンプルデータを使用します。

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

注：結局、jqueryフルカレンダーをダンプして、react-big-calendarを優先しました。

javascriptjqueryreactjsfullcalendarjsx
14
Grand Julivan

FullCalendarをアップグレードした後も同じ問題が発生しましたが、1年近くすべてが問題なく機能しており、過去に問題なくfullCalendarをアップグレードしていたため、何らかの理由でmoment.jsをページに含める必要があったため、少しわかりました私はfullCalendarを使用していて、MVCサイトを実行していて、以前にマスターページ（_layout.cshtml）がmoment.jsを参照していたことを確認しました。今のところそれが機能しない理由はわかりません。テストで実際の瞬間への参照を追加しましたfullCalendarを使用しているページとundefindundefinedがなくなり、イベントで発生していた別の問題も解消されました。

私の場合、修正は：

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

あなたの場合それはちょうどかもしれません：

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

FullCalendar.jsをv2.6.1からv3.4.0にアップグレードした後、同じ問題が発生しました

私の場合、問題はfullcalendar.js＆scheduler.min.jsmoment.jsの後に含めることで解決しました

4
Haseeb Ibrar

Angular2コンポーネント内のfullcalendar v3.4.0およびfullcalendar-scheduler v1.6.2でも同じ問題があります。最後に機能するバージョンのフルカレンダーv3.1.0にダウングレードしました。この問題は、fullcalendar v3.2.0の上で発生したようです。

2
Yingding Wang

私は同じ問題を抱えていましたが、私にとってはmoment.jsではありませんでした。

私はnode_modulesを使用し、読み込みシーケンスはそのようでした：

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

しかし、さらに調査したところ、fullcalendar-schedulerが既にfullcalendarモジュールをロードしていることがわかりました。そのため、スケジューラを保持する必要があり、すべてが正常に機能しています。

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

結局、jqueryのフルカレンダーをダンプして、react-big-calendarを選びました。 jQueryがreactでうまく機能しない。

0
Grand Julivan

これをFullCalendar構成に追加すると、未定義はタイトルからストライプされます

viewRender: function(view, element) {
              $('.fc-center')[0].children[0].innerText = view.title.replace(new RegExp("undefined", 'g'), "");
          }

vue 'jquery'から*を$としてインポートする方がよい;

0
Ali Seivani

その理由は_moment.js_による原因であり、フルカレンダーのソースで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;
...
_

メインページに_moment.js_を配置すると、最初にfullcalendarをロードしたときに結果が正しくなり、2番目にfullcalendarをロードしたときに_moment.fn_独自のメソッドformatが変更されました。momentはglobal varです。

そして、fullcalendarを読み込むたびにmoment.jsを読み込む場合、常に_moment.js_のmoment値を使用します

したがって、fullcalendarが必要な場合は、_moment.js_ toggertherと一緒に使用する必要があります。

0
startewho