I’m intrigued by Google Calendar’s public calendar search capability and am wondering if there’s any way to reverse engineer it and add it to my own site. Possible?
Of course. Just about any form can be reverse engineered if you have the patience to unwind the code that’s inside a given page. In this case, you’re talking about Google Calendar‘s public calendar search capability:
Here’s what you want to do, however. Enter a rudimentary keyword like “music” and click on “Search Public Events”, at which point you now get a more sophisticated search:
Rather than crack open the code, we can simply do a search and examine the resultant URL. Enter “music” as the search term, “denver” as the location and “today” as the time, and it produces a list of music venues in Denver, Colorado. But more importantly, the URL of that page is:
Let me make this a bit clearer by highlighting the words we searched for in bold:
As an experiment, I’ll strip out all the name=value pairs that don’t have specific information I’ve entered in my original search, which reduces it down to:
Surprise, that works just as well (copy and paste that into the Location box of your Web browser). Better, we can now reverse engineer it further and recognize that what we’re really seeing here is:
Target URL: http://www.google.com/calendar/events
Query string: q=music
Armed with that information, it’s simple to pour that into a rudimentary HTML form:
Query: <input name=”q”><br />
Location: <input name=”ql”><br />
Date: <input name=”qtd”><br />
<input type=”submit” />
It ain’t pretty, but it’ll work. Try it:
That’s not very attractive, but it does work! We can also use that same URL to embed searches into your text too, as demonstrated here:
<a href=”http://www.google.com/calendar/events?q=blues&qtd=this+week&ql=denver%2C+co” target=”_blank”>Blues events this week in Denver</a>. Simple enough.
Which would look like this: Blues events this week in Denver.
Finally, here’s a really fancy version of this form that demonstrates how you can turn one or more fields into hidden variables and simplify the form for your own uses:
<div style=”border:1px solid #999;width:400px;padding:6px;background-color:#cce;”>
margin-bottom:10px;”>Dave’s Denver Event Calendar</div>
Looking for a concert, band, dance, theatrical review or other
event here in the beautiful Denver metro area? No worries, I can
help you find it!
<br /><br />
<tr><td align=”right”>Event name or category:
<input type=”text” name=”q” />
and your time range:
<input type=”text” name=”qtd” value=”today” />
<input type=”hidden” name=”ql” value=”denver, co” />
<input type=”submit” value=”Ready? Let’s find it!” />
Formatted and interpreted, it looks like this:
Hope that helps you get going with your reverse engineering project!