具有资源视图的完整日历在 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

本文关键字:不起作用 MVC javaScript 0x800a01bd NET 加载 ASP 视图 资源 日历      更新时间:2023-09-26

以下是代码详细信息,当我调试它时显示当前视图未定义 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"));

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

谁能帮帮我...

你必须

等到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>

然后它应该解决问题。快乐编码:)

我从这个链接中发现: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")"。希望对您有所帮助。