完整日历未在页面上显示/加载

Full Calendar not displaying/loading on page

本文关键字：显示 加载 日历      更新时间：2023-09-26

我正在尝试在我的网页上实现一个完整的日历，尽管当我导航到它应该所在的页面时，它根本不显示。

这是我的代码：

@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/fullcalendar")
@{
    ViewBag.Title = "Index";
}
<h2>Forecasts</h2>
<div id='calendar'></div>
<script>
    $(document).ready(function() {
        // page is now ready, initialize the calendar...
        $('#calendar').fullCalendar({
            // put your options and callbacks here
            weekends: false // will hide Saturdays and Sundays
        })
    });
</script>

以下是每个渲染包中的内容：

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
    ~/Scripts/jquery-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/fullcalendar").Include(
    "~/Scripts/moment.js",
    "~/Scripts/fullcalendar.js"));
bundles.Add(new StyleBundle("~/Content/css").Include(
    "~/Content/bootstrap.css",
    "~/Content/fullcalendar.css",
    "~/Content/site.css"));

图书馆版本：

jquery - 1.11.3
moment - 2.11.2
fullcalendar - 2.4.0
bootstrap - 3.0.0

任何帮助将不胜感激。

编辑：在下面添加了渲染的HTML代码片段。注意：所有敏感信息均已替换为"#"。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Index - ###</title>
    <link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/fullcalendar.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>
    <script src="/Scripts/modernizr-2.6.2.js"></script>
</head>
<body>
    <div class="navbar navbar-inverse">
        <div class="container-fluid">
            <div class="container">
                <div class="navbar-header">
                    <a class="navbar-brand" href="#">
                        <img src="/Resources/logo.png" width="75" height="35" alt="Logo" />
                    </a>
                </div>
                <p class="nav navbar-text navbar-right">
                    User: ###<br />
                    Date: ###
                </p>
            </div>
        </div>
    </div>
    <div class="navbar navbar-default">
        <div class="container-fluid">
            <div class="container">
                <ul class="nav navbar-nav">
                    <li><a href="/">#</a></li>
                    <li><a href="/#/#">#</a></li>
                    <li><a href="/#/#">#</a></li>
                    <li><a href="/#">#</a></li>
                    <li><a href="/#">#</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="container body-content">
        
<link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/fullcalendar.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>
<script src="/Scripts/jquery-1.11.3.js"></script>
<script src="/Scripts/moment.js"></script>
<script src="/Scripts/fullcalendar.js"></script>
<h2>#</h2>
<div id='calendar'></div>
<script>
    $(document).ready(function() {
        // page is now ready, initialize the calendar...
        $('#calendar').fullCalendar({
            // put your options and callbacks here
            weekends: false // will hide Saturdays and Sundays
        })
    });
</script>
        <hr />
        <footer>
            <p>&copy; 2016 - #.</p>
        </footer>
    </div>
    <script src="/Scripts/jquery-1.11.3.js"></script>
    <script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/respond.js"></script>
</body>
</html>

我设法解决了自己的问题，我相信与完整日历和引导/响应.js存在某种冲突。

在我的共享视图文件夹中，这些脚本在页面末尾呈现（我没有意识到）。

我删除了这些，它工作正常。

下面

显示了渲染包，下面显示了属于该捆绑包的脚本。

Scripts.Render("~/bundles/bootstrap")
RenderSection("scripts", required: false)
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/respond.js"></script>
相关文章：