Modifica origine evento Fullcalendar dopo il rendering

Question

Ho utilizzato FullCalendar v1.5.3 per una sostituzione di MS SharePoint.

Sto tentando di rieseguire il rendering dell'origine dell'evento del calendario. Per esempio, quando la pagina viene caricata di default questa è la chiamata AJAX

/calendario/eventi/feedTasks? Start = 1338,0948 milioni & fine = 1341,1188 milioni & _ = 1339103302326

Stiamo usando una select casella per cambiare la sorgente eventi per soli Mostra attività (tirato da tavolo diverso), così dopo una selezione delle modifiche ajax chiamata a:

/calendario/eventi/feedEvents Start = 1338,0948 milioni & fine = 1341,1188 milioni 012.322.492?_ = 1339103302326

Questo funziona. Tuttavia, anziché modificare semplicemente la sorgente di eventi del calendario corrente, crea una tabella di calendario duplicata (crea un nuovo div class="fc-content" div in cima a quello corrente).

Questo è quello che ho finora:

$("#TaskSelector").change(onSelectChange); 
    function onSelectChange(){ 
     $('#calendar').fullCalendar({ 
      events: '/calendar/events/' + $('#TaskSelector').val() 
     }); 
    } 
}); 

Che cosa mi manca?

Answer 1

Esistono alcuni metodi chiamati removeEventSource() e addEventSource() che consentono di modificare l'elenco delle fonti. Ho avuto una situazione simile in cui avevo bisogno di nascondere una delle fonti nella vista mensile, ma mostrarla in altri contesti, e ho trovato la rimozione e la riaggiunta di elementi nella matrice eventSources il modo più pulito per ottenere ciò.

Non copiare/incollare questo codice, perché non risolve esattamente il tuo problema. Ma dovresti essere in grado di prendere alcune idee da esso. Modifica l'hash fcSources in base alle tue origini, quindi crea un'istanza dell'oggetto fullCalendar con una sola delle fonti e scambialo utilizzando i metodi removeEventSource e addEventSource.

Nota anche l'uso di refetchEvents() - è necessario assicurarsi che il display sia rerenderizzato correttamente.

Answer 2

Grazie per questo esempio :)

non ero in grado di fare questo (nel codice sopra la matrice eventi) lavoro per me, ma ho dato un altro modo per aggiungere sorgenti di eventi utilizzando parte del codice che si fornito.

Questa è la mia logica:

La mia fonte primaria degli eventi è questo (questa è la fonte eventi dagli esempi di default del 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); 
       } 
      });  
     } 

Ora avevo bisogno di aggiungere più fonti e per fare questo ouside il calendario (accanto alle variabili data da esempi fullcalendar) ho fatto una variabile come il codice di cui sopra, ma con l'Ajax chiamate simile al mio primario:)

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' 
     }  
} 

Il seguente codice è simile al precedente e fa parte delle proprietys calendario (all'interno variabile calendario):

  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 ;)   
     } 

Answer 3

Questa è una vecchia questione, ma ho avuto un problema simile e la risposta di RET veramente aiutato, sulla base di tale ho patchato con un contatore che reimpostato per assicurarsi che non aggiungerebbe fonti di eventi duplicati

count = 0; 
fcSources = [wholePlan, allActivities]; 

//calendar initialization { 
viewRender: function(view) { 

     if (view.name == 'agendaWeek' || view.name == 'month') { 
      $('#fullcal').fullCalendar('removeEventSource', fcSources.allActivities); 

      if (count > 0) { 
       $('#fullcal').fullCalendar('addEventSource', fcSources.wholePlan); 
      } 

      count = 0; 
     } 

     if (view.name == 'agendaDay' && count == 0) { 
      $('#fullcal').fullCalendar('addEventSource', fcSources.allActivities); 
      $('#fullcal').fullCalendar('removeEventSource', fcSources.wholePlan); 

      count += 1; 
    } 
} 

Answer 4

dopo due giorni ho capito, questo è il mio codice:

$("#search").on("keypress", function(evt){ 
     if(evt.keyCode == 13) { 
      var term = $(this).val(); 
      $.post(route_search, 
          { 
           term: term, 
           async: false 
          }, 
          function(data) { 
           var parsed = $.parseJSON(data); 
           $('#calendar').fullCalendar('removeEvents'); 
           $('#calendar').fullCalendar('addEventSource', parsed); 
          } 
      );    
     } 
    }); 

ci è un input di ricerca, quando l'utente preme il tasto invio, un post dell'ajax viene inviato al controller che restituisce un array os valori json (eventi). (mi dispiace per il mio povero inglese)