web-dev-qa-db-ja.com

Ajaxデータベースの更新後のfullCalendarでのイベントの再レンダリング

AJAXを介してデータベースに加えられた変更をfullCalendarに反映させようとしています。問題は、AJAX呼び出しが成功した後、画面上のカレンダーを更新しないことです。

$.ajax({
    type: "POST",
    url: "eventEditXHR.php",
    data: {
       //the data
    },
    success: function(text) {
      $("#calendar").fullCalendar("refetchEvents");
    }....

間違った方法を使用していますか？ページ全体をリロードせずにこれを達成する最良の方法は何でしょうか？ご意見ありがとうございます！

javascriptjqueryajaxfullcalendar
19
Guy

いくつかの方法があります。あまりエレガントではありません。

1. FullCalendarを使用してjsonイベントを取得する場合：

$('#calendar').fullCalendar({ events: "json-events.php",    });

ただやる：

$('#calendar').fullCalendar( 'refetchEvents' );

外部メソッドでイベントを取得する場合は、実行できます。エレガントではありませんが機能します

$('#calendar').fullCalendar( 'removeEventSource', source )
$('#calendar').fullCalendar( 'addEventSource', source )
47
Igor S.

3つのステップでイベントをレンダリングできます。

1）すべてのイベントを削除する

.fullCalendar( 'removeEvents');

2）イベントソースを追加する

.fullCalendar( 'addEventSource', events);

3）イベントのレンダリング

.fullCalendar( 'rerenderEvents' );

のような...

$.ajax({
    type: "POST",
    url: "eventEditXHR.php",
    data: {       //the data    },
    success: function(events)
      {
              $('#calendar').fullCalendar('removeEvents');
              $('#calendar').fullCalendar('addEventSource', events);         
              $('#calendar').fullCalendar('rerenderEvents' );
       }.
     });
45
anupama jirange

これは、ASP.NET CORE、MVC 6で機能するものです。

 success: function(events)
 {
        $('#calendar').fullCalendar('rerenderEvents');
        $('#calendar').fullCalendar('refetchEvents');
 }

これはASP.NET MVC 5で機能していましたが：

 success: function(events)
 {
       $('#calendar').fullCalendar('refetchEvents');
 }
3
Mawycezil

FullCalendar v3.8.0の場合、以下が機能します。

var events = [
    {title: 'Business Lunch', start: '2017-12-03T13:00:00'},
    {title: 'Meeting', start: '2017-12-13T11:00:00'},
    {title: 'Conference', start: '2017-12-18', end: '2017-12-20'},
];

$('#calendar').fullCalendar({
    defaultDate: '2017-12-12',
    events: function (start, end, tz, callback) {
        callback(events);
    }
});

events.Push({title: 'Party', start: '2017-12-29T20:00:00'});
$('#calendar').fullCalendar('refetchEvents');

jsbin

1
vbarbarosh

私のために働くもの：

success: function(text) {
                setTimeout(function(){
                    $("#calendar").fullCalendar("rerenderEvents");
                },50);
            }

タイムアウトせずに直接実行した場合、$ element.fullCalendar変数がまだ完全に設定されていないために動作しない可能性がありますか？

1
WiRa

1行で機能します：

$('#calendar').fullCalendar('refetchEventSources', 'eventEditXHR.php')

遅い返信ですが、これは2.8.0以降で最も効率的な方法です。

1
user7001007