我在fullcalendar中显示简单事件的问题。我第一次使用这段代码时,这个日历会向我显示我在数据库中发生的事件,两天之后我必须改变一些东西,现在它完全被破坏了。谢谢你的帮助!
这是我的Calendar.js
$(document).ready(function () {
GetEvents();
});
function GetEvents()
{
$('#calendar').fullCalendar({
theme: false,
header: {
left: 'prev,next today',
center: 'title',
right: ''
},
defaultView: 'month',
editable: false,
dataType: "json",
events: {
url: '/Calendar/MountLoad',
type: 'POST',
data: {
},
error: function () {
alert('there was an error while fetching events!');
},
success: function () {
}
}
});
};
这是我的日历控制器
public class CalendarController : Controller
{
private MountManager mountManager;
private EmployeeController employeeManager;
public CalendarController()
{
this.mountManager = new MountManager();
this.employeeManager = new EmployeeController();
}
public JsonResult MountLoad()
{
var events = mountManager.MountList();
var eventList = from e in events
select new
{
id = e.Id,
place = e.Place,
description = e.Description,
name = e.Name,
DateFrom = e.DateFrom.ToString("s"),
DateTo = e.DateTo.ToString("s")
};
return Json(eventList, JsonRequestBehavior.AllowGet);
}
public ActionResult Index()
{
return View();
}
}
答案 0 :(得分:1)
我建议您更改ajax
并使用.map
将数据映射到fullcalendar
,如下所示:
function GetEvents()
{
$.ajax({
dataType: "json",
contentType: "application/json",
data: "{}",
url: "/Calendar/MountLoad",
dataType: "json",
success: function (data) {
$('#calendar').fullCalendar({
theme: false,
header: {
left: 'prev,next today',
center: 'title',
right: ''
},
defaultView: 'month',
editable: false,
lang: 'en-IN',
eventLimit: 1,
eventLimitText: 'More',
weekMode: 'liquid',
events: $.map(data, function (item, i) {//This is where you need to take care
var event = new Object();
event.start = moment(item.DateFrom).utc();
event.end = moment(item.DateTo).utc();
event.title = item.name;
event.brief = item.description;
event.place = item.place;
event.id=item.id;
return event;
}),
});
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
$("#cal_error").text(errorThrown); //Handle Error
}
});
}
注意:您需要添加moment.js并将其引用以用于将来的完整日历支持
如果您有任何疑问,请参阅 this question
答案 1 :(得分:0)
function GetEvents() {
$.ajax({
dataType: "json",
contentType: "application/json",
data: "{}",
url: "/DashBoard/BindTask",
dataType: "json",
success: function (data) {
var json=JSON.stringify(data);
console.log(JSON.stringify(data));
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultDate: new Date(),
select: function (start, end) {
var title = prompt('Event Title:');
var eventData;
if (title) {
eventData = {
title: title,
start: start,
end: end
};
$('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true
}
$('#calendar').fullCalendar('unselect');
},
editable: true,
eventLimit: true,
editable: true,
eventLimit: true, // allow "more" link when too many events
events: json
});
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
$("#cal_error").text(errorThrown); //Handle Error
}
});
}
function OnSuccess(response) {
alert(response.d);
}
答案 2 :(得分:-1)
function task() {
$.ajax({
type: "GET",
url: "/DashBoard/BindTask",
data:"{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultDate: new Date(),
// selectable: true,
//selectHelper: true,
// select: function (start, end) {
// var title = prompt('Title:');
// var eventData;
// if (title) {
// eventData = {
// title: title,
// start: start,
// end: end
// };
// $('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true
// }
// $('#calendar').fullCalendar('unselect');
//},
//editable: true,
//eventLimit: true, // allow "more" link when too many events
events: $.map(data, function (item, i) {
var event = new Object();
event.Title = item.title;
event.Start = new Date(item.start);
event.End = new data(item.end);
return event;
}),
});
}
});
}