ASP.NET Boilerplate中Syncfusion Schedule控件API无法调用问题

• 控件版本API混用：视图中使用的是Syncfusion EJ2版本的<ejs-schedule>标签助手，JS代码却调用了旧版EJ1的ejSchedule()初始化方法，两套API完全不兼容，这是硬编码数据也无法渲染的核心原因。
• 接口配置错误：直接将ABP前端动态服务代理对象当作接口URL字符串传入DataManager，不是合法的请求地址，接口请求根本不会发送。
• 接口返回格式不匹配：现有后端接口仅返回单个decimal类型数值，而Schedule控件要求数据源必须是包含Id、Subject、StartTime、EndTime必填字段的日程对象数组，即使接口请求成功也无法渲染内容。
• 脚本语法错误：JS代码存在多余的DOM加载嵌套、闭包未闭合问题，会直接导致脚本执行中断。

1. 修正视图标签语法 #

移除<ejs-schedule>标签中多余的逗号，避免标签解析异常：

@{
    ViewBag.CurrentPageName = AppPageNames.Common.DayReportView;
}

@section Scripts
{
    <environment names="Development">
        <script src="/view-resources/Areas/App/Views/POSConfigurations/DayReportView/Index.js" asp-append-version="true"></script>
    </environment>
    <environment names="Staging,Production">
        <script src="/view-resources/Areas/App/Views/POSConfigurations/DayReportView/Index.min.js" asp-append-version="true"></script>
    </environment>
}

<div class="content d-flex flex-column flex-column-fluid" id="kt_content">
    <abp-page-subheader title="@L("DayReportView")"></abp-page-subheader>
    <ejs-schedule id="schedule" height="700px"></ejs-schedule>
</div>

2. 重写前端初始化逻辑 #

统一使用EJ2版本的Schedule API，优先用硬编码测试数据验证控件渲染能力，再通过ABP动态服务代理调用接口，禁止手动拼接无效URL：

(function () {
    $(function () {
        var _dayReportService = abp.services.app.dayReport;

        // 初始化Schedule控件
        var scheduleObj = new ej.schedule.Schedule({
            height: '700px',
            // 注意：JS月份从0开始计数，6月对应数值为5，原写法实际指向7月
            currentDate: new Date(2022, 5, 22),
            // 先加载硬编码测试数据，确认控件可正常渲染
            eventSettings: {
                dataSource: [
                    {
                        Id: 1,
                        Subject: '测试短溢数据',
                        StartTime: new Date(2022, 5, 22, 9, 0),
                        EndTime: new Date(2022, 5, 22, 11, 0),
                        ShortOverValue: 120.5
                    }
                ]
            },
          // 日期/视图切换时自动拉取对应范围数据
            actionComplete: function (args) {
                if (args.requestType === 'viewNavigate' || args.requestType === 'dateNavigate') {
                    loadRangeData(scheduleObj.activeView.startDate, scheduleObj.activeView.endDate);
                }
            }
        });
        scheduleObj.appendTo('#schedule');

        // 首次加载拉取当前视图日期范围数据
        loadRangeData(scheduleObj.activeView.startDate, scheduleObj.activeView.endDate);

        function loadRangeData(startDate, endDate) {
            // 直接调用ABP动态生成的服务代理，无需手动配置请求路径、跨域、防伪头
            _dayReportService.getShortOverFromDayReport(null, startDate, endDate).done(function (result) {
                // 将接口返回的业务数据转换为Schedule要求的日程格式
                var eventList = result.map(function(item, index){
                    return {
                        Id: index + 1,
                        Subject: '当日短溢金额：' + item.shortOverValue,
                        StartTime: item.reportDate,
                        EndTime: new Date(item.reportDate.getTime() + 3600 * 1000),
                        IsAllDay: true,
                        ShortOverValue: item.shortOverValue
                    }
                });
                // 清空旧数据，加载新数据
                scheduleObj.eventSettings.dataSource = eventList;
                scheduleObj.dataBind();
            });
        }
    });
})();

3. 调整后端接口逻辑 #

修改接口返回结构，返回符合日程格式的对象集合，避免前端转换异常：

public class DayReportAppService : myAppServiceBase, IDayReportAppService
{
    private readonly IDayReportRepository _dayReportRepository;
    public DayReportAppService(IDayReportRepository dayReportRepository)
    {
        _dayReportRepository = dayReportRepository;
    }

    public async Task<List<DayReportEventDto>> GetShortOverFromDayReport(Guid? posId, DateTime? startDate, DateTime? endDate)
    {
        var result = new List<DayReportEventDto>();
        // 替换为实际存储过程查询逻辑，拉取指定日期范围的报表数据
        var reportList = await _dayReportRepository.GetShortOverListFromSP(posId, startDate, endDate);
        
        foreach(var item in reportList)
        {
            result.Add(new DayReportEventDto
            {
                ReportDate = item.ReportDate,
                ShortOverValue = item.ShortOverValue
            });
        }
        return result;
    }
}

// 自定义返回DTO
public class DayReportEventDto
{
    public DateTime ReportDate { get; set; }
    public decimal ShortOverValue { get; set; }
}

• 先注释接口调用逻辑，仅保留硬编码测试数据，确认控件可正常渲染测试日程，排除控件初始化问题
• 打开浏览器开发者工具Network面板，确认接口请求正常发送到ABP动态服务默认路径/api/services/app/DayReport/GetShortOverFromDayReport
• 确认接口返回数据格式正确，无400/401/500错误
• 测试日期切换、视图切换功能，确认对应范围数据可正常加载

内容的提问来源于stack exchange，提问作者SS-Shahid-Abbas