FullCalendar Asp.Net WebForms

问题

I'm trying to implement FullCalendar on my ASP.NET WebForms Project. I've seen some examples to achieve this without any luck since they're for MVC which I'm not used to.

My Events Database Table:

EventId (int)
Subject (nvarchar (100))
Description (nvarchar (300))
Start (datetime)
End (datetime)
ThemeColor ((nvarchar (10))
IsFullDay (bit)

WebForm2.aspx

<%@ 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></title>
    <script src="jquery.min.js"></script>
    <script src="jquery-ui.min.js"></script>
</head>

<body>
    <form id="form1" runat="server">
        <div id="calendar">
        </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>

        <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>

        <script>
            $(document).ready(function () {
                var events = [];
                $.ajax({
                    type: "POST",
                    dataType: "json",
                    contentType: "application/json; charset=utf-8",
                    url: "WebForm2.aspx/GetEvents",
                    success: function (data) {
                        $.each(data, function (i, v) {
                            events.push({
                                title: v.Subject,
                                description: v.Description,
                                start: moment(v.Start),
                                end: v.End != null ? moment(v.End) : null,
                                color: v.ThemeColor,
                                allDay: v.IsFullDay
                            });
                        })

                        GenerateCalendar(events);
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        alert("Status: " + textStatus); alert("Error: " + XMLHttpRequest.responseText);
                    }
                    //error: function (error) {
                    //    alert('failed');
                    //}
                })

                function GenerateCalendar(events) {
                    //$('#calendar').fullCalendar('destroy');
                    $('#calendar').fullCalendar({
                        contentHeight: 400,
                        defaultDate: new Date(),
                        timeFormat: 'h(:mm)a',
                        header: {
                            left: 'prev,next today',
                            center: 'title',
                            right: 'month,basicWeek,basicDay,agenda'
                        },
                        eventLimit: true,
                        eventColor: '#378006',
                        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();
                        }
                    })
                }
            })
        </script>
    </form>
</body>
</html>

WebForm2.cs

using System;
using System.Collections.Generic;
using System.Data;
using System.Data.SqlClient;
using System.Linq;
using System.Web.Services;
using System.Web.UI.WebControls;

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

        }

        [WebMethod]
        //[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
        public static List<events> GetEvents()
        {
            DataTable dt = new DataTable();

            using (SqlConnection sqlConn = new SqlConnection("ConnectionString"))
            {
                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 events()
            {
                EventId = Convert.ToInt32(datarow["EventId]),
                Subject = Convert.ToString(datarow["Subject"]),
                Description = Convert.ToString(datarow["Description"]),
                Start = Convert.ToDateTime(datarow["Start"]),
                End = Convert.ToDateTime(datarow["End"]),
                ThemeColor = Convert.ToString(datarow["ThemeColor"]),
                IsFullDay = false
            }
            ).ToList();
        }

        public class events
        {
            public int EventId { get; set; }
            public string Subject { get; set; }
            public string Description { get; set; }
            public DateTime Start { get; set; }
            public DateTime End { get; set; }
            public string ThemeColor { get; set; }
            public bool IsFullDay { get; set; }
        }
    }
}

Using this code, the events are loaded from the Database (i've put a breakpoint on it) but not populated into the Calendar. The Calendar does show but without the events. Can someone help me out with this?

Array1

Array2

Here are couple of images

来源：https://stackoverflow.com/questions/50590383/fullcalendar-asp-net-webforms

标签

.net

webforms

fullcalendar