Jak ponownie załadować FullCalendar Kontakt, gdy wartość menu zmienia się za pomocą jQuery?

Question

Używam wtyczki FullCalendar w mojej witrynie, aby wyświetlić zdarzenie kalendarza. Próbuję teraz dodać menu rozwijane z nazwą i jeśli menu rozwijane zmieni wartość, a następnie ponownie załaduj zdarzenia w oparciu o wartość menu.

Jeśli inne słowa, domyślnie ładuję wydarzenia należące do mnie. Menu rozwijane będzie miało wszystkich użytkowników w jednym menu. Z tego menu mogę zmienić nazwę użytkownika, aby wyświetlić wydarzenia innych użytkowników na tej samej stronie.

Próbowałem dodać wydarzenie .change() z rozwijanego menu i refetchEvents na fullCalendar, ale to nie działa.

Czy ktoś może mi pomóc w ponownym załadowaniu tego zdarzenia, przekazując wartość $ ("# users_menu").

Poniżej jest mój bieżący kod

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

}); 

Zauważ, że mogę przekazać moje wartości USER_ID w moim sposobie danych.

Ten kod działa na ładunek, ale po zmianie nazwy użytkownika z rozwijanego menu nie ładuje nowych zdarzeń.

Jak mogę to uruchomić?

Answer 1

W końcu to naprawiłem. Musiałem removeEventSource następnie addEventDource następnie refetchEvents dla tej pracy, która nie jest cool :)

Tu jest mój kod rozwiązanie tego

$('#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

Spróbuj ..... ta funkcja będzie ponownie odpalić ajax zdarzeń .....

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