我成功地将fullcalendar控件嵌入到我的asp.net mvc应用程序中。它运行得很完美。但我想编辑现有的事件，我必须做什么？
编辑： 好的，我已经完成了在fullcalender控件中成功编辑事件。但在编辑事件后，它会将其视为新事件，而是替换另一个事件，它会向我显示另一个事件。如果我刷新页面，那么它显示正确。所以我想在编辑事件之后，我想再次渲染/调用/刷新页面。
以下是代码：
$(document).ready(function() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var officerid = document.getElementById('officerid').value;
url = "/TasksToOfficer/Calender/" + officerid;
var calendar = $('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay',
border: 0
},
eventClick: function(calEvent, jsEvent, view) {
var title = prompt('Event Title:', calEvent.title, { buttons: { Ok: true, Cancel: false} });
if (title) {
var st = calEvent.start;
var ed = calEvent.end;
var aldy = calEvent.allDay;
var dt = calEvent.date;
var iden = calEvent.id;
calendar.fullCalendar('renderEvent',
{
title: title,
start: st,
end: ed,
allDay: aldy
},
true);
var date = new Date(st);
var NextMonth = date.getMonth() + 1;
var dateString = (date.getDate()) + '/' + NextMonth + '/' + date.getFullYear();
if (officerid) {
$.ajax(
{
type: "POST",
url: "/TasksToOfficer/Create",
data: "officerid=" + officerid + "&description=" + title + "&date=" + dateString + "&IsForUpdate=true&EventId=" + iden,
success: function(result) {
if (result.success) $("#feedback input").attr("value", ""); // clear all the input fields on success
},
error: function(req, status, error) {
}
});
}
}
}
,
selectable: true,
selectHelper: true,
select: function(start, end, allDay) {
var title = prompt('Event Title:', { buttons: { Ok: true, Cancel: false }
});
if (title) {
calendar.fullCalendar('renderEvent',
{
title: title,
start: start,
end: end,
allDay: allDay
},
false); // This is false , because do not show same event on same date after render from server side.
var date = new Date(start);
var NextMonth = date.getMonth() + 1; // Reason: it is bacause of month array it starts from 0
var dateString = (date.getDate()) + '/' + NextMonth + '/' + date.getFullYear();
if (officerid) {
$.ajax(
{
type: "POST",
url: "/TasksToOfficer/Create",
data: "officerid=" + officerid + "&description=" + title + "&date=" + dateString + "&IsForUpdate=false",
success: function(result) {
if (result.success) $("#feedback input").attr("value", ""); // clear all the input fields on success
//$("#feedback_status").slideDown(250).text(result.message); // show status message with animation
},
error: function(req, status, error) {
}
});
}
}
calendar.fullCalendar('unselect');
},
editable: true,
lazyFetching: true,
events: url //this will call the action from controller and show the saved events in db, the result of the action should be in proper formate.
});
});
我在这里尝试使用refetchEvent，renderEvents进行回调，但没有用。这还有其他问题吗？
答案 0 :(得分：14)
当您更改renderEvent时，您必须致电updateEvent，而不是致电eventClick: function(calEvent, jsEvent, view) {
var title = prompt('Event Title:', calEvent.title, { buttons: { Ok: true, Cancel: false} });
if (title){
calEvent.title = title;
calendar.fullCalendar('updateEvent',calEvent);
}
}
。另请注意，您必须向updateEvent提供“真实”日历事件，而不是您组成的事件。所以你的代码应该是这样的：
{{1}}
答案 1 :(得分：0)
它正在为我工作，并且可以在db中更新事件。
eventClick: function (event, jsEvent, view) {
var title = prompt('Event Title:', event.title);
if (title){
event.title = title;
var start = $.fullCalendar.formatDate(event.start, "Y-MM-DD HH:mm:ss");
var end = $.fullCalendar.formatDate(event.end, "Y-MM-DD HH:mm:ss");
$.ajax({
url: base_url+"calendar/edit_events",
data: 'title=' + title + '&start=' + start + '&end=' + end + '&id=' + event.id,
type: "POST",
success: function (response) {
//alert("hi");
displayMessage("Updated Successfully");
window.location.href = base_url+"calendar/events"
}
});
calendar.fullCalendar('renderEvent',
{
title: title,
start: start,
end: end,
},
true
);
}
calendar.fullCalendar('unselect');
},