以下是代码详细信息，当我调试它时，在初始化 defaultView: 'resourceDay' 时显示 currentView 未定义
<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>
以下是 bundle 的详细信息
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/
谁能帮帮我...
最佳答案
您必须等到 DOM加载完成。然后您可以应用您的脚本。因为，在母版页中，最好的做法是将所有脚本放在底部而不是标题处，因为解析器使用自上而下的方法，它会在正文完成加载后执行脚本。
添加您的脚本标签和所有@Script.Render </body> 之前的代码
首先添加所有@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>
那么应该就可以解决问题了。快乐编码:)
关于javascript - 加载时，带有资源 View 的 Fullcalendar 无法在 ASP.NET MVC 中工作 - 0x800a01bd - javaScript 运行时错误 : Object doesn't support this action，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27977434/