Come ricaricare FullCalendar Contact quando il valore di un menu cambia usando jQuery?

Question

Sto utilizzando il plug-in FullCalendar nel mio sito per visualizzare l'evento calendario. Quello che sto cercando di aggiungere ora è un menu a discesa con il nome e se il menu a discesa cambia valore, quindi Ricarica gli eventi in base al valore del menu.

Se altre parole, per impostazione predefinita carico eventi di mia proprietà. Il menu a discesa avrà tutti gli utenti in un unico menu. Da quel menu posso cambiare il nome utente per vedere gli altri utenti sulla stessa pagina.

Ho provato ad aggiungere un evento .change() nel menu a discesa e refetchEvents sul fullCalendar ma non funziona.

Qualcuno può aiutarmi con il ricaricamento di questi eventi passando il valore di $ ('# users_menu').

Di seguito è riportato il mio codice corrente

$(document).ready(function() { 

    $('#calendar').fullCalendar({ 

     header: { 
      right: 'prev,next today', 
      center: 'title', 
      left: 'month,agendaWeek,agendaDay' 
     },  

     events: { 
      url: "ajax/getMyEvents.php", 
      type: 'POST', 
      data: { 
       user_id: $('#users_menu').val() 
      } 
     }, 
     timeFormat: 'h:mm TT{ - h:mm} TT', 
     defaultView: 'agendaDay', 


     eventDrop: function(event, delta, minuteDelta, allDay, revertFunc) { 

      if (!confirm("Are you sure about this change?")) { 
       revertFunc(); 
      } 
      updateEvent(event, delta, minuteDelta, allDay, 'Drop', revertFunc); 
     }, 

     eventResize: function(event, delta, minuteDelta, revertFunc) { 

      if (!confirm("Are you sure about this change?")) { 
       revertFunc(); 
      } 
      updateEvent(event, delta, minuteDelta, false, 'endResize', revertFunc); 
     } 


    }); 


    $('#users_menu').change(function(){ 

     $('#calendar').fullCalendar('refetchEvents'); 
    }); 

}); 

notare che io passo il mio valore id_utente nel mio metodo di dati.

Questo codice funziona sul caricamento ma quando si modifica il nome utente nel menu a discesa non si ricaricano i nuovi eventi.

Come posso farlo funzionare?

Answer 1

Ho finalmente risolto. Ho dovuto quindi removeEventSource addEventDource poi refetchEvents per questo lavoro, che non è cool :)

Ecco il mio codice soluzione per questo

$('#users_menu').change(function(){ 

     var events = { 
      url: "ajax/getMyEvents.php", 
      type: 'POST', 
      data: { 
       user_id: $(this).val() 
      } 
     } 

     $('#calendar').fullCalendar('removeEventSource', events); 
     $('#calendar').fullCalendar('addEventSource', events);   
     $('#calendar').fullCalendar('refetchEvents'); 
    }).change(); 

Answer 2

Prova questo ..... questa funzione si attiverà di nuovo evento ajax .....

$('#conrollerId').on('change', loadEvents); 

function loadEvents() { 
    $('#calendar').fullCalendar('removeEvents'); 
    $('#calendar').fullCalendar('refetchEvents'); 

} 

Answer 3

function bindCal(id) { 
    var ddlStudio1Value = $("#ddlStudio1 option:selected").val(); 
    $('#calendar').fullCalendar('addEventSource', function (start, end, timezone, callback) { 
     $.ajax({ 
      url: '@Url.Action("GetEvents", "FacultySchedule")', 
      data: "{'status':'','StudioId':'" + ddlStudio1Value + "','FacultyId':0,'start':'" + start + "', 'end':'" + end + "'}", 
      dataType: "json", 
      type: "POST", 
      async: false, 
      contentType: "application/json; charset=utf-8", 
      success: function (doc) { 
       var events = []; 
       var EventIds = "0"; 
       $(doc).each(function() { 
        $('#calendar').fullCalendar('removeEvents', $(this).attr('id')); 
        events.push({ 
         id: $(this).attr('id'), 
         title: $(this).attr('title'), 
         start: $(this).attr('start'), 
         end: $(this).attr('end'), 
         color: $(this).attr('color'), 
         textColor: $(this).attr('textColor'), 
         someKey: $(this).attr('someKey'), 
         allDay: $(this).attr('allDay'), 
         CreatedBy: $(this).attr('CreatedBy'), 
         StatusRemark: $(this).attr('StatusRemark'), 
         DurationMnt: $(this).attr('DurationMnt'), 
         Studio: $(this).attr('Studio') 
        }); 
       }); 
       callback(events); 
      }, 
      error: function (response) { 
       alert(response.responseText); 
      } 
     }); 
    }); 
}