How to reload FullCalendar Contacts when changing menu value using jQuery?

Question

I use the FullCalendar plugin on my site to display calendar events. What I'm trying to add now is a drop-down menu with a name, and if the drop-down menu changes the value, then restart the events based on the value of the menu.

If there are other words, by default I load events that belong to me. The dropdown menu will have all users in one menu. From this menu I can change the username to view other user events on one page.

I tried adding the .change () event to the drop-down menu and refetchEvents on fullCalendar, but it does not work.

Can someone please help me with reloading these events by passing the value $ ('# users_menu').

Below is my current code

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

Please note that I pass my user_id value in my data method.

This code works with a load, but when I change the username in the drop-down menu, it does not reload new events.

How can I make this work?

Answer 1

I finally fixed it. I had to remove the EventSource, then addEventDource, and then refetchEvents to make this work, which is not cool :)

Here is my solution code for this

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

Try this ..... this function fires the ajax event again .....

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