c# - 通过 nuget 添加 fullCalendar

Question

我已经通过 nuget 添加了 fullCalendar 并尝试在我的项目中链接该类。

在捆绑配置中:

public static void RegisterBundles(BundleCollection bundles)
{
    bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                "~/Scripts/jquery-{version}.js"));

    bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                "~/Scripts/jquery.validate*"));

    // Use the development version of Modernizr to develop with and learn from. Then, when you're
    // ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
    bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                "~/Scripts/modernizr-*"));

    bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                "~/Scripts/bootstrap.js",
                "~/Scripts/respond.js"));

    bundles.Add(new StyleBundle("~/Content/css").Include(
                "~/Content/bootstrap.css",
                "~/Content/site.css"));

    bundles.Add(new StyleBundle("~/Content/fullcalendarcss").Include(
                "~/Content/themes/jquery.ui.all.css",
                "~/Content/fullcalendar.css"));

    //Calendar Script file

    bundles.Add(new ScriptBundle("~/bundles/fullcalendarjs").Include(
                "~/Scripts/jquery-{version}.js",
                "~/Scripts/fullcalendar.min.js"));

    // Set EnableOptimizations to false for debugging. For more information,
    // visit http://go.microsoft.com/fwlink/?LinkId=301862
    BundleTable.EnableOptimizations = true;
}

_布局:

@Styles.Render("~/Content/css")
@Styles.Render("~/Content/fullcalendarcss")
@Scripts.Render("~/bundles/fullcalendarjs")
@Scripts.Render("~/bundles/modernizr")

查看:

@section scripts
{
<script type="text/javascript">

    $(document).ready(function () {
        $('#calendar').fullCalendar({
            header: {
                left: 'prev,next,today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },
            defaultView: 'month',
            editable: true,
            allDaySlot: false,
            selectable: true,
            slotMinutes: 15

        });
    })

</script>
}

当我运行它时，我收到错误消息“对象不支持属性或方法‘fullCalendar’。

为什么日历不显示？

Answer 1

在您的 _Layout.cshtml 中，您应该确保对 ~/bundles/fullcalendarjs 的调用在 jquery 的调用 ~/bundles/jquery 之后运行。

本地化此调用出现的位置并在其后放置 ~/bundles/fullcalendarjs。fullcalendarcss 可以保留在您编写它的位置。它不依赖于 jquery.js。

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/fullcalendarjs")

在您的 View 中，您还需要在要查看的位置定义 ID 为“日历”的 div。

例如:

<div id="calendar">

</div>
@section scripts
{
    <script type="text/javascript">

    $(document).ready(function () {
        $('#calendar').fullCalendar({
            header: {
                left: 'prev,next,today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },
            defaultView: 'month',
            editable: true,
            allDaySlot: false,
            selectable: true,
            slotMinutes: 15

        });
    })

    </script>
}