fullcalendar： 'prev'または 'next'を押すとajaxでイベントをレンダリングできない

Question

fullcalendarでカレンダーを作成しています。

今月のデータは、外部のajaxリクエストで取得します。 - 私は月

json_backgrundColorのすべてのイベントをロードするために、この変数を使用する - 私は順序でこの変数を使用

• eventsJsonArray： は、ここで私はfullcalendarをレンダリングするために使用するデータの主な変数です関連する月のそれぞれの日の背景色を変更するには

• json_iconstring - 私はいくつかの日にアイコンを表示するには、この変数を使用

• MonthDisplayTitle_GetAlternativeMonthDisplay &などが - すべてがOKである - 私が最初に私のカレンダーを起動したときに、カレンダーのタイトル

を変更するために、この変数を使用します。すべてのデータとイベントがカレンダーに完全に表示されています。 'prev'または 'next'を押すと、 'json_backgrundColor'と 'json_iconstring'のみが更新され、カレンダーに表示されます（dayRender関数内にあるため推測されます）
イベントと代替タイトル名は更新されず、表示されません。ここ

はコードです：

<script> 
    var date = new Date(); 
    var d = date.getDate(); 
    var m = date.getMonth(); 
    m = m + 1; 
    var y = date.getFullYear(); 
    var ajaxData; 
    var eventsJsonArray; 
    var json_backgrundColor; 
    var json_iconstring; 
    var DefaulteDateForFullCalendarISO8601; 
    var MonthDisplayTitle_GetAlternativeMonthDisplay; 
    var MonthDisplayTitle_GetAlternativeYearDisplay; 
    var MonthDisplayTitle_GetGregorianYear; 
    getMonthData(m, y); 
    function getMonthData(m, y) { 
     //getting Month data 
     $.ajax({ 
      url: '$getMonthDataUrl', 
      type: 'GET', 
      data: { 
       gregorianMonth: m, 
       gregorianYear: y 
      }, 
      error: function() { 
       alert('there was an error while fetching events!'); 
      }, 
      success: function (data) { 
       ajaxData = data; 
       eventsJsonArray = ajaxData['all_The_Events_For_The_Month']; 
       json_iconstring = ajaxData['iconString']; 
       json_backgrundColor = ajaxData['Big_Calendar_cell_background_color']; 
       MonthDisplayTitle_GetAlternativeMonthDisplay = ajaxData['fullMonthDetails']['MonthEngDisplay']; 
       MonthDisplayTitle_GetAlternativeYearDisplay = ajaxData['fullMonthDetails']['YearDisplay']; 
       MonthDisplayTitle_GetGregorianYear = ajaxData['fullMonthDetails']['GregorianYear']; 
       DefaulteDateForFullCalendarISO8601 = ajaxData['fullMonthDetails']['DefaulteDateForFullCalendarISO8601']; 
       alert('ajax works! nicee!'); 
       //console.log(ajaxData); 
       //console.log(DefaulteDateForFullCalendarISO8601); 

      } 
     }); 
    } 

    //oridinal place for getmonthdate 
    alert('Hello! 1!'); 
    $(document).ready(function() { 
     console.log(eventsJsonArray); 
     $('#calendar').fullCalendar({ 
      header: { 
       left: 'prev', 
       center: 'title', 
       right: 'next' 
      }, 
      events: eventsJsonArray, 
      fixedWeekCount: false, 
      monthNamesShort: ['January ' + MonthDisplayTitle_GetGregorianYear + ' : ' + MonthDisplayTitle_GetAlternativeMonthDisplay + ' ' + MonthDisplayTitle_GetAlternativeYearDisplay, 'February ' + MonthDisplayTitle_GetGregorianYear + ' : ' + MonthDisplayTitle_GetAlternativeMonthDisplay + ' ' + MonthDisplayTitle_GetAlternativeYearDisplay, 'March ' + MonthDisplayTitle_GetGregorianYear + ' : ' + MonthDisplayTitle_GetAlternativeMonthDisplay + ' ' + MonthDisplayTitle_GetAlternativeYearDisplay, 'April ' + MonthDisplayTitle_GetGregorianYear + ' : ' + MonthDisplayTitle_GetAlternativeMonthDisplay + ' ' + MonthDisplayTitle_GetAlternativeYearDisplay, 'May ' + MonthDisplayTitle_GetGregorianYear + ' : ' + MonthDisplayTitle_GetAlternativeMonthDisplay + ' ' + MonthDisplayTitle_GetAlternativeYearDisplay, 'June ' + MonthDisplayTitle_GetGregorianYear + ' : ' + MonthDisplayTitle_GetAlternativeMonthDisplay + ' ' + MonthDisplayTitle_GetAlternativeYearDisplay, 'July ' + MonthDisplayTitle_GetGregorianYear + ' : ' + MonthDisplayTitle_GetAlternativeMonthDisplay + ' ' + MonthDisplayTitle_GetAlternativeYearDisplay, 'August ' + MonthDisplayTitle_GetGregorianYear + ' : ' + MonthDisplayTitle_GetAlternativeMonthDisplay + ' ' + MonthDisplayTitle_GetAlternativeYearDisplay, 'September ' + MonthDisplayTitle_GetGregorianYear + ' : ' + MonthDisplayTitle_GetAlternativeMonthDisplay + ' ' + MonthDisplayTitle_GetAlternativeYearDisplay, 'October ' + MonthDisplayTitle_GetGregorianYear + ' : ' + MonthDisplayTitle_GetAlternativeMonthDisplay + ' ' + MonthDisplayTitle_GetAlternativeYearDisplay, 'November ' + MonthDisplayTitle_GetGregorianYear + ' : ' + MonthDisplayTitle_GetAlternativeMonthDisplay + ' ' + MonthDisplayTitle_GetAlternativeYearDisplay, 'December ' + MonthDisplayTitle_GetGregorianYear + ' : ' + MonthDisplayTitle_GetAlternativeMonthDisplay + ' ' + MonthDisplayTitle_GetAlternativeYearDisplay], 
      titleFormat: 'MMM', 
      dayRender: function (date, cell) { 
       var cellDate = date.format('D'); 
       if (!cell.hasClass('fc-other-month')) { 
        //if this if is true that means that the day belongs to the current relevant month (and not to the prev \ next month) 
        cell.css('background-color', json_backgrundColor[cellDate]); 

//from here: cheking which icons to show 

        if (json_iconstring[cellDate].includes('HAV')) { 
         cell.prepend('<img src=\' /havdala2.png \'>'); 
        } 

        //until here:: cheking which icons to show 

       } else { 
        //this days belongs to the prev \ next months. so we give them opacity)   
        cell.css('background-color', '#ffffff'); 
       } 

      } 
     }) 

    }); 
    alert('Hello!2 !'); 

    $('body').on('click', 'button.fc-prev-button', function() { 
//do something 
     alert('whatupppp!prev !'); 
//console.log(m,y); 
     if (m === 1) { 
      m = 12; 
      y = y - 1; 
     } 
     else { 
      m = m - 1; 
     } 
     getMonthData(m, y); 
     console.log(eventsJsonArray); 
    }); 

    $('body').on('click', 'button.fc-next-button', function() { 
//do something 
     alert('whatupppp!next !'); 
     //console.log(m,y); 
     if (m === 12) { 
      m = 1; 
      y = y + 1; 
     } 
     else { 
      m = m + 1; 
     } 
     getMonthData(m, y); 
     console.log(eventsJsonArray); 
    }); 
</script> 

誰もが私のコードが間違っている知っていますか？どのように私はそれを修正することができますので、私は '次へ'/'prev'イベントと代替タイトルが更新され、表示されますか？

多くの感謝!!

Answer 1

イベントは完全に静的です。

events: eventsJsonArray 

これは、1つの配列を指します。ページが読み込まれると、 "getMonthData"が実行され、eventsJsonArrayが入力されます。これは一度fullCalendarに渡されます。後でeventsJsonArray自体を更新することはできますが、fullCalendarに変更があったとは決して伝えません。

とにかく、この複雑なトリッキー、次/前のイベントなどを処理する必要はありません。フルカレンジャーと戦っています。使用できるイベントソースの種類については、ドキュメントをよく読んでください。静的配列は、これまでのように1つのオプションに過ぎません。また、ajaxを呼び出すカスタム関数を定義することもできますし、サーバー側を互換性のある方法で実装する場合は、サーバエンドポイントで直接fullCalendarを指すこともできます。これらの方法のいずれかを使用して、ビューが変更されると、fullCalendarは自動的にサーバーに再度照会して、新しいビューに表示されている期間に一致するイベントを取得します。https://fullcalendar.io/docs/event_data/events_function/

あなたの全体のコードは次のようになります：

var json_iconstring; //this needs to have a higher scope 
var gregorianMonths = [];// you need to pre-load this data - see below 

$(document).ready(function() { 

    $('#calendar').fullCalendar({ 
     header: { 
      left: 'prev', 
      center: 'title', 
      right: 'next' 
     }, 
     events: function(start, end, timezone, callback) { //custom events function to be called every time the view changes 
      $.ajax({ 
      url: '$getMonthDataUrl', 
      type: 'GET', 
      data: { 
       gregorianMonth: start.month() + 1, 
       gregorianYear: start.year() 
      }, 
      error: function (jqXHR, textStatus, errorThrown) { 
       alert('Error loading events: ' + textStatus + " - " + errorThrown); 
      }, 
      success: function (data) { 
       json_iconstring = data['iconString']; 
       callback(data['all_The_Events_For_The_Month']); //pass the event data to fullCalendar via the supplied callback function 
      } 
      }); 
     }, 
     fixedWeekCount: false, 
     monthNamesShort: gregorianMonths, //you need to pre-load this, not via ajax - see below 
     titleFormat: 'MMM', 
     showNonCurrentDates: false, //this built-in option replaces your test for jsonbackgroundcolour in the dayRender method 
     dayRender: function (date, cell) { 
      var cellDate = date.format('D'); 
      if (json_iconstring[cellDate].includes('HAV')) { 
       cell.prepend('<img src=\' /havdala2.png \'>'); 
      } 
     } 
    }); 
}); 

あなたはそこにいくつかの余分なカスタム機能を持っているので、

あなたのための正しいオプションは、イベント-AS-機能スタイルは、あります

余分なタスクとして、サーバー側のコードを変更して、わずか数ヶ月ではなく完全な開始日と終了日を受け入れることを検討する必要があります。これは、ユーザーが「日」ビューまたは「週」ビューを選択した場合、その日または週のデータのみをダウンロードし、より効率的で帯域幅を少なくするという利点があります。

P.S.また、月表示名を設定する別の方法を見つける必要があります - 私はちょうどajax経由で取得しようとするよりも、サーバーコードを介してページにリストを事前に注入します。これらのオプションは、monthNamesShortオプション全体を明示的にリセットしない限り、カレンダーとfullCalendarの読み込みを無視してその後の更新を無視するように設定されていますが、それは非効率的です。

P.P.S.私はあなたのdayRender関数のコードを組み込みオプション - https://fullcalendar.io/docs/display/showNonCurrentDates/に置き換えました。私はあなたが実際にすでに利用可能かもしれない機能のための回避策を作成しようとする前に、将来ドキュメントのより慎重な検討をすることをお勧めします。