Pro PHP and jQuery by Jason Lengstorf.pdf - Computer Science ...

280
CHAPTER 8 ■ EDITING THE CALENDAR WITH AJAX AND JQUERY
■ Note Using the “month-” prefix for the ID means that you stay compliant with W3 standards, which state that
element IDs must begin with a letter.
Building Date Objects in JavaScript
To ensure that the new event falls within the current month, create two empty Date objects: one for the
current month and one for the new event.
To set the value of the current month’s Date object, retrieve the ID attribute from the H2 element
using the .attr() method, split it at the hyphens, and store it in the cdata variable.
For the new event, split the value of entry.event_start at the spaces and take the first array element
(which is the date in the format of YYYY-MM-DD) and store it in a variable called date. Next, split the
information at the hyphens and store the array in a variable called edata.
To set the Date objects, use the data from cdata and edata to set the date in cal and event,
respectively.
Finally, modify fx.addevent with the following bold code:
fx = {
"initModal" : function() {...},
"boxin" : function(data, modal) {...},
"boxout" : function(event) {...},
// Adds a new event to the markup after saving
"addevent" : function(data, formData){
// Converts the query string to an object
var entry = fx.deserialize(formData),
},
// Makes a date object for current month
cal = new Date(NaN),
// Makes a date object for the new event
event = new Date(NaN),
// Extracts the calendar month from the H2 ID
cdata = $("h2").attr("id").split('-'),
// Extracts the event day, month, and year
date = entry.event_start.split(' ')[0],
// Splits the event data into pieces
edata = date.split('-');
// Sets the date for the calendar date object
cal.setFullYear(cdata[1], cdata[2], 1);
// Sets the date for the event date object
event.setFullYear(edata[0], edata[1], edata[2]);