我只能显示FullCalendar上的第一个事件。数据来自SQL Server中的数据库，使用实体框架中的模型。然后，我向视图返回了一个JSON对象。有人能给我指正确的方向吗？这样我就可以显示数据库中的所有事件了？
日历视图
<!DOCTYPE html>
@{
Layout = null;
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.js"></script>
<style type="text/css">
body {
margin: 0;
padding: 0;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
font-size: 14px;
}
#top {
background: #eee;
border-bottom: 1px solid #ddd;
padding: 0 10px;
line-height: 40px;
font-size: 12px;
}
#calendar {
max-width: 900px;
margin: 40px auto;
padding: 0 10px;
}
</style>
<script type="text/javascript">
/*Get data from the database and load it on the FullCalendar*/
$(window).load(function () {
jQuery(document).ready(function ($) {
var events = [];
$.ajax({
type: "GET",
url: "@Url.Action("GetEvents", "Calendar")", //Get the data
contentType: "application/json",
success: function (data) {
$.each(data, function (i, v) {
events.push({
title: v.ProjectName,
start: moment(v.DateCreated),
});
GenerateCalendar(events);
})
},
error: function (error)
{
alert('Error');
}
});
function GenerateCalendar(events) {
$('#calendar').fullCalendar({
height: 666,
nowIndicator: true,
defaultView: 'agendaWeek',
columnHeaderFormat: 'ddd D MMM',
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultView: 'month',
selectable: true,
editable: false,
events: events //This allows the calendar to display only the first event.
});
}
});
});
</script>
</head>
<body>
<div id="calendar"></div>
</body>
</html>
日历控制器
public JsonResult GetEvents()
{
using (FacilityRequestEntities db = new FacilityRequestEntities())
{
var events = db.Dashboards.ToList();
return new JsonResult { Data = events, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
}
}
数据库表，SQL Server
FaspNumberId Projectname CurrentStatus DateCreated RequestorName
001 AAA Approved 2018-11-30 01:40:00 John
002 BBB Pending 2018-12-01 01:16:00 Eric
003 CCC Approved 2018-12-01 03:46:00 Marie
004 DDD Disapproved 2018-12-02 05:52:00 Anne
我对CalendarView做了一些更改，就解决了这个问题。请参阅下面的解决方案：
<!DOCTYPE html>
@{
Layout = null;
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.js"></script>
<style type="text/css">
body {
margin: 0;
padding: 0;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
font-size: 14px;
}
#top {
background: #eee;
border-bottom: 1px solid #ddd;
padding: 0 10px;
line-height: 40px;
font-size: 12px;
}
#calendar {
max-width: 900px;
margin: 40px auto;
padding: 0 10px;
}
</style>
<script type="text/javascript">
$(window).load(function () {
$(document).ready(function() {
// Fetch our events
$.ajax({
url: "@Url.Action("GetEvents", "Calendar")", //Get the data from the controller,
method: "GET",
datatype: "json",
}).done(function (data) {
// Parse our events into an object called events that will later be used to initialize FullCalendar
var events = [];
$.each(data, function (i, v) {
events.push({
title: v.ProjectName,
start: moment(v.DateCreated),
});
});
$('#calendar').fullCalendar({
height: 666,
nowIndicator: true,
defaultView: 'agendaWeek',
columnHeaderFormat: 'ddd D MMM',
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultView: 'month',
selectable: true,
editable: false,
events: events, //Pass the new collection of events to the FullCalendar initialization function, targeting the #calendar div.
});
});
});
});
</script>
</head>
<body>
<div id="calendar"></div>
</body>
</html>