FullCalendar 未显示在 Asp.Net 核心 Razor 视图中

Question

我一直在关注这个视频教程：https://youtu.be/IpCEfbLiwag 希望实现一个包含 FullCalendar 的页面，其中包含来自数据库的 Task table 的日期。虽然没有必要通过视频来提供帮助，但我认为将源也包括在内是个不错的主意。

我还对我的代码进行了一些更改，所以这是我的 CalendarController。

public ActionResult Index()
    {
        return View();
    }
    public JsonResult GetEvents()
    {
        List<TaskModel> taskList = new List<TaskModel>();

        string connectionString = Configuration["ConnectionStrings:DefaultConnection"];
        using (SqlConnection connection = new SqlConnection(connectionString))
        {
            connection.Open();

            string sql = "ReadAllTasks";
            SqlCommand command = new SqlCommand(sql, connection);
            command.CommandType = CommandType.StoredProcedure;

            using (SqlDataReader dataReader = command.ExecuteReader())
            {
                while (dataReader.Read())
                {
                    TaskModel task = new TaskModel();
                    task.Id = Convert.ToInt32(dataReader["Id"]);
                    task.Name = Convert.ToString(dataReader["Name"]);
                    .....................
                    task.Comments = Convert.ToString(dataReader["Comments"]);
                    task.StartDate = Convert.ToDateTime(dataReader["StartDate"]);
                    task.EndDate = Convert.ToDateTime(dataReader["EndDate"]);
                    .....................
                    if (task.DependencyId == 1)
                    {
                        task.DependencyId = Convert.ToInt32(dataReader["DependencyId"]);
                    }
                    task.PhaseId = Convert.ToInt32(dataReader["PhaseId"]);
                    taskList.Add(task);
                }
            }

            connection.Close();
        }
        return new JsonResult(taskList);
    }

基本上，使用存储过程，我从 sql 服务器获取所有任务，将它们放在一个列表中，然后 return 它们以 Json 格式，如下所示：

（这是我调用 /Calendar/GetEvents 时得到的结果）

[{"id":3,"name":"New Task","isGate":false,"condition":"","precondition":"","comments":"","startDate":"2012-12-12T11:11:00","endDate":"2014-12-12T11:11:00","inProgress":true,"finished":false,"aborted":false,"assignedTo":"1fa2f008-f7fe-43ba-9c5d-fd9e67e995d3","assignedToName":null,"dependencyId":0,"phaseId":1},{"id":1004,"name":"New Task","isGate":false,"condition":"","precondition":"","comments":"","startDate":"2012-12-12T11:11:00","endDate":"2014-12-12T11:11:00","inProgress":false,"finished":true,"aborted":false,"assignedTo":"1fa2f008-f7fe-43ba-9c5d-fd9e67e995d3","assignedToName":null,"dependencyId":0,"phaseId":1},{"id":1008,"name":"New Task","isGate":false,"condition":"","precondition":"","comments":"","startDate":"2012-12-12T11:11:00","endDate":"2014-12-12T11:11:00","inProgress":false,"finished":true,"aborted":false,"assignedTo":"5a4b508f-5e12-418f-9ce4-8e3061b833fe","assignedToName":null,"dependencyId":0,"phaseId":2012},{"id":3004,"name":"New Task","isGate":false,"condition":"","precondition":"","comments":"","startDate":"2012-12-12T11:11:00","endDate":"2014-12-12T11:11:00","inProgress":false,"finished":false,"aborted":false,"assignedTo":"711f2295-d8a4-49dd-88be-ea7143aa11d8","assignedToName":null,"dependencyId":0,"phaseId":1}]

现在，可能是最重要的部分了。 Index.cshtml 包含以下内容：

<!DOCTYPE html>
<html lang='en'>
<head>
    <link href="https//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
    <link href="https//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.6.1/fullcalendar.min.css" type="text/css" rel="stylesheet" />
</head>
<body>

    <div class="container">
        <div class="row">
            <div class="col-xs-12">
                <br />
                <div id="bootstrapModalFullCalendar">
                </div>
            </div>
        </div>
    </div>
    <div id="fullCalModal" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">x</span> <span class="sr-only">close</span></button>
                    <h4 id="modalTitle" class="modal-title"></h4>
                </div>
                <div id="modalBody" class="modal-body"></div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <a class="btn btn-primary" id="eventUrl">Event Page</a>
                </div>
            </div>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.2/moment.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.6.1/fullcalendar.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script>
        $(document).ready(function () {
            $('#bootstrapModalFullCalendar').fullCalendar({
                header: {
                    left: '',
                    center: 'prev title next',
                    right: ''
                },
                eventClick: function (event, jsEvent, view) {
                    $('#modalTitle').html(event.Name);
                    $('#modalBody').html(event.Comments);
                    $('#eventUrl').attr('href', event.url);
                    $('#fullCalModal').modal();
                    return false;
                },
                events: '@Url.Action("GetEvents","Calendar")'
            });
        });
    </script>
</body>
</html>

当我转到 Calendar/Index 时，只有一个空白页面。我在控制台中没有收到任何错误或警告。出了什么问题？

Answer 1

您的数据似乎有误。当我将您的 HTML 与我的自定义数据（来自一个工作示例）一起使用时，它呈现得很好

Codepen

我想你需要看看这里： Event Source Object

您定义了不在全日历中的选项。您应该考虑在控制器中格式化文本。控制器可以 return 和应该工作的示例之一：

[{
    "id": 150,
    "start": "2019-10-28",
    "end": "2019-10-28",
    "title": "Some preformatted text returned by the controller",
    "allDay": true,
    "url": null,
    "color": null,
    "textColor": null,
    "backgroundColor": "green"
}]

FullCalendar 未显示在 Asp.Net 核心 Razor 视图中

FullCalendar not showing up in Asp.Net Core Razor View

html

javascript

c#

fullcalendar

fullcalendar-2