如何通过返回JSON的ASMX接口为FullCalendar加载事件？

你的代码核心问题是异步请求的执行顺序错误，还可能存在JSON数据未正确解析的问题，具体如下：

1. 异步请求导致日历初始化时无数据可用 #

$.ajax是异步操作，你发起请求后立刻就创建并渲染了FullCalendar，此时success回调还没执行，evt变量根本没有被赋值（此时evt为未定义状态），所以日历自然无法加载任何事件。

2. 潜在的JSON字符串未解析问题 #

ASMX返回的response.d如果是JSON格式的字符串（而非已解析的JavaScript对象），直接赋值给evt的话，FullCalendar无法识别——它需要的是事件对象数组，不是字符串。

修正后的代码 #

把日历的初始化和渲染逻辑放到ajax的success回调内，确保数据返回后再初始化日历；同时增加数据类型判断，确保传入FullCalendar的是合法的事件对象数组：

$(document).ready(function () {
    var datefrom = '2023-04-01';
    var dateto = '2023-04-30';

    var jsonInput = { datefrom: datefrom, dateto: dateto };
    var data = JSON.stringify(jsonInput);

    $.ajax({
        type: "POST",
        url: "GetCalendarData.asmx/CalendarData",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        data: data,
        success: function (response) {
            // 处理可能的JSON字符串解析
            var evt = typeof response.d === 'string' ? JSON.parse(response.d) : response.d;
            
            // 数据就绪后初始化并渲染日历
            var calendarEl = document.getElementById('calendar');
            var calendar = new FullCalendar.Calendar(calendarEl, {
                initialDate: '2023-04-01',
                editable: true,
                selectable: true,
                businessHours: false,
                eventLimit: true,
                eventLimitText: 'more',
                eventLimitClick: 'popover',
                dayMaxEvents: true,
                events: evt
            });
            calendar.render();
        },
        error: function (xhr, status, error) {
            // 更详细的错误提示，方便排查问题
            alert('请求错误: ' + status + ' - ' + error);
        }
    });
});

额外检查点 #

• 确认response.d返回的事件数据格式符合FullCalendar要求：每个事件至少包含title（事件标题）和start（事件开始日期）字段，示例格式：{ title: "部门会议", start: "2023-04-15" }
• 用console.log(evt)代替alert在浏览器控制台查看数据结构，alert仅能显示字符串，无法直观展示数组/对象的真实结构

内容的提问来源于stack exchange，提问作者DKX4HWS