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

Posted 2023-04-12

【中文标题】fullcalendar 可以容纳的最大数据限制

【英文标题】：max limit of data fullcalendar can hold

【发布时间】：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，而无需额外的功能。

【参考方案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);
                
            )