Blog Pile

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:

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:

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

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()).

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.

Profile Picture for Alan Levine aka CogDog
An early 90s builder of the web and blogging Alan Levine barks at CogDogBlog.com on web storytelling (#ds106 #4life), photography, bending WordPress, and serendipity in the infinite internet river. He thinks it's weird to write about himself in the third person.

Comments

  1. Hi Alan,

    I’ve been hoping for a way to integrate Google Calendar into a web page, and am having fun, and seeing great promise, in trying the stuff you’ve created here. Would you be willing to share updates you’ve made to the code to get to what I’m seeing on the NMC calendar page? that’s very similar to what I’m hoping to achieve.

    Thanks!

    James

  2. I’ve shared the latest changes I did in the download file:
    http://cogdogblog.com/code/ajax-google-cal.txt

    (this replaces most of the content in the index.html)…. I neded up putting in the wordpress header template with some f loops for using only on the home page.

    Okay that was not very clear, but I will need some time to write a more complete explanation.

  3. Hi Alan,

    Can you also make it sort on the actual date of the event and not sort it on the date the event was booked,

    thanks
    emma

Comments are closed.