Tinkering AJAX Calendar Date Output

Wow, my JavaScript code is utterly rusted, but I tinkered last night with the AJAX Google Calender code, based on the code from Ajax Magazine’s Howtointegrate Google Calendar in your website using AJAX. The output in the demo is in GMT time, and not very human readable, so I rolled up my sleeves to see what I could do.

The first change is above the main ReqChange() function to set up some variables we can use:

// begin: Alan's additions for date/time manipulations
// make array of month names
var monthNames = new Array ('', 'January', 'February', 'March', 'April', 
  'May', 'June', 'July' , 'August', 'September', 
  'October', 'November', 'December');

// offset to GMT time from the time zone setting in Google Calendar
var GMToffset = -7;
// end: Alan's additions for date/time manipulations

Next, for my site, I was going to manually insert the header, and I added a line to indicate the displayed times where in PST:

// BEGIN: Alan changes the output since on my site, I manually insert a header

// Get the calendar title
// var title = node.getElementsByTagName('title').item(0).firstChild.data;

// content = '
'+title+'
';

// Display the current time zone
 content = '
Note: All event times are PST
';

// END: Alan changes the output since on my site, I manually insert a header

One change was to reverse the internal data looping to create a reverse chronological display:

// BEGIN: Alan changes the data looping to be reverse chronological

//		for (var n=items.length-1; n >= 0; n--)

		// change to reverse ordering
		for (var n=0; n < items.length; n++)
		
// END: Alan changes the data looping to be reverse chronological

Last is the gymnastics to convert the date to a more human readable format. The time is parsed from the string returned from Google Calendar, the month, year, and day are yanked as well, and then recast into a proper string so Date.parse() can convert it into a time in milliseconds since 1970. We next factor in the offset from the time zone setting for our calendar to GMT, and spin a new Date object, which is then displayed with the users browser specified format (toLocaleString()).

try 
{ 

	// BEGIN: Alan's date/time conversions
	
	// Date clean up suggestion by Chrissy
	var atomdate = items[n].getElementsByTagName('published').item(0).firstChild.data;
	
	// Alan's reformatting starts here
	// get the time in 00:00:00
	var itemPubDateTime = atomdate.substr(11, 8);
	
	// get the year
	var itemYear= atomdate.substr(0, 4);
	
	// get the month, parse to integer, and fetch string version
	var itemMon = monthNames[parseInt(atomdate.substr(5,2),10)];
	
	// get the day
	var itemDay = parseInt(atomdate.substr(8,2),10);
	
	// create new Date object by parsing the epoch version, and accounting for offset from GMT
	var myNewDate = new Date( Date.parse(itemMon+' ' + itemDay + ', '
         + itemYear + ' ' + itemPubDateTime) + 3600 * 1000 * GMToffset);
	
	var itemPubDate = myNewDate.toLocaleString();
	
	
} 
catch (e) 
{ 
	var itemPubDate = '';		
}
		
content += '
'+itemPubDate + ' '+itemTitle+'
';

// END: Alan's date/time conversions

You can see it action on our NMC Campus Observer site. I am leaving a copy of this code at http://cogdogblog.com/code/ajax-google-cal.txt which is just the index.html file that replaces the one that is found in the download from Ajax Magazine.

Your mileage will vary.

 Share this barking on social media

If this kind of stuff has value, please support me by tossing a one time PayPal kibble or monthly on Patreon