fullcalendar 可以容纳的最大数据限制答案

【问题标题】：max limit of data fullcalendar can holdfullcalendar 可以容纳的最大数据限制
【发布时间】：2020-11-11 17:12:41
【问题描述】：

bootstrap fullcalendar 是否存在最大数据量。它似乎在 525 个条目后崩溃。它工作正常，直到达到这个限制。

它抛出了一个错误：

Error: {"Message":"There was an error processing the request.","StackTrace":"","ExceptionType":""}

我正在动态绑定我的数据。

<script type="text/javascript">
    $(document).ready(function () {
        var events = [];
        $.ajax({
            type: "POST",
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            url: "Dashboard.aspx/GetEvents",
            success: function (data) {
                $.each(data.d, function (i, v) {
                    events.push({
                        title: v.Title,
                        start: moment(v.VCStartTime),
                        end: v.VCEndTime != null ? moment(v.VCEndTime) : null
                    });
                })
                GenerateCalendar(events);//binds data to calendar
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert("Status: " + textStatus); alert("Error: " + XMLHttpRequest.responseText);
            }
            //error: function (error) {
            //    alert('failed');
            //}
        })

用于获取数据的 Asp.net 代码

[WebMethod]
public static List<events> GetEvents()
{

    DataSet ds = new APIProcedure().ByProcedure("calendar_sp", new string[] { "key" },
       new string[] { "getvalueForCalendar" }, "USPADDSETTING");

    return ds.Tables[0].AsEnumerable().Select(datarow =>
    new events()
    {
        Id = Convert.ToInt32(datarow["Id"]),
        Title = Convert.ToString(datarow["Title"]),
        Date = Convert.ToDateTime(datarow["Date"]),
        StartTime = Convert.ToDateTime(datarow["StartTime"]),
        EndTime = Convert.ToDateTime(datarow["EndTime"]),
    }
    ).ToList();

}

public class events
{
    public int Id { get; set; }
    public string Title { get; set; }
    public DateTime Date { get; set; }
    public DateTime StartTime { get; set; }
    public DateTime EndTime { get; set; }
}

【问题讨论】：

没有记录的限制。如果您认为存在内部错误，您也许可以在 fullCalendar GitHub 网站上提出问题。我听说有人加载更多。您遇到了什么具体错误？
P.S. 525 仍然是相当多的事件。你真的需要加载所有这些吗？我从您的代码中注意到，您似乎没有向服务器发送任何内容以将事件限制在特定的时间段内。事实上，您正在预加载事件，然后生成日历。推荐的方法是告诉 fullCalendar 你的事件的来源，然后它会在每次需要新事件时运行你的 AJAX 调用 - 它会给你一个开始和结束日期传递给服务器，你可以使用这些来返回仅在当前视图和日期范围内实际需要的事件。
...有关更多详细信息，请参阅fullcalendar.io/docs/events-function。这将比尝试一次加载 500 多个事件更有效，特别是如果其中许多事件实际上不会被用户查看。
@ADyson 我会在 github 上提出这个问题，看看是否有错误。 fullcalendar.io/docs/events-function 似乎是处理它的正确方法。谢谢
P.S.我注意到在 .NET 代码中，您正在创建一个结构，其中 Date、StartTime、EndTime 作为单独的属性。这意味着您必须在另一端使用 JavaScript 代码将其转换为 fullCalendar 所需的格式。既然您无论如何都在创建自定义数据结构，为什么不直接编写 .NET 代码以便它以正确的格式输出它呢？这将节省一些额外的代码和处理。然后您可以使用更简单的 JSON 提要技术 (fullcalendar.io/docs/events-json-feed) 直接将其链接到 fullCalendar，而无需额外的功能。

标签： c# asp.net json ajax fullcalendar

【解决方案1】：

$(document).ready(function () {
    $('#calendar').fullCalendar({
        contentHeight: 400,
        defaultDate: new Date(),
        timeFormat: 'h(:mm)a',
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,basicWeek,basicDay'
        },
        eventLimit: true,
        eventColor: '#87c9f0',
        events: function (start, end, timezone, callback) {//instead of getting all the data at once get data for visible part of calendar.

            var Date1 = new Date(start);
            let newdate = JSON.stringify(Date1);
            newStartdate = newdate.slice(1, 11);

            var Date2 = new Date(end);
            let newdate2 = JSON.stringify(Date2);
            newEnddate = newdate2.slice(1, 11);
            $.ajax({
                type: "POST",
                dataType: "json",
                contentType: "application/json; charset=utf-8",
                data: "{ 'StartDate': '" + newStartdate + "', 'EndDate': '" + newEnddate + "' }",//send data to code behind and get data according to start and end date
                url: "Dashboard.aspx/GetEvents",
                success: function (data) {
                    var events = [];
                    $.each(data.d, function (i, v) {
                        events.push({
                            title: v.Title,
                            start: moment(v.VCStartTime),
                            end: v.VCEndTime != null ? moment(v.VCEndTime) : null
                        });
                    })
                    callback(events);
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    alert("Status: " + textStatus); alert("Error: " + XMLHttpRequest.responseText);
                }
            })
        }

【讨论】：