web-dev-qa-db-ja.com

jQueryを使用してメニューの値が変更されたときにFullCalendar Contactをリロードする方法は？

私のサイトで FullCalendar プラグインを使用して、カレンダーイベントを表示しています。ここで追加しようとしているのは、名前の付いたドロップダウンメニューです。ドロップダウンメニューの値が変更された場合は、メニューの値に基づいてイベントをリロードします。

別の言葉で言えば、デフォルトで私が所有するイベントをロードします。ドロップダウンメニューでは、1つのメニューにすべてのユーザーが含まれます。そのメニューから、ユーザー名を変更して、同じページで他のユーザーのイベントを表示できます。

ドロップダウンメニューに.change（）イベントを追加し、fullCalendarにrefetchEventsを追加しようとしましたが、機能しません。

誰かが$（ '＃users_menu'）の値を渡して、このイベントをリロードするのを手伝ってくれませんか？.

以下は私の現在のコードです

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

});

データメソッドでuser_id値を渡すことに注意してください。

このコードはロードで機能しますが、ドロップダウンメニューでユーザー名を変更しても、新しいイベントは再ロードされません。

これを機能させるにはどうすればよいですか？

jqueryfullcalendar
12
Jaylen

ようやく修正しました。

removeEventSourceしてから√次にrefetchEventsこれが機能するためにはクールではありません:)

これが私のソリューションコードです

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

これを試してください.....この関数はイベントajaxを再び起動します.....

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

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

}
3
Shanka SMS
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);
            }
        });
    });
}
0
DARSHAN SHINDE