fullcalendar：按'prev'或'next'時顯示ajax事件的問題

Question

我正在通過fullcalendar建立一個日曆。

我通過外部ajax請求獲取本月的數據。 這裏是數據的主要變量我用它來渲染fullcalendar：

• eventsJsonArray - 我使用這個變量來加載所有的一個月

• json_backgrundColor的事件 - 我爲了使用這個變量改變相關一個月每一天的背景色

• json_iconstring - 我使用這個變量在幾天的時間來顯示一個圖標

• MonthDisplayTitle_GetAlternativeMonthDisplay &等 - 我使用這個變量，以更改日曆標題

當我第一次開始我的日曆 - 一切正常。所有的數據和事件都完美地顯示在日曆中。 但是當我按'上一頁'或'下一頁'時，只有'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> 

任何人知道什麼是錯我的代碼？以及我如何解決這個問題，所以當我按'下一步'/'預覽'事件和替代標題將得到更新和顯示？

非常感謝！

Answer 1

您的活動完全是靜態的。

events: eventsJsonArray 

這指向單個數組。當你的頁面加載時，你運行「getMonthData」並填充eventsJsonArray。這將傳遞給fullCalendar一次。儘管之後您可能會自行更新eventsJsonArray，但您絕不會告訴fullCalendar它已更改。

無論如何，沒有必要爲所有這些令人費解的詭計，處理下一個/上一個事件等等。當你想要幫助你時，你正在與fullCalendar作戰。請仔細閱讀文檔，瞭解您可以使用的事件源的類型 - 靜態數組就像您一樣，只是一個選項。你也可以定義一個自定義函數，它可以調用你的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 \'>'); 
      } 
     } 
    }); 
}); 

作爲一項額外的任務，您應該考慮將您的服務器端代碼更改爲接受完整的「開始」和「結束」日期，而不是僅僅幾個月。這樣做的好處是，如果您的用戶選擇「日」或「周」視圖，它只會下載那一天或一週的數據，這種數據效率更高，帶寬更少。

P.S.您還需要找到一種設置月份顯示名稱的不同方式 - 我只是通過服務器代碼預先向頁面中注入一個列表，而不是通過ajax來獲取。這些選項是預先設置的，當加載日曆和fullCalendar後會忽略嘗試更新它們，除非您明確重置整個monthNamesShort選項，但這樣做效率不高。

P.P.S.我使用內置選項 - https://fullcalendar.io/docs/display/showNonCurrentDates/替換了dayRender函數中的一些代碼。我建議您在嘗試創建可能實際可用的功能的解決方法之前，對該文檔進行更仔細的研究。