在不刷新页面的情况下刷新日历数据 div

Posted

技术标签:

【中文标题】在不刷新页面的情况下刷新日历数据 div【英文标题】:Refresh Calendar Data Div Without Refreshing Page 【发布时间】:2020-06-08 02:31:27 【问题描述】:

关于如何刷新包含 FullCalendar 日历的 div 的任何信息?

我只想刷新 div 以检查它从数据库中提取的新数据,而无需编辑 ViewModel 或刷新页面。每 30 秒一次。

index.html

<div id='calendar' style="background-color: #fff;"></div>

@section scripts
    <script>
        document.addEventListener('DOMContentLoaded', function () 
            var calendarEl = document.getElementById('calendar');

            let calendar = new FullCalendar.Calendar(calendarEl, 
                plugins: ['resourceTimeGrid'],
                defaultView: 'resourceTimeGridDay',
                schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',
                businessHours: true,
                nowIndicator: true,
                minTime: "07:00:00",
                maxTime: "19:00:00",
                header: false,
                height: "parent",
                eventTextColor: '#fff',
                eventColor: '#005d99',
                resources: @Html.Raw(Json.Serialize(Model.Resources)),
                events:  @Html.Raw(Json.Serialize(Model.Events))
            );

            calendar.render();
        );
    </script>

【问题讨论】:

【参考方案1】:

您只需将数组列表分配给日历源,如下所示:

EventArray = jQuery.parseJSON(response.Data);
$('#calendar').fullCalendar('addEventSource', EventArray);
$('#calendar').fullCalendar('destroy');
loadcalendar();// Calendar init

【讨论】:

如何每 30 秒刷新一次?

以上是关于在不刷新页面的情况下刷新日历数据 div的主要内容,如果未能解决你的问题,请参考以下文章

如何在不重新加载页面的情况下刷新 div 和 mysql 代码

javascript - 有没有办法在不刷新页面的情况下在 div 上上传和预览图像(替换背景图像)?

如何使用 jQuery 在不刷新页面的情况下更新 cookie 值?

如何在不刷新整个页面的情况下刷新视图中的数据?有角度的

Ajax 功能无法在不刷新页面的情况下正常删除

如何在不刷新页面的情况下在屏幕上显示新记录?