Question

所以我试图在MVC 5 Web应用程序上实现FullCalendar我最近一直在努力，但我一直在撞墙。起初我有问题甚至在网站上渲染它的视图，我解决了它，但现在我有外观和功能的问题。 THIS

我使用了演示代码进行设置。

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <link href="~/Scripts/lib/cupertino/jquery-ui.min.css" rel="stylesheet" />
    <link href="~/Content/fullcalendar.min.css" rel="stylesheet" />
    <link href="~/Content/fullcalendar.print.min.css" rel="stylesheet" />
    <script src="~/Scripts/lib/moment.min.js"></script>
    <script src="~/Scripts/lib/jquery.min.js"></script>
    <script src="~/Scripts/jquery-ui-1.12.1.min.js"></script>
    <script src="~/Scripts/fullcalendar.min.js"></script>
    <script>
        $(document).ready(function () {
            $('#calendar').fullCalendar({
                theme: true,
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,agendaWeek,agendaDay,listMonth'
                },

                navLinks: true, // can click day/week names to navigate views
                editable: true,
                eventLimit: true, // allow "more" link when too many events
                events: [
                    {
                        title: 'All Day Event',
                        start: '2017-05-01'
                    },
                    {
                        title: 'Long Event',
                        start: '2017-05-07',
                        end: '2017-05-10'
                    },
                    {
                        id: 999,
                        title: 'Repeating Event',
                        start: '2017-05-09T16:00:00'
                    },
                    {
                        id: 999,
                        title: 'Repeating Event',
                        start: '2017-05-16T16:00:00'
                    },
                    {
                        title: 'Conference',
                        start: '2017-05-11',
                        end: '2017-05-13'
                    },
                    {
                        title: 'Meeting',
                        start: '2017-05-12T10:30:00',
                        end: '2017-05-12T12:30:00'
                    },
                    {
                        title: 'Lunch',
                        start: '2017-05-12T12:00:00'
                    },
                    {
                        title: 'Meeting',
                        start: '2017-05-12T14:30:00'
                    },
                    {
                        title: 'Happy Hour',
                        start: '2017-05-12T17:30:00'
                    },
                    {
                        title: 'Dinner',
                        start: '2017-05-12T20:00:00'
                    },
                    {
                        title: 'Birthday Party',
                        start: '2017-05-13T07:00:00'
                    },
                    {
                        title: 'Click for Google',
                        url: 'http://google.com/',
                        start: '2017-05-28'
                    }
                ]
            });

        });

    </script>
    <style>
        body {
            margin: 40px 10px;
            padding: 0;
            font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
            font-size: 14px;
        }

        #calendar {
            max-width: 900px;
            margin: 0 auto;
        }
    </style>
</head>

<body>
     <div id='calendar'></div>    
</body>
</html>

包含的捆绑包：

   //Calendar css file
        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-ui-1.12.1.min.js",
                  "~/Scripts/fullcalendar.min.js"));

渲染样式（在_layout的头部）：

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

脚本（正文的底部）：

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

使用Visual Studio上通过Package Manager安装的最新版本。

P.S。我创建日历作为局部视图，我通过以下方式在Index上进行渲染：

@Html.Partial("Date")

我在这里缺少什么？

控制台日志：THIS

jQuery FullCalendar plain在标题中看起来和未定义

0 个答案: