当菜单值更改时如何使用 jQuery 重新加载 FullCalendar Contact？

Question

我正在我的网站中使用 FullCalendar 插件来显示日历事件。我现在尝试添加的是一个带有名称的下拉菜单，如果下拉菜单更改值，则根据菜单的值重新加载事件。

换句话说，默认情况下我加载我拥有的事件。下拉菜单将所有用户集中在一个菜单中。从该菜单中，我可以更改用户名以查看同一页面上的其他用户事件。

我尝试在下拉菜单上添加 .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 值。

此代码适用于加载，但是当我更改下拉菜单中的用户名时，它不会重新加载新事件。

我怎样才能让它发挥作用？

Answer 1

我终于修好了。

我必须

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();

Answer 2

试试这个.....这个函数将再次触发事件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);
            }
        });
    });
}

Answer 4

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

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

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

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

Answer 5

在我的日历中，重新获取事件不起作用，我删除了该事件并添加了新事件，如下所示。

删除活动

$('#calendar').fullCalendar('removeEvents', data.event.id);

您需要传递事件 ID 才能将其删除。

添加活动

$('#calendar').fullCalendar('renderEvent', data.task);

我正在传递任务对象来添加事件，以及从后端如何传递对象

$task = [
          'id' => $task->id,
          'start' => $task->due_date,
          'end' => $task->due_date,
           'title' => $task->name,
           'color' => '#135846'
        ];

如果您想逐步学习它，我有完整的课程，我在日历中执行创建、显示、编辑、更新和删除功能。您可以通过以下链接访问该系列。

https://www.youtube.com/watch?v=rujgiTHLCqw&list=PLDc9bt_00KcL9j9VoMcccR4HMF3JtYndd&pp=iAQB