University of Delaware Web Idea Center

	What's New \| IT Help Center \| UD Home \| Comment

		How To
		MENU > WEB FORMS BASICS

WEBEVENT CALENDAR BASICS

Adding a WebEvent Calendar to your web site. UD departments and student groups now have the ability to add the UD Calendar and campus events directly to their web site.

In the <head> section of your page, add the following code. Use Ctrl-C (PC) or Command-C (Mac) to copy.

<br>  <script type="text/javascript" src="https://primus.nss.udel.edu/javascript/calendar.js"></script> <script type="text/javascript" src="https://primus.nss.udel.edu/javascript/calendar-en.js"></script> <script type="text/javascript" src="https://primus.nss.udel.edu/javascript/calendar-setup.js"></script>    <script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAAiYhq3UDBOmcbNXYFn8D86BTfaiHseN3PKWWrD8lLgm3zQJz3rRRuIxXqh7plqZHvZSBE-FL5MP27zw"></script> <link href="https://primus.nss.udel.edu/javascript/calendar.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="https://primus.nss.udel.edu/javascript/udrss/udrssdisplayer.js"></script> 
This code and stylesheet is necessary to implement the UD Calendar widget on your page.
In the <body> section (generally inside a table cell <td></td>) of your page, add the following code. Use Ctrl-C (PC) or Command-C (Mac) to copy.

 <div class="calendar_box"> <div id="calendar-container"></div> <script type="text/javascript"> function dateChanged(calendar) { // Beware that this function is called even if the end-user only // changed the month/year. In order to determine if a date was // clicked you can use the dateClicked property of the calendar: if (calendar.dateClicked) { // OK, a date was clicked, link to webevents var y = calendar.date.getFullYear(); var m = calendar.date.getMonth()+1; // integer, 0..11 var d = calendar.date.getDate(); // integer, 1..31 //calID is the ID # of the calendar we want to link to var calid = "1021"; //Academic Calendar //command will describe the view that webevents will show //Available commands: /* listday, calday, listweek, calweek, list2week, cal2week, listmonth, calmonth, listyear, calyear */ var command = "listday"; var link = "http://webevent.nss.udel.edu/cgi-bin/view/webevent.cgi?calID="+ calid + ";" + "cmd="+ command + ";" + "d=" + d + ";" + "m=" + m + ";" + "y=" + y + ";" + "drilldown=1"; //window.location = link; //For Redirect PopItUp(link); //For Popup } }; Calendar.setup( { flat : "calendar-container", // ID of the parent element flatCallback : dateChanged, // our callback function weekNumbers : false } ); function PopItUp(url) { newwindow=window.open(url,'name','height=600,width=800,scrollbars=1, resizeable=1, toolbar=1'); if (window.focus) {newwindow.focus()} return false; } </script> </div>

In order to view UD Events on your web page, set the value for the calendar ID. See the Calendar ID list for more information.

var calid = "1021"; //Academic Calendar //Replace '1021' with your Calendar ID