带有资源视图的完整日历在 ASP.NET MVC 中不起作用，加载时 - 0x800a01bd - javaScript 运行时错误：对象不支持此操作答案

【问题标题】：Fullcalendar with resource view not working in ASP.NET MVC, on loading - 0x800a01bd - javaScript runtime error: Object doesn't support this action带有资源视图的完整日历在 ASP.NET MVC 中不起作用，加载时 - 0x800a01bd - javaScript 运行时错误：对象不支持此操作
【发布时间】：2015-01-16 04:43:55
【问题描述】：

以下是代码详细信息，当我调试它时显示 currentView 在我初始化 defaultView 时未定义：'resourceDay'

<html> 
<head>
        <meta charset="utf-8" />
        <title>@ViewBag.Title - My ASP.NET MVC Application</title>
        <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
        <meta name="viewport" content="width=device-width" />
        @Styles.Render("~/Content/themes/base/css")
        @Scripts.Render("~/bundles/jquery")
        @Scripts.Render("~/bundles/jqueryval")
        @Scripts.Render("~/bundles/jqueryui")
        @Scripts.Render("~/bundles/fullcal")

         <script type='text/javascript'>

             $(document).ready(function () {

                 var date = new Date();
                 var d = date.getDate();
                 var m = date.getMonth();
                 var y = date.getFullYear();

                 var calendar = $('#calendar').fullCalendar({
                     header: {
                         left: 'prev,next today',
                         center: 'title',
                         right: 'resourceDay'
                     },
                     titleFormat: 'ddd, MMM dd, yyyy',
                     defaultView: 'resourceDay',
                     selectable: true,
                     selectHelper: true,
                     select: function (start, end, allDay, event, resourceId) {
                         var title = prompt('Event Title:');
                         if (title) {
                             console.log("@@ adding event " + title + ", start " + start + ", end " + end + ", allDay " + allDay + ", resource " + resourceId);
                             calendar.fullCalendar('renderEvent',
                             {
                                 title: title,
                                 start: start,
                                 end: end,
                                 allDay: allDay,
                                 resourceId: resourceId
                             },
                             true // make the event "stick"
                         );
                         }
                         calendar.fullCalendar('unselect');
                     },
                     eventResize: function (event, dayDelta, minuteDelta) {
                         console.log("@@ resize event " + event.title + ", start " + event.start + ", end " + event.end + ", resource " + event.resourceId);
                     },
                     eventDrop: function (event, dayDelta, minuteDelta, allDay) {
                         console.log("@@ drag/drop event " + event.title + ", start " + event.start + ", end " + event.end + ", resource " + event.resourceId);
                     },
                     editable: true,
                     resources: [
                         {
                             name: 'Resource 1',
                             id: 'resource1'
                         },
                         {
                             name: 'Resource 2',
                             id: 'resource2'
                         },
                         {
                             name: 'Resource 3',
                             id: 'resource3'
                         }
                     ],
                     events: [
                         {
                             title: 'All Day Event 1',
                             start: new Date(y, m, d - 1),
                             end: new Date(y, m, d + 1),
                             resourceId: 'resource1'
                         },
                         {
                             title: 'Short Event 1',
                             start: new Date(y, m, d, 11, 30),
                             end: new Date(y, m, d, 13, 00),
                             allDay: false,
                             resourceId: 'resource1'
                         },
                         {
                             title: 'Short Event 2',
                             start: new Date(y, m, d + 1, 14, 00),
                             end: new Date(y, m, d + 1, 15, 00),
                             allDay: false,
                             resourceId: 'resource1'
                         },
                         {
                             title: 'All Day Event 2',
                             start: new Date(y, m, d - 2),
                             end: new Date(y, m, d - 1),
                             resourceId: 'resource2'
                         },
                         {
                             title: 'Lunch',
                             start: new Date(y, m, d, 12, 0),
                             end: new Date(y, m, d, 14, 0),
                             allDay: false,
                             resourceId: 'resource2'
                         },
                         {
                             title: 'All Day Event 3',
                             start: new Date(y, m, d),
                             resourceId: 'resource3'
                         },
                         {
                             title: 'Click for Google',
                             start: new Date(y, m, d, 16, 0),
                             end: new Date(y, m, d, 16, 30),
                             allDay: false,
                             url: 'http://google.com/',
                             resourceId: 'resource3'
                         }
                     ]
                 });

             });

        </script>
 <style type='text/css'>

            body {
                margin-top: 40px;
                text-align: center;
                font-size: 14px;
                font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
            }

            #calendar {
                width: 100%;
                margin: 0 auto;
            }

        </style>

    </head>
    <body>
        <div id="body">
            @RenderSection("featured", required: false)

                @RenderBody()


            <div id='calendar' style="border:dashed 2px red;"></div>
        </div>
    </body>
</html>

以下是捆绑包的详细信息

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

            bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
                        //"~/Scripts/jquery-ui-{version}.js", 
                        "~/Scripts/jquery-ui-1.8.23.custom.min.js"));

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

            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                        "~/Scripts/modernizr-*"));

            bundles.Add(new ScriptBundle("~/bundles/fullcal").Include(
                        "~/Scripts/fullcalendar.js"));

            bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
                        "~/Content/themes/base/jquery.ui.core.css",
                        "~/Content/themes/base/jquery.ui.resizable.css",
                        "~/Content/themes/base/jquery.ui.selectable.css",
                        "~/Content/themes/base/jquery.ui.accordion.css",
                        "~/Content/themes/base/jquery.ui.autocomplete.css",
                        "~/Content/themes/base/jquery.ui.button.css",
                        "~/Content/themes/base/jquery.ui.dialog.css",
                        "~/Content/themes/base/jquery.ui.slider.css",
                        "~/Content/themes/base/jquery.ui.tabs.css",
                        "~/Content/themes/base/jquery.ui.datepicker.css",
                        "~/Content/themes/base/jquery.ui.progressbar.css",
                        "~/Content/themes/base/jquery.ui.theme.css",
                        "~/Content/fullcalendar.css",
                        "~/Content/fullcalendar.print.css"));

此资源在不使用 ASP.NET MVC 时可以正常工作 http://www.ikelin.com/jquery-fullcalendar-resource-day-view/

谁能帮帮我...

【问题讨论】：

标签： javascript jquery asp.net-mvc asp.net-mvc-4

【解决方案1】：

您必须等到DOM 完成加载。然后你可以应用你的脚本。由于在您的母版页中，最好将所有脚本放在底部而不是标题处，因为解析器使用自上而下的方法，它会在正文完成加载后执行脚本。

在</body> 之前添加您的脚本标签和所有@Script.Render 代码

首先添加所有@Script.Render，然后添加<script></script>标签

<body>

       <div id='calendar' style="border:dashed 2px red;"></div>

        @Scripts.Render("~/bundles/jquery")
        @Scripts.Render("~/bundles/jqueryval")
        @Scripts.Render("~/bundles/jqueryui")
        @Scripts.Render("~/bundles/fullcal")

         <script type='text/javascript'>

             $(document).ready(function () {

                 var date = new Date();
                 var d = date.getDate();
                 var m = date.getMonth();
                 var y = date.getFullYear();

                 var calendar = $('#calendar').fullCalendar({
                     header: {
                         left: 'prev,next today',
                         center: 'title',
                         right: 'resourceDay'
                     },
                     titleFormat: 'ddd, MMM dd, yyyy',
                     defaultView: 'resourceDay',
                     selectable: true,
                     selectHelper: true,
                     select: function (start, end, allDay, event, resourceId) {
                         var title = prompt('Event Title:');
                         if (title) {
                             console.log("@@ adding event " + title + ", start " + start + ", end " + end + ", allDay " + allDay + ", resource " + resourceId);
                             calendar.fullCalendar('renderEvent',
                             {
                                 title: title,
                                 start: start,
                                 end: end,
                                 allDay: allDay,
                                 resourceId: resourceId
                             },
                             true // make the event "stick"
                         );
                         }
                         calendar.fullCalendar('unselect');
                     },
                     eventResize: function (event, dayDelta, minuteDelta) {
                         console.log("@@ resize event " + event.title + ", start " + event.start + ", end " + event.end + ", resource " + event.resourceId);
                     },
                     eventDrop: function (event, dayDelta, minuteDelta, allDay) {
                         console.log("@@ drag/drop event " + event.title + ", start " + event.start + ", end " + event.end + ", resource " + event.resourceId);
                     },
                     editable: true,
                     resources: [
                         {
                             name: 'Resource 1',
                             id: 'resource1'
                         },
                         {
                             name: 'Resource 2',
                             id: 'resource2'
                         },
                         {
                             name: 'Resource 3',
                             id: 'resource3'
                         }
                     ],
                     events: [
                         {
                             title: 'All Day Event 1',
                             start: new Date(y, m, d - 1),
                             end: new Date(y, m, d + 1),
                             resourceId: 'resource1'
                         },
                         {
                             title: 'Short Event 1',
                             start: new Date(y, m, d, 11, 30),
                             end: new Date(y, m, d, 13, 00),
                             allDay: false,
                             resourceId: 'resource1'
                         },
                         {
                             title: 'Short Event 2',
                             start: new Date(y, m, d + 1, 14, 00),
                             end: new Date(y, m, d + 1, 15, 00),
                             allDay: false,
                             resourceId: 'resource1'
                         },
                         {
                             title: 'All Day Event 2',
                             start: new Date(y, m, d - 2),
                             end: new Date(y, m, d - 1),
                             resourceId: 'resource2'
                         },
                         {
                             title: 'Lunch',
                             start: new Date(y, m, d, 12, 0),
                             end: new Date(y, m, d, 14, 0),
                             allDay: false,
                             resourceId: 'resource2'
                         },
                         {
                             title: 'All Day Event 3',
                             start: new Date(y, m, d),
                             resourceId: 'resource3'
                         },
                         {
                             title: 'Click for Google',
                             start: new Date(y, m, d, 16, 0),
                             end: new Date(y, m, d, 16, 30),
                             allDay: false,
                             url: 'http://google.com/',
                             resourceId: 'resource3'
                         }
                     ]
                 });

             });

        </script>
</body>

那么它应该可以解决问题。快乐编码:)

【讨论】：

感谢您的快速回复，仍然显示错误
localhost:12617/Scripts/fullcalendar.js 0x800a01bd 中第 357 行第 3 列未处理的异常 - JavaScript 运行时错误：对象不支持此操作
我这样添加</body> @Styles.Render("~/Content/themes/base/css") @Scripts.Render("~/bundles/jquery") @Scripts.Render("~/bundles/fullcal") <script type='text/javascript'> $(document).ready(function () { var date = new Date(); var d = date.getDate(); var m = date.getMonth(); var y = date.getFullYear(); var calendar = $('#calendar').fullCalendar({ : : }); </script> </html>
@IronBridge 您使用的是哪个版本的完整日历 2.2.5 ？
FullCalendar 版本 1.6.4

【解决方案2】：

我从这个链接中发现：https://forums.asp.net/t/1928230.aspx?0x800a01b6+Microsoft+JScript+runtime+error+Object+doesn+t+support+property+or+method+live+run+time+error+help+please+，如果您删除以下代码，它将起作用：“@Scripts.Render("~/bundles/jqueryui")”。希望对您有所帮助。

【讨论】：