14

I am using the FullCalendar plugin in my site to display calender event. What I am trying to add now is a drop down menu with name and if the drop down menu change value then Reload the events based on the value of the menu.

If another words, by default i load events owned by me. The drop down menu will have all users in one menu. From that menu I can change the user name to view other users events on the same page.

I have tried to add a .change() event on the drop down menu and refetchEvents on the fullCalendar but it is not working.

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

The following 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' );
    });

});

Note that i pass my user_id value in my data method.

This code works on the load but when I change the user name in the drop down menu it does not reload the new events.

How can I get this to work?

4

4 回答 4

33
于 2013-09-10T22:12:58.647 回答
3

试试这个.....这个函数将再次触发事件ajax.....

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

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

}
于 2015-07-20T06:39:29.160 回答
0 
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);
            }
        });
    });
}
于 2016-01-20T07:41:13.593 回答
0

两个解决方案/答案都不适合我。但是，我在 SOF 中发现了另一个类似的问题和一个有效的答案。

 $('#calendar').fullCalendar('destroy');
 $('#calendar').empty();

这对我来说比其他任何方法都有效。

引用自：FullCalendar：如何重新创建/重新初始化 FullCalendar 或批量添加多个事件

于 2021-06-23T05:13:43.207 回答