Cambiar el origen del evento de Fullcalendar después del procesamiento

Question

He estado utilizando FullCalendar v1.5.3 para un reemplazo de MS SharePoint.

Estoy tratando de volver a procesar el origen del evento del calendario. Por ejemplo, cuando se carga la página por defecto, ésta es la llamada AJAX

/calendario/eventos/feedTasks? Start = 1338094800 & final = 1341118800 & _ = 1339103302326

Estamos utilizando un selecto caja para cambiar la fuente de eventos a sólo tareas Show (sacado de diferentes tabla), así que después de una selección de las llamadas ajax cambia a:

/calendario/eventos/feedEvents start = 1338094800 1341118800 & final =?_ = 1339103302326

Esto funciona. Sin embargo, en lugar de simplemente cambiar el origen del evento del calendario actual, crea una tabla de calendario duplicada (crea un nuevo div class="fc-content" div sobre el actual).

Esto es lo que tengo hasta ahora:

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

¿Qué me falta?

Answer 1

Existen algunos métodos llamados removeEventSource() y addEventSource() que le permiten ajustar la lista de fuentes. Tuve una situación similar en la que necesitaba ocultar una de las fuentes en la vista mensual, pero la mostraba en otros contextos, y encontré que eliminar y volver a agregar elementos en la matriz eventSources es la manera más limpia de lograr esto.

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' 
       } 
    }; 
<snip> 
    $('#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; 
     } 
    }); 

No copie ni pegue este código porque no resuelve exactamente su problema. Pero deberías poder tomar algunas ideas de eso. Modifique el hash fcSources para que se adapte a sus orígenes y, a continuación, ejemplifique el objeto de calendario completo con solo una de las fuentes y cámbielo utilizando los métodos removeEventSource y addEventSource.

Tenga en cuenta también el uso de refetchEvents(), eso es necesario para asegurarse de que la pantalla se restituya correctamente.

Answer 2

Gracias por este ejemplo :)

yo no era capaz de hacer esto (en el código de la matriz eventos) funciona para mí, pero yo encontrar otra manera de añadir fuentes de eventos utilizando una parte del código que previsto.

Esta es mi lógica:

Mi fuente primaria de eventos es la siguiente (esta es la fuente de los acontecimientos de los ejemplos por defecto de 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); 
       } 
      });  
     } 

Ahora lo necesitaba añadir más fuentes y para hacer esto ouside del calendario (al lado de las variables de fecha de ejemplos fullcalendar) hice una variable como el código anterior, pero con llamadas Ajax similar a mi primaria:)

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

El siguiente código es similar a la anterior y es parte de los proprietys calendario (en el interior variable de 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

Ésta es una vieja pregunta, pero yo estaba teniendo un problema similar y la respuesta de RET realmente ayudó, sobre la base de que remendé con un contador que reiniciar para asegurarse de que no añadiría fuentes de eventos duplicados

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

después de dos días lo conseguí, este es mi código:

$("#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); 
          } 
      );    
     } 
    }); 

Hay es una entrada de búsqueda, cuando el usuario presiona la tecla enter, se envía una publicación de ajax al controlador que devuelve una matriz os json values ​​(events). (perdón por mi inglés pobre)