Fatal编程技术网
  • javascript/
  • Javascript 完整日历未显示在Asp.Net Core Razor视图中

Javascript 完整日历未显示在Asp.Net Core Razor视图中

javascript c# html fullcalendar

Javascript 完整日历未显示在Asp.Net Core Razor视图中,javascript,c#,html,fullcalendar,fullcalendar-2,Javascript,C#,Html,Fullcalendar,Fullcalendar 2,我一直在遵循这个视频教程：希望实现一个包含完整日历的页面，其中包含数据库中任务表中的日期。虽然没有必要通过视频来帮助解决问题，但我认为也包括源代码也是一个不错的主意 我还对代码进行了一些修改，所以这里是我的CalendarController 现在，可能是最重要的部分。Index.cshtml包含以下内容： <!DOCTYPE html> <html lang='en'> <head> <link href="https//maxcdn.boot

我一直在遵循这个视频教程：希望实现一个包含完整日历的页面，其中包含数据库中任务表中的日期。虽然没有必要通过视频来帮助解决问题，但我认为也包括源代码也是一个不错的主意

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

现在，可能是最重要的部分。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>
当我转到日历/索引时，只有一个空白页。我的控制台中没有收到任何错误或警告。出了什么问题？

您的数据似乎有误。当我将您的HTML与工作示例中的自定义数据一起使用时，它呈现的非常好

我想你需要看看这里：

您可以定义不在fullcalendar中的选项。 应该考虑在控制器中格式化文本。控制器可以返回且应该工作的一个示例：

[{
    "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？版本4已经发布了很长一段时间，这是一个很大的改进。尽量不要遵循过时的教程。 
<!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>

[{
    "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"
}]