Retrieve Yahoo Calendar with Jquery AJAX and C# Page Methods
This is an example of how to get anything you want from the web with Jquery+C# and load via AJAX into a div
Introduction
This is a practical example of how to show Yahoo calendar inside your web-site. It works only for Event List view of Yahoo calendar. We retrieve HTML text from Yahoo, clean it in C#, load into a hidden div and finally select a needed part into a target div. Special thanks to Encosia for valuable information.
Using the Code
This example uses AJAX load using Jquery and C#. In this way, you can load any information from any web into your web-site's divs. You can actually make your entire web-site inside index.htm and load different content interactively.
First - the index.htm which contains a little JavaScript to call page method and two divs - one hidden in which we temporarily load a web-page from Yahoo and another one into which we load the selected calendar.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="jquery.js"></script>
<style type="text/css">
td, th
{
border: 1px solid #CCC;
}
.clickable
{
text-decoration: underline;
cursor: pointer;
}
</style>
<script>
$(document).ready(function() {
//Make an AJAX request to a page method
$.ajax({
type: "POST",
url: "PageMethods.aspx/GetCalendar",
data: '{}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(msg) {
$("#temp").html(msg); //receive an HTML text from Yahoo and
//load it into a hidden div
var calendar = $("#datatable").html(); //select only the calendar
//which is contained in Datatable element
$("#target").html('<table>' + calendar + '</table>'); //Add <table> tags to
//the content
//Optional - add some binding just to open new windows with Google
//maps on click
$('.type1').bind("click", function(e) {
window.open('http://maps.google.com/maps?f=q&source=s_q&hl=en&
geocode=&q=Lucky+Plaza,+304+Orchard+Rd,+Singapore,
+Singapore&sll=1.334718,103.873329&sspn=0.019907,
0.035191&ie=UTF8&ll=1.307817,103.842001&spn=0.019908,
0.035191&z=15&iwloc=A', '_blank', 'status=no,
menubar=no, width = 1000, height = 700, resizable=yes,
scrollbars=yes, toolbar=no, location=no, directories=no');
});
$('.type2').bind("click", function(e) {
window.open('http://maps.google.com/maps?f=q&source=s_q&hl=en&
geocode=&q=singapore+botanic+garden&sll=1.307817,
103.842001&sspn=0.019908,0.035191&ie=UTF8&z=14&iwloc=A',
'_blank', 'status=no, menubar=no, width = 1000,
height = 700, resizable=yes, scrollbars=yes,
toolbar=no, location=no, directories=no');
});
}
});
});
</script>
</head>
<body>
<div id='target'>
</div>
<div id='temp' style='display: none'>
</div>
</body>
</html>
Then the PageMethods.aspx.cs which contains content retrieval and cleaning:
using System;
using System.Web;
using System.IO;
using System.Web.Services;
using System.Net;
public partial class PageMethods : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
//nothing here
}
[WebMethod]
public static string GetCalendar()
{
//This method is called from JS to return an HTML text from Yahoo calendar
//Call GetWebPage method
string full = GetWebPage("http://sg.calendar.yahoo.com/YYY,
775da9/srt,0/testingcalendar19/?v=42&POS=");
//Get the content inside <body> tags
int index = full.IndexOf("<body >");
int length = full.IndexOf("</BODY>") - index +
"</BODY>".Length;//Get the length of body
string segment = full.Substring(index, length); //get the inside of
//<body>....</body>
segment = segment.Replace("href", "id");//clean links
segment = segment.Replace("Appointment", "Your event type1");//change types
//to custom
segment = segment.Replace("Anniversary", "Your event type2");
segment = segment.Replace("Bill Payment", "Your event type3");
//some more cleaning of images
segment = segment.Replace("http://us.i1.yimg.com/us.yimg.com/
i/us/pim/r/medici/all/sort_up_1.gif", "");
segment = segment.Replace("alt=\"Up\"", "");
//Add custom types
segment = segment.Replace("event type1",
"<span class='type1 clickable'>event type1</span>");
segment = segment.Replace("event type2",
"<span class='type2 clickable'>event type2</span>");
return segment;
}
//Utility to retrieve a web page
public static string GetWebPage(string url)
{
HttpWebRequest req = (HttpWebRequest)WebRequest.Create(url);
WebResponse rsp = req.GetResponse();
Stream s = rsp.GetResponseStream();
StreamReader r = new StreamReader(s);
string content = r.ReadToEnd();
return (content);
}
}
Finally web.config:
<?xml version="1.0"?>
<configuration>
<system.web>
<httpModules>
<add name="ScriptModule" type="System.Web.Handlers.ScriptModule,
System.Web.Extensions, Version=1.0.61025.0, Culture=neutral,
PublicKeyToken=31bf3856ad364e35"/>
</httpModules>
</system.web>
</configuration>
The last thing - how to set up Yahoo. Go to Calendar, click Sharing, select Anyone can view my calendar, copy the calendar link below (looks like this - http://sg.calendar.yahoo.com/testingcalendar19) and click Save. Paste this link into the address and go to this URL. On the screen, select Event Lists tab. Copy the URL again - this is the one you will retrieve with C#. It must look like this one:
http://sg.calendar.yahoo.com/YYY,086309/srt,0/testingcalendar19/?v=42&POS=0
I have set up a Yahoo account and the calendar can be seen here: Don't forget that this example works only with Event List view.
Don't forget to put AJAX loading image before retrieving and hide it after successful load. Also don't hesitate to add nice styles to your project.
History
- 7th May, 2009: Initial post