我正在尝试更新ajax帖子之后的事件来更改事件的标题并给它一个类，以便我可以更改它的颜色。我还想告诉我的JSON源中的事件是否被批准，如果是，则更改其颜色。我在下面评论了我的代码：
升级代码：
$(document).ready(function () {
var liveDate = new Date();
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var calendar = $('#calendar').fullCalendar({
disableDragging: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'year'
},
eventClick: function (calEvent, jsEvent, view, eventid) {
var eventid = calEvent.id;
var start = calEvent.start;
var end = calEvent.end;
var fullname = calEvent.fullname;
var fancyContent = ('<div class="header">approve booking for ' + eventid + calEvent.title + '<a href="#" class="approve" id="' + eventid + '">yes</a><a href="#" class="approve">no</a></div>');
$.fancybox({
content: fancyContent
});
var getid = $('.approve').attr('id');
// approve function
$('.approve').click(function (calEvent, jsEvent, view, getid) {
var getid = $('.approve').attr('id');
if ($(this).html() == "yes") {
// AJAX post to insert into DB
$.post("ajax.php", {
action: 'approve',
eventid: getid,
color: 'green'
},
function (data) {
var fancyContent = ('<div class="header"><p>' + data.msge + '</p></div>');
$.fancybox({
content: fancyContent
});
}, "json");
// attemping to add class to event to change color, this does not work
$('#calendar').fullCalendar('clientEvents', calEvent).addClass('fc-event-updated');
// trying to get id from last updated event so I can change it but this also does not work
var eventObject = $('#calendar').fullCalendar('clientEvents', eventid);
if (eventObject != null) {
eventObject.title = fullname + ' approved';
eventObject.color = 'green';
$('#calendar').fullCalendar('updateEvent', eventObject);
}
} else {
// close fancybox
$.fancybox.close();
} // end of if
}); // end of approve click
},
selectable: true,
selectHelper: true,
select: function (start, end, allDay, approved, title) {
// disable booking dates in the past
if (liveDate > start) {
var fancyContent = ('<div class="header">Canot book dates in the past</div>');
$.fancybox({
content: fancyContent
});
return false;
} else {
// get user to confirm selection
var fancyContent = ('<div class="header">Book the following days off</div>Start Time: </b></label>' + $.fullCalendar.formatDate(start, "yyyy-MM-dd") + '<br>' + '<label><b>End Time: </b></label>' + $.fullCalendar.formatDate(end, "yyyy-MM-dd") + '<br>' + '<label><a href="#" class="button">yes</a><a class="button" href="#">no</a></div>');
$.fancybox({
content: fancyContent
});
$('.button').click(function () {
if ($(this).html() == "yes") {
// ajax to insert into DB
$.post("ajax.php", {
start: $.fullCalendar.formatDate(start, "yyyy-MM-dd"),
end: $.fullCalendar.formatDate(end, "yyyy-MM-dd"),
action: 'add',
userid: userid
},
function (data) {
// render event an insert id generated from query
calendar.fullCalendar('renderEvent', {
id: data,
title: fullname + 'pending approval',
start: start,
end: end,
className: 'unapproved'
},
false // make the event "stick"
);
}, "json");
// close fancybox
$.fancybox.close();
} else {
// close fancybox
$.fancybox.close();
} // end of if
});
//if ajax post successful then show booking on page - not sure how to get value from previous fancybox
} // end liveDate > start else
calendar.fullCalendar('unselect');
},
editable: true,
eventSources: [
// event sources from json
{
url: 'json-events.php',
type: 'POST',
error: function (data) {
alert('there was an error while fetching events!' + data.msge);
},
// if event is approved = 1 then change color and title of event. This does not work
success: function (data) {
var event = data.approved;
if (data.approved == "1") {
var title = title + "approved";
var className = "approved";
} else {
var title = title + "awaiting approval";
var className = "unapproved";
}
}
}
]
});
});
答案 0 :(得分：8)
我通过从日历中删除过时的事件并使用更新的信息重新创建它来解决这个问题。
注意：只需确保为每个事件分配唯一ID，以避免不必要的行为。
以下是一个例子：
$('#calendar').fullCalendar( 'removeEvents', [5] );
$('#calendar').fullCalendar( 'renderEvent', {
id: 5,
title: 'Some Title',
start: '2013-03-30',
end: '2013-03-30',
className: 'fancy-color'
}, true );
答案 1 :(得分：1)
您将错误地更改给定事件的样式/外观。
对于fullCalendar，正确的代码流是：
您的原始示例无法工作的原因是因为每次您尝试向事件添加类时，都不会通知完整日历有关更新（fullCalendar不会在所有属性上创建绑定/监视/ classes / etc对每个事件和动态响应......这会有点荒谬/内存浪费）。这是fullCalendar（＆＃39; updateEvent＆＃39;，your_event）有用的地方。此外，您必须首先使用 eventRender 回调来添加类，因为每次刷新/重新发生事件时，实际的事件元素本身都不一样 ，但fullCalendar为您的活动存储的事件对象是相同的。因此，您可以通过 eventRender 回调确定重新发送时重新应用的类/样式。
这是一个超级简单的例子：
var cal = $("#calendar");
cal.fullCalendar({
eventClick: function(event){
// you can do an ajax request here if you want, which is what
// you might do if you are trying to lazy-load event information
// as a performance optimization upon initiliation of the calendar,
// but for simplicities sake, I'm just hard coding it.
event.loading = true;
event.site = "internal";
event.category_list = [{name:"Fun Event Tag", bgc:"red"},
{name:"Crappy Event Tag", bgc:"black"}];
// Calling updateEvent updates the original event with the data you just
// set above, and then rerenders it to the calendar, and your eventRender
// callback is called:
cal.fullCalendar('updateEvent', event);
},
eventRender: function(event, element) {
// event.site and event.loading are simply supplemental data
// that I've added to the original full calendar event object(s)
if(event.site == 'internal' && event.loading){
element.addClass("loading");
element.find(".fc-content").prepend("<i class='spinner-dark'>");
}
if(event.id == panel_showing_event_id){
element.addClass("showing");
}
// event.category_list is an array that I have also attached
// to the original event object(s), to show that supplemental arrays/objects
// that are set on the original event object(s) persist as well
if(event.category_list && !!event.category_list.length){
for(i = 0; i < event.category_list.length; i++){
var tag = event.category_list[i];
element.css("background-color", tag.bgc);
}
}else{
element.css("background-color", "");
}
}
如果您需要完整的解释，请告诉我，但这应该让您重回正轨。