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";
}
}
}
]
});
});