jQuery 如何编辑全日历事件内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4395786/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to edit fullcalendar event content
提问by Red Swan
I am succeed in embedding the fullcalendar control in my asp.net mvc application. it is running perfect. But I want to edit existing event, what I have to do?
我成功地在我的 asp.net mvc 应用程序中嵌入了 fullcalendar 控件。它运行完美。但是我想编辑现有的事件，我必须做什么？
Edited:ok I have done with successfully Edit event in fullcalender control. but after edit the event, it assumes it as new event and rather replace another event it shows me one more event. and if i refreshes page, then it shows properly. So I think after I edit the event, some how i want to render / call again / refresh page.
编辑：好的，我已经在 fullcalender 控件中成功完成了 Edit 事件。但是在编辑事件后，它会将其假定为新事件，而是替换另一个事件，它向我显示了另一个事件。如果我刷新页面，那么它会正确显示。所以我想在我编辑事件之后，我想如何渲染/再次调用/刷新页面。
Here is the code:
这是代码：
$(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.
});
});
I tried here with refetchEvent, renderEvents for call back , but not worked. Is here any other issue?
我在这里尝试使用 refetchEvent、renderEvents 进行回调，但没有奏效。这里还有其他问题吗？
回答by Ryley
Instead of calling renderEventyou will have to call updateEventwhen you change one. Also notice that you have to provide the "real" calendar event to updateEvent, not one that you make up. So your code should go like this:
当您更改一个时，您renderEvent必须调用updateEvent而不是调用。另请注意，您必须向 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);
}
}
回答by vignesh Gunalan
It is Working for me and can update the event in db ..
它对我有用，可以更新 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');
},
