現在、FullCalendar
(バージョン2.2.6)addEventSource
をテストしようとしています。
$('button').click(function() {
$("#calendar").fullCalendar('removeEventSource', cal_events_1);
$("#calendar").fullCalendar('addEventSource', cal_events_2);
});
しかし、私は常にこのエラーを受け取ります:
Uncaught TypeError: Cannot read property 'hasTime' of undefined
両方のソースがハードコーディングされており、どちらかのソースを使用してカレンダーをロードすると、イベントが正常にロードされるため、日付が正しくありません。
var cal_events_1 = [
{
events: [
{
title: 'event 1',
start: '2015-01-04',
color: 'tomato'
},
{
title: 'event 2',
start: '2015-01-09'
}],
color: '#55B2DA',
textColor: '#3c3c3c'
},
{
events: [
{
title: 'event 3',
start: '2015-01-06'
},
{
title: 'event 4',
start: '2015-01-07'
}],
color: 'rgb(255, 162, 71)',
textColor: '#3c3c3c'
},
{
events: [
{
title: 'event 5',
start: '2015-01-09'
},
{
title: 'event 6',
start: '2015-01-12'
}],
color: 'rgb(91, 228, 118)',
textColor: '#3c3c3c'
}];
var cal_events_2 = [
{
events: [
{
title: 'event 1',
start: '2015-01-04',
color: 'tomato'
},
{
title: 'event 2',
start: '2015-01-09'
},
{
title: 'event 3',
start: '2015-01-09'
}],
color: '#55B2DA',
textColor: '#3c3c3c'
},
{
events: [
{
title: 'event 4',
start: '2015-01-09'
},
{
title: 'event 5',
start: '2015-01-12'
}],
color: 'rgb(91, 228, 118)',
textColor: '#3c3c3c'
}];
カレンダーの読み込み:
$("#calendar").fullCalendar({
eventSources: cal_events_1 // or cal_events_2
});
エラーは、addEventSource
を呼び出した場合にのみ表示されます。正確に何が悪いのかわかりません。
[〜#〜]更新[〜#〜]
addEventSource
および removeEventSource
のドキュメントで、配列をソースとして使用することに言及していることは知っていますが、機能しないようです、cal_events_1
およびcal_events_2
は両方ともオブジェクトの配列です。動作したオブジェクトの使用:
var my_events = {
events: [
{
title: 'event 1',
start: '2015-01-04',
color: 'tomato'
},
{
title: 'event 2',
start: '2015-01-09'
},
{
title: 'event 3',
start: '2015-01-09'
}
],
color: '#55B2DA',
textColor: '#3c3c3c'
};
$('button').click(function() {
$("#calendar").fullCalendar('removeEvents');
$("#calendar").fullCalendar('addEventSource', my_events);
});
終了時間が必要です。
これを試して:
var my_events = {
events: [
{
title: 'event 1',
start: '2015-01-04',
end: '2015-01-06',
color: 'tomato'
},
]
};
ほとんどの場合、イベントのデータ構造が間違っているか、「開始」または「終了」プロパティのデータがnullであるか、ソースデータの日付形式が無効であることがエラーであることがわかりました。
addEventSourceは実際には配列を受け入れません。私のアドバイスは、cal_events_1またはcal_events_2を繰り返し処理して、各反復後に次のようなものにすることです。
$('#calendar').fullCalendar('addEventSource', {
events: [
{
title: 'event 5',
start: '2015-01-09'
},
{
title: 'event 6',
start: '2015-01-12'
}],
color: 'rgb(91, 228, 118)',
textColor: '#3c3c3c'
})
データベースからインタイムとアウトタイムを渡します。 in timeをstartおよびout timeとして指定することで、このエラーを修正しました。 )asendFullCalender.jsは、その変数を使用してインタイムとアウトタイムをチェックするため、追加するのを忘れましたセミコロン。 GenerateCalender関数用。これは私のコードです-
var event_array = [];
var selectedEvent = null;
FetchEventAndRenderCalendar();
function FetchEventAndRenderCalendar() {
events = [];
$.ajax({
url: "/Home/GetEvents",
data: "",
type: "GET",
dataType: "json",
async: false,
cache: false,
success: function (data) {
alert("success");
$.each(data, function (i, v) {
event_array.Push({
userid: v.UserId,
start: moment(v.LoginTime),
//end: moment(v.LogoutTime)
//start: moment(v.start),
end: v.LogoutTime != null ? moment(v.LogoutTime) : null
//color: v.themecolor,
//allday: v.isfullday
});
})
GenerateCalender(event_array);
},
error: function (error) {
alert('failed');
}
})
}
function GenerateCalender(event_array) {
$('#calender').fullCalendar({
events: event_array
});
}