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 div
s. 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 div
s - 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() {
$.ajax({
type: "POST",
url: "PageMethods.aspx/GetCalendar",
data: '{}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(msg) {
$("#temp").html(msg);
var calendar = $("#datatable").html();
$("#target").html('<table>' + calendar + '</table>');
$('.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)
{
}
[WebMethod]
public static string GetCalendar()
{
string full = GetWebPage("http://sg.calendar.yahoo.com/YYY,
775da9/srt,0/testingcalendar19/?v=42&POS=");
int index = full.IndexOf("<body >");
int length = full.IndexOf("</BODY>") - index +
"</BODY>".Length;
string segment = full.Substring(index, length);
segment = segment.Replace("href", "id");
segment = segment.Replace("Appointment", "Your event type1");
segment = segment.Replace("Anniversary", "Your event type2");
segment = segment.Replace("Bill Payment", "Your event type3");
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\"", "");
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;
}
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:
="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