如何在ASP.NET WebForms项目中实现FullCalendar？

我帮你梳理并修复代码中的问题，解决WebForms环境下FullCalendar的集成问题：

1. 修复后端代码（WebForm2.aspx.cs） #

首先补全截断的Event类，并修正WebMethod的配置和数据读取逻辑：

using System;
using System.Collections.Generic;
using System.Data;
using System.Data.SqlClient;
using System.Linq;
using System.Web.Services;
using System.Web.Script.Services; // 引入命名空间用于ScriptMethod

namespace WebApplication6
{
    public partial class WebForm2 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
        }

        // 添加ScriptMethod确保返回JSON格式，兼容WebForms的AJAX调用
        [WebMethod]
        [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
        public static List<Event> GetEvents()
        {
            DataTable dt = new DataTable();
            // 替换成你的实际数据库连接字符串
            using (SqlConnection sqlConn = new SqlConnection("Your_Actual_Connection_String"))
            {
                using (SqlCommand sqlCmd = new SqlCommand("usp_GetEvents", sqlConn))
                {
                    sqlCmd.CommandType = CommandType.StoredProcedure;
                    sqlConn.Open();
                    SqlDataAdapter ad = new SqlDataAdapter(sqlCmd);
                    ad.Fill(dt);
                    sqlConn.Close();
                }
            }

            return dt.AsEnumerable().Select(datarow => new Event()
            {
                EventId = Convert.ToInt32(datarow["EventId"]),
                Subject = Convert.ToString(datarow["Subject"]),
                Description = Convert.ToString(datarow["Description"]),
                Start = Convert.ToDateTime(datarow["Start"]),
                // 处理数据库中End字段可能为NULL的情况
                End = datarow["End"] != DBNull.Value ? Convert.ToDateTime(datarow["End"]) : (DateTime?)null,
                ThemeColor = Convert.ToString(datarow["ThemeColor"]),
                // 从数据库读取IsFullDay的值，不要硬编码
                IsFullDay = Convert.ToBoolean(datarow["IsFullDay"])
            }).ToList();
        }

        // 修正类定义，确保属性完整
        public class Event
        {
            public int EventId { get; set; }
            public string Subject { get; set; }
            public string Description { get; set; }
            public DateTime Start { get; set; }
            // 改为可空DateTime，兼容数据库NULL值
            public DateTime? End { get; set; }
            public string ThemeColor { get; set; }
            public bool IsFullDay { get; set; }
        }
    }
}

2. 调整前端AJAX和FullCalendar配置（WebForm2.aspx） #

WebForms的WebMethod返回结果会被包裹在d属性中，这是ASP.NET的默认安全行为，需要调整AJAX处理逻辑，同时补充Bootstrap资源（因为你用到了modal组件）：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="WebApplication6.WebForm2" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>FullCalendar WebForms Demo</title>
    <!-- 引入Bootstrap CSS，用于modal组件 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/js/bootstrap.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.css" rel="stylesheet" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.print.css" rel="stylesheet" media="print" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <div id="calendar" style="margin: 20px;"></div>

        <div id="myModal" class="modal fade" role="dialog">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title"><span id="eventTitle"></span></h4>
                    </div>
                    <div class="modal-body">
                        <p id="pDetails"></p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>

        <script>
            $(document).ready(function () {
                var events = [];
                $.ajax({
                    type: "POST",
                    dataType: "json",
                    contentType: "application/json; charset=utf-8",
                    url: "WebForm2.aspx/GetEvents",
                    success: function (response) {
                        // WebForms返回的真实数据在response.d中，必须遍历这个属性
                        $.each(response.d, function (i, v) {
                            var eventObj = {
                                title: v.Subject,
                                description: v.Description,
                                start: moment(v.Start),
                                color: v.ThemeColor,
                                allDay: v.IsFullDay
                            };
                            // 只有当End不为null时才添加该属性
                            if (v.End != null) {
                                eventObj.end = moment(v.End);
                            }
                            events.push(eventObj);
                        });
                        GenerateCalendar(events);
                    },
                    error: function (xhr, status, error) {
                        console.error("AJAX Error:", status, error);
                        console.error("Response Text:", xhr.responseText);
                        alert("加载事件失败，请检查控制台获取详细信息");
                    }
                });

                function GenerateCalendar(events) {
                    $('#calendar').fullCalendar({
                        contentHeight: 400,
                        defaultDate: new Date(),
                        timeFormat: 'h(:mm)a',
                        header: {
                            left: 'prev,next today',
                            center: 'title',
                            right: 'month,basicWeek,basicDay,agendaWeek,agendaDay' // 修正视图名称，原agenda不存在
                        },
                        eventLimit: true,
                        events: events,
                        eventClick: function (calEvent, jsEvent, view) {
                            $('#myModal #eventTitle').text(calEvent.title);
                            var $description = $('<div/>');
                            $description.append($('<p/>').html('<b>Start:</b>' + calEvent.start.format("DD-MMM-YYYY HH:mm a")));
                            if (calEvent.end != null) {
                                $description.append($('<p/>').html('<b>End:</b>' + calEvent.end.format("DD-MMM-YYYY HH:mm a")));
                            }
                            $description.append($('<p/>').html('<b>Description:</b>' + calEvent.description));
                            $('#myModal #pDetails').empty().html($description);
                            $('#myModal').modal('show'); // 显式调用show方法确保弹窗弹出
                        }
                    });
                }
            });
        </script>
    </form>
</body>
</html>

3. 关键注意事项 #

• WebMethod的d属性：ASP.NET WebForms会将WebMethod的返回值包装在d属性中，这是出于安全考虑，所以必须通过response.d获取实际数据。
• 可空DateTime处理：数据库中End字段可能为NULL，后端要处理成可空类型，前端也要判断是否存在该值再传递给FullCalendar，避免报错。
• Bootstrap资源：你的modal组件依赖Bootstrap的CSS和JS，必须引入才能正常显示弹窗。
• 视图名称修正：FullCalendar 3.x中没有agenda这个视图，替换为agendaWeek和agendaDay更符合官方定义。
• 连接字符串：记得把后端代码中的Your_Actual_Connection_String替换成你项目的真实数据库连接字符串。

4. 测试步骤 #

1. 确保存储过程usp_GetEvents能正确返回所有事件数据。
2. 运行WebForm2.aspx，打开浏览器控制台（F12），检查AJAX请求是否成功，有没有报错。
3. 如果事件没有显示，检查控制台的网络请求，查看返回的JSON格式是否正确。

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