Question

我正在尝试在我的网页上实现完整的日历，但是当我导航到应该存在的页面时，它根本就不会显示。

这是我的代码：

@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"));

Libary版本：

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>

Answer 1

我设法解决了自己的问题，我认为与fullcalendar和bootstrap / respond.js存在某种冲突。

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

我删除了这些并且工作正常。

下面显示了渲染包及其下方，显示了该捆绑包中的脚本。

Scripts.Render("~/bundles/bootstrap")
RenderSection("scripts", required: false)

<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/respond.js"></script>

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

1 个答案: