2017-04-16 106 views
0

我一直在關注fullcalendar的文檔,並最終找到了從我的php後端數據庫返回json對象的方法。但我得到這個錯誤: 未捕獲TypeError:回調未定義jquery fullcalendar回調沒有定義錯誤

任何人都可以請幫忙嗎?

這是fullcalendar的代碼位,請注意,我正在使用react。這在ComponentDidMount位執行,正如我在使用fullcalendar的教程中看到的。

$(calendar).fullCalendar({ 
    header: { 
     left: 'none', 
     center: 'title', 
     right: 'today prev,next', 
     }, 
    height: 480, 
    width: 20, 
    editable: true, 
    eventAfterAllRender: function(event, element, view) { 
      alert(event.title); 
      var new_description = 
      '<div style="background-color: #4286f4"><strong>Title: </strong><br/>' + event.title + '<br/>'+ 
      '<strong>Month: </strong><br/>'+view.title+'<br/></div>'; 
     return (new_description); 
    }, 
    events: function(callback) { 
     let d = $(calendar).fullCalendar('getDate'); 
     let month = moment(d).format("MM"); 
     let year = moment(d).format("YYYY"); 
     $.ajax({ 
      url: '/api/phpfile', 
      dataType: 'json', 
      data: { 
      month: month, 
      year: year, 
      }, 
      success: function(doc) { 
      var events = []; 
      **$(doc).find('event').each(function() { 
       events.push({ 
        title: $(this).attr('title'), 
        start: $(this).attr('start') // will be parsed 
        }); 
       });**old code 
       alert(doc[29].title); 
       console.log(doc); 
       events.push({ 
        title: doc[0].title, 
        start: doc[0].start, 
       })** new code 
       callback(events); 
      }, 
     }); 
    } 
}); 

任何幫助,將不勝感激。我仍然對這個東西不熟悉。謝謝。

UPDATE:

我試圖改變代碼,看看發生了什麼顯示,現在我看到更有趣的behavior.It顯示標題爲正月顯示(本月),但是通過點擊接下來,不僅不會在下個月顯示正確的計數,而且日曆會凍結。它停止移動下一個或上一個。這是怎麼回事???

+0

您應該正確地縮進代碼(更容易實際看到是什麼),並且您的開始和結束括號和括號看起來不匹配在張貼的片段中。 –

+0

完成。他們確實匹配,我只是沒有添加最後兩個閉括號,我的壞。 – OrangeLime

回答

0

我實際上找到了解決這個問題的辦法。 對於那些可能需要解決這個或類似問題的人來說,這是有效的,而且非常簡單。這解決了在日曆中的所有/或某些日期更新事件的問題。

$(calendar).fullCalendar({ 
    header: { 
      left: 'none', 
      center: 'title', 
      right: 'today prev,next', 
    }, 
    height: 480, 
    width: 20, 
    editable: true, 
    eventRender: function(event, element, view) { 
     if(event.title == null){ 
      var new_description = '<div style="background-color: #d3d3d3;border-radius:10px;text-align:center;"><strong>Projects </strong><br/>0<br/>'; 
     }else{ 
      var new_description = '<div style="background-color: #fcd771;border-radius:10px;text-align:center;"><strong>Projects </strong><br/>' + event.title + '<br/>'; 
     } 
     return (new_description); 
    }, 
    events: function(start,end,timezone,callback) { 
     let d = $(calendar).fullCalendar('getDate'); 
     let month = moment(d).format("MM"); 
     let year = moment(d).format("YYYY"); 
     $.ajax({ 
     url: '/api/phpfile', 
     dataType: 'json', 
     data: { 
      month: month, 
      year: year, 
     }, 
     success: function(doc) { 
      var events = []; 
      for (var i=0;i<doc.length;i++){ 
       events.push({ 
       title: doc[i].title, 
       start: doc[i].start, 
       })//this is displaying!!! 
      } 
      callback(events); 
     }, 
     }); 
    }, 
}); 

當我做對DOC一個的console.log,我發現這是從字面上後端結果JSON對象。你所要做的就是讓for循環遍歷該對象的長度並將其推入事件數組,並執行該數組的回調函數。您可以使用eventRender以任何方式渲染它。這真的很有幫助。 在幫助解決這樣的問題方面,文檔確實很差,因爲那裏的代碼不能很好地解釋語法,並且可以向新插件發送給這個插件。

1
events: function(callback) 

不正確。

按照文件在https://fullcalendar.io/docs/event_data/events_function/的事件函數正確的簽名是:

function(start, end, timezone, callback) { 

第一個參數,這你命名「回調」,實際上是當前日曆視圖的開始日期。因此將其作爲函數調用將不起作用。也不需要做你正在做的工作來計算日曆上顯示的當前開始/結束日期 - 你忽略的開始/結束參數,這些參數在盤子上交給你。

像這樣的東西應該工作更順利:

events: function(start, end, timezone, callback) { 
    let month = start.format("MM"); 
    let year = start.format("YYYY"); 
    $.ajax({ 
     url: '/api/phpfile', 
     dataType: 'json', 
     data: { 
     month: month, 
     year: year, 
     }, 
     success: function(eventData) { 
      console.log(JSON.stringify(eventData)); //just to give a visual on the data. From what you were doing in your example it looks like your data is already in a format suitable to be used by fullCalendar, so no need to push it all into another array 
      callback(eventData); 
     }, 
     error: function(jqXHR, textStatus, errorThrown) 
     { 
     alert("Error when fetching events: " + textStatus + " - " + errorThrown); 
     } 
    }); 
} 

你可以進一步改善這一點,雖然。你的後端只收到一個月和一年。這是不靈活的 - 如果您修改它以接受名爲startend的兩個日期變量,並返回落在這些日期之間的事件數據,那麼您可以使用fullCalendar提供的少得多的詳細語法來自動連接到JSON訂閱源:

events: '/api/phpfile' 

在這種情況下,FullCalendar會自動將「開始」和「結束」值作爲GET參數發送到端點URL。你所有的PHP所要做的就是讀取這些變量並返回適當的JSON。它還可讓您使用除「月」視圖以外的視圖,因爲您可以返回更多特定時間段的數據。有關更多詳細信息,請參閱https://fullcalendar.io/docs/event_data/events_json_feed/