如何爲每個視圖加載不同的事件源（json）？

Question

嗨，我有一個日曆，它必須爲每個視圖加載不同的JSON事件源。即「Month」的簡要來源（每天最多隻有3件物品），然後是「Day」和「Week」的更詳細的數據來源。

我想我可以捕獲視圖加載時，並基於哪個視圖，請撥removeEventSource()刪除上一個事件源，然後addEventSource()添加當前視圖的相關數據並刷新。 這是做這種事情的唯一方法嗎？如果是這樣...我如何檢測視圖已完成加載，所以我可以調用getView()來加載適當的事件源？

我見過有loading()回調，但我不認爲這是我需要的，我想知道整個日曆何時完成加載不僅僅是當前的數據。

感謝所有幫助

編輯：我能想到這樣做是刪除天/周/月fullcalendar按鈕和我自己更換從而重新加載PHP的屏幕標有可變說&calLoad=month or &calLoad=day唯一的其他途徑然後我可以加載一個不同的json feed，但這顯然是一個不太理想的做事方式。當視圖改變 http://arshaw.com/fullcalendar/docs/display/viewDisplay/

，那麼你可以檢查

Answer 1

有趣的是我只是posted an answer to an entirely different question恰好是解決這個。正如OP考慮的那樣，我使用addEventSource（）和removeEventSource()方法。

<script> 
var fcSources = { 
    courses: { 
       url: base+'accessfm/calendar/courses', 
       type: 'GET', 
       cache: true, 
       error: function() { alert('something broke with courses...'); }, 
       color: 'purple', 
       textColor: 'white', 
       className: 'course' 
      }, 
    requests: { 
       url: base+'accessfm/calendar/requests', 
       type: 'GET', 
       cache: true, 
       error: function() { alert('something broke with requests...'); }, 
       textColor: 'white', 
       className: 'requests' 
      }, 
    loads: { 
       url: base+'accessfm/calendar/loads', 
       type: 'GET', 
       cache: true, 
       error: function() { alert('something broke with loads...'); }, 
       color: 'blue', 
       textColor: 'white', 
       className: 'loads' 
      } 
}; 
$('#fullcalendar').fullCalendar({ 
    header: { 
       left: 'title', 
       center: 'agendaDay,agendaWeek,month', 
       right: 'today prev,next' 
      }, 
    defaultView: 'agendaWeek', 
    firstDay: 1, 
    theme: true, 
    eventSources: [ fcSources.courses, fcSources.requests, fcSources.loads ], 
    viewDisplay: function(view) { 
     if (lastView != view.name){ // view has been changed, tweak settings 
      if (view.name == 'month'){ 
       $('#fullcalendar').fullCalendar('removeEventSource', fcSources.loads) 
            .fullCalendar('refetchEvents');; 
      } 
      if (view.name != 'month' && lastView == 'month'){ 
       $('#fullcalendar').fullCalendar('addEventSource', fcSources.loads); 
      } 
     } 
     lastView = view.name; 
    } 
}); 
</script> 

Answer 2

viewDisplay是trggered view.name屬性附加傷害

Answer 3

感謝您對這個例子:)

我沒能做出這個（在上面的代碼中的事件數組）爲我工作，但我想出另一種方式來增加使用一些事件源您提供的代碼。

這是我的邏輯：

我的活動的主要來源是這樣的（這是從Fullcalendar的默認實例的事件源）：

events: function(start, end, callback) { 
      $.ajax({ 
       type: 'POST', 
       url: 'myurl', 
       dataType:'xml', 
       crossDomain: true, 
       data: { 
        // our hypothetical feed requires UNIX timestamps 
        start: Math.round(start.getTime()/1000), 
        end: Math.round(end.getTime()/1000),     
        'acc':'2',      
       }, 
       success: function(doc) {        
        var events = []; 
        var allday = null; //Workaround 
        var Editable = null; //Workaround 
        $(doc).find('event').each(function() 
        {      
         if($(this).attr('allDay') == "false") //Workaround 
           allday = false; //Workaround 
         if($(this).attr('allDay') == "true") //Workaround 
           allday = true; //Workaround 
         if($(this).attr('editable') == "false") //Workaround 
           Editable = false; //Workaround 
         if($(this).attr('editable') == "true") //Workaround 
           Editable = true; //Workaround      

         events.push({ 
          id: $(this).attr('id'), 
          title: $(this).attr('title'), 
          start: $(this).attr('start'), 
          end: $(this).attr('end'),      
          allDay: allday, 
          editable: Editable 
         });        
        }); 


        //calendar.fullCalendar('addEventSource', othersources.folgas); 
        //calendar.fullCalendar('addEventSource', othersources.ferias);  
        //calendar.fullCalendar('refetchEvents');    
        callback(events); 
       } 
      });  
     } 

現在我需要它來增加更多的來源和要做到這一點ouside日曆（從旁邊fullcalendar例子的日期變量）我提出像上面的代碼的變量，但與AJAX調用類似於我初級：）

var othersources = { 

    anothersource: {    
      events: function(start, end, callback) { 
      $.ajax({ 
       type: 'POST', 
       url: 'myurl',    
       data: { 
        // our hypothetical feed requires UNIX timestamps 
        start: Math.round(start.getTime()/1000), 
        end: Math.round(end.getTime()/1000),     
        'acc':'7',      
       },   
       success: function(doc) {  

        var events = []; 
        var allday = null; //Workaround 
        var Editable = null; //Workaround 
        $(doc).find('event').each(function() 
        {      
         if($(this).attr('allDay') == "false") //Workaround 
           allday = false; //Workaround 
         if($(this).attr('allDay') == "true") //Workaround 
           allday = true; //Workaround 
         if($(this).attr('editable') == "false") //Workaround 
           Editable = false; //Workaround 
         if($(this).attr('editable') == "true") //Workaround 
           Editable = true; //Workaround      

         events.push({ 
          id: $(this).attr('id'), 
          title: $(this).attr('title'), 
          start: $(this).attr('start'), 
          end: $(this).attr('end'),      
          allDay: allday, 
          editable: Editable 
         });        
        });       

        callback(events); //notice this 
       } 
      });  

     },     
      cache: true, 
      //error: function() { alert('something broke with courses...'); }, 
      color: 'green', //events color and stuff 
      textColor: 'white', 
      //className: 'course' 
     }  
} 

以下代碼與上面類似，屬於日曆proprietys（日曆變量內）的一部分：

  eventSources: [ othersources.anothersource ],   

viewDisplay: function(view) {  
     if (view.name == 'month'){ 
     // alert(view.name); 
      //calendar.fullCalendar('addEventSource', othersources.folgas); 
      calendar.fullCalendar('addEventSource', othersources.anothersource); 
      //calendar.fullCalendar('refetchEvents'); //Notice i'm not doing the refetch events. And its working for me. but i'm calling thi elsewhere, every time i make an action. So you must figure it out ;)   
     }