如何在从父视图过滤时重新渲染完整日历

Posted 2023-04-09

【中文标题】如何在从父视图过滤时重新渲染完整日历

【英文标题】：how to re-render fullcalendar while filtering from parent view

【发布时间】：2021-05-03 17:19:31

【问题描述】：

我想根据过滤器中选择的值呈现日历事件。我的过滤器控件在父视图中，我的日历在部分视图中。

我在下面调用 MVC 控制器：

@using (Ajax.BeginForm("_Filter", "Calendar", new AjaxOptions()  
            HttpMethod = "Get", 
            OnSuccess= "events(data)", , 
            new  @class = "form-inline"))

我的成功函数是：

function events(data) 
            eventdata = [];
            var $calendar = $('#calendar');
            response.forEach(function (index) 
                eventdata.push(index);
            )
            $calendar.addEventSource(eventdata, true);
            $calendar.refetchEvents();
        

我在 data 中获取过滤后的值。进入此功能时我的日历消失了，而且我收到以下错误

下面是我的日历代码：

<div id='calendar'></div>
    <!-- The script to initialize the calendar-->
    <script type="text/javascript">
$(function () 
events: function (start, sucessCallback, ErrorCallback) 
                    eventdata = [];
                                var sDate = moment(start.startStr).format('MM-DD-YYYY');
                                var eDate = moment(start.endStr).format('MM-DD-YYYY');

                    $.get("/Calendar/_Events?start=" + sDate + "&end=" + eDate, function (data) 
                    )
                        .done(function (data) 
                                $.each(response, function(index, row) 
                                        eventdata.push(row);
                                    );
                                    successCallback(eventdata);
                                )
                            .fail(function(err) 
                                );
                    
                
 calendar.render(); 
        );

【参考方案1】：

您将标签 ist 与 fullcalendar-5 一起使用。 但由于 4.x fullcalendar 不支持 JQuery。

所以

var $calendar = $('#calendar');
$calendar.addEventSource(eventdata, true);

不能再工作了。错误也正是如此。

替换为

 var calendarEl = document.getElementById('bootstrapModalFullCalendar'); 
 var calendar = new FullCalendar.Calendar(calendarEl,  ...
 calendar.addEventSource(eventdata); // not  second Paramenter!
 calendar.refetchEvents();

（当然你可以在你的函数中使用 JQuery。）

还有很多其他的变化，所以请阅读 5.x 的文档