PDA

View Full Version : Spry dataset and YUI calendar


chipsticks09
11-10-2010, 12:01 PM
Help please, I have been through a tutorial to get the YUI Calendar working, and on a stand alone (set up just for that) site, following the tuorial it worked fine. I then tried to implement what I had learnt onto the site I am working on and need the calendar working on and the Calendar shows up but when dates that I have data added are clicked the data does not show up. Instead the text to the right always says - There are no events on this date. Please select another date. This shows whatever date is chosen. Also the styles on the Calendar seem to be messing with my overall page styling and making all text on the page smaller.

Now the tutorial I was working from has been removed so I am at a bit of a loss!

The code I am using can be found below, it's not live yet so I cannot post a url to view sorry.

If anyone knows why these issues are occuring or can point me to any other tutorials for YUI Calendar it would be greatly appreciated. Do please bare in mind I am pretty much a complete novice with Javascript and Spry.

Code

<!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"><!-- InstanceBegin template="/Templates/fest_calendar.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>Oktoberfest pub</title>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<script src="SpryAssets/SpryData.js" type="text/javascript"></script>
<script src="SpryAssets/SpryHTMLDataSet.js" type="text/javascript"></script>
<script src="YUI/2.6.0/build/yahoo-dom-event/yahoo-dom-event.js" type="text/javascript"></script>
<script src="YUI/2.6.0/build/calendar/calendar-min.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

<!-- InstanceEndEditable -->
<style type="text/css">
<!--
#container {
width: 900px;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #300;
font-size: 80%;
margin-top: -20px;
margin-right: auto;
margin-left: auto;
background-repeat: no-repeat;
background-color: #09C;
border: 3px solid #FFF;
}
#header {
float: left;
font-weight: bold;
color: #600;
height: 214px;
width: 900px;
background-repeat: no-repeat;
background-image: url(images/head_bg_image.png);
}
#maincontent .centered {
text-align: center;
}

#maincontent .h2 {
font-size: 110%;
font-weight: bold;
color: #FFF;
background-color: #09C;
display: block;
}

#maincontent .body {
padding-right: 5px;
padding-left: 5px;
}
#newsletter {
width: 900px;
font-weight: bold;
font-size: 100%;
text-align: center;
margin-bottom: 5px;
background-color: #FFF;
padding-top: 10px;
border-bottom-width: 3px;
border-bottom-style: solid;
border-bottom-color: #FFF;
color: #000099;
}
#headernav {
color: #003399;
font-weight: bold;
float: right;
width: 720px;
margin-right: 10px;
}
#bayoomp {
text-align: right;
float: right;
width: 110px;
margin-right: 30px;
}
#nav {
color: #300;
font-size: 85%;
text-transform: uppercase;
font-weight: bold;
font-style: normal;
text-align: center;
float: right;
border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #000099;
border-bottom-color: #000099;
width: 900px;
background-color: #FFF;
margin-top: 22px;
vertical-align: middle;
}
form {
font-size: 115%;
font-weight: normal;
width: 0px;
margin-right: 10px;
margin-left: 10px;
display: inline;
}
#maincontentright {
}
#mainmid {
margin-right: 305px;
margin-left: 305px;
}
.bold {
font-weight: bold;
padding-right: 5px;
padding-left: 5px;
}
.Heading1 {
color: #300;
font-weight: bold;
font-size: 200%;
text-align: center;
text-decoration: overline;
}
input.highlighted {
background-color: #FFF;
border: 1px solid #036;
}
input.button {
font-family: Verdana, Geneva, sans-serif;
font-size: 100%;
font-weight: bold;
background-color: #300;
color: #FFF;
border: 1px solid #300;
}
#contact .rightsameline {
font-size: 100%;
color: #300;
font-weight: normal;
text-align: right;
margin-right: 10px;
border-top-color: #330000;
border-right-color: #330000;
border-bottom-color: #330000;
border-left-color: #330000;
}
#contact .rightsameline a:link, #contact .rightsameline a:visited {
text-decoration: none;
color: 2B3380;
font-weight: bold;
font-size: 120%;
}
#contact .rightsameline a:hover, #contact .rightsameline a:focus, #contact a:active {
color: #300;
text-decoration: none;
}
#contact .leftsameline {
float: left;
color: #300;
font-size: 100%;
margin-left: 10px;
}
#maincontent {
background-color: #09C;
margin-top: 12px;
}
.leftimg {
text-align: left;
}
.rightimg {
text-align: right;
}
.centered {
text-align: center;
}
.clearfloat {
font-size: 1px;
line-height: 0px;
clear: both;
height: 1px;
border-top-color: #300;
margin-top: 0px;
margin-right: 10px;
margin-bottom: 0px;
margin-left: 10px;
}
#contact {
width: 890px;
font-size: 110%;
color: #009;
background-color: #FFF;
font-weight: bold;
text-align: right;
padding-top: 5px;
padding-bottom: 5px;
padding-right: 10px;
}
#sonet {
color: #FFFFFF;
font-size: 80%;
font-weight: bold;
text-align: right;
width: 145px;
float: left;
margin-left: 0px;
padding-bottom: 5px;
padding-left: 10px;
margin-bottom: 25px;
}
#address {
float: left;
font-size: 85%;
color: #CCCCCC;
}
#topmail a:link, #topmail a:visited {
color: #FFCC00;
text-decoration: none;
font-size: 100%;
text-align: right;
}
#contact a:link, #content a:visited {
text-decoration: none;
color: #000099;
}
#topmail a:hover, #topmail a:focus, #topmail a:active {
color: #300;
text-decoration: none;
}
#contact a:hover, #contact a:focus, #contact a:active {
color: #300;
text-decoration: none;
}
#specoff {
width: 200px;
float: right;
margin-right: 202px;
text-align: center;
font-size: 170%;
color: #ffcc00;
margin-top: -25px;
}
#maincontentleft {
float: left;
width: 890px;
margin-left: 5px;
color: #009;
font-weight: normal;
font-size: 90%;
background-color: #09C;
height: 285px;
}
#mainclear {
clear: both;
height: 1px;
}
#booking {
margin-right: 10px;
margin-top: 10px;
font-size: 190%;
float: left;
width: 280px;
height: 65px;
font-weight: bold;
text-align: center;
color: #ffcc00;
margin-left: 10px;
}
#testimonials {
float: right;
width: 545px;
margin-top: 5px;
margin-left: 40px;
height: 80px;
}
body {
background-image: url(images/bg_diamond_30.png);
background-repeat: repeat;
}
#missionstatement {
margin-left: 180px;
margin-right: 180px;
margin-top: 20px;
font-size: 140%;
}
#topmail {
float: left;
margin-top: 25px;
margin-left: 5px;
text-align: right;
font-size: 100%;
}
#logoleft {
height: 160px;
float: left;
width: 450px;
padding-top: 9px;
padding-left: 12px;
}
#logoright {
float: right;
height: 163px;
width: 163px;
padding-top: 9px;
}
#maincontent .h1 {
font-size: 125%;
font-weight: bold;
text-transform: uppercase;
color: #FFF;
background-color: #09C;
text-align: center;
display: block;
border-bottom-width: 3px;
border-bottom-style: outset;
border-bottom-color: #666;
}
#maincontent a:link, #maincontent a:visited {
font-size: 105%;
font-weight: bold;
color: #006;
text-decoration: none;
}
#maincontent a:hover, #maincontent a:focus, #maincontent a:active {
font-size: 105%;
font-weight: bold;
color: ffcc00;
text-decoration: none;
}
-->
</style>
<!-- InstanceBeginEditable name="head" -->
<script type="text/javascript">
<!--
var dsCourses = new Spry.Data.HTMLDataSet("schedule.html", "classSched");
//-->
</script>
<link href="YUI/2.6.0/build/fonts/fonts-min.css" rel="stylesheet" type="text/css" />
<link href="YUI/2.6.0/build/calendar/assets/skins/sam/calendar.css" rel="stylesheet" type="text/css" />
<!-- InstanceEndEditable -->

<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script type="text/JavaScript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>

<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
</head>

<body onload="MM_preloadImages('images/rol_ove/fcbmlogo_over.png','images/book_now_NEW_COL_OVER.png','images/offers_and_events_over.png','images/book_now_banner_over.png')">
<div id="container">
<div id="newsletter">
<form id="form1" name="form1" method="post" action="">
Sign up to The Fests Newsletter:Your
<label for="name">name:</label>

<input name="name" type="text" class="highlighted" id="name" />
<label for="email">Your email:</label>
<input name="email" type="text" class="highlighted" id="email" />
<input name="send" type="submit" id="send" value="sign up" />
</form>
</div>
<div id="header">
<div id="logoleft"><a href="index.html"><img src="images/logo_left.png" width="150" height="150" border="0" /></a></div>
<div id="logoright"><a href="index.html"><img src="images/logo_left.png" width="150" height="150" border="0" /></a></div>
<div class="clearfloat"></div>
<!-- InstanceBeginEditable name="social network" -->
<div id="sonet"><a href="http://www.facebook.com/home.php?#!/profile.php?id=537131124&amp;ref=ts"><img src="images/facebook_no_bg.png" width="30" height="30" border="0" class="centered" /></a> <img src="images/twitter.png" width="30" height="30" /><br />
FOLLOW US! </div>
<!-- InstanceEndEditable -->
<div id="headernav"><!-- InstanceBeginEditable name="bayern oompah" -->
<div id="bayoomp">
<table width="115" border="0" align="right">
<tr>
<td width="51"><a href="bayern supporters club/index.html"><img src="images/fcbmlogo.png" width="50" height="50" border="0" /></a></td>
<td width="10">&nbsp;</td>
<td width="55"><a href="oomph_brass/oompah_brass.html"><img src="images/oomphlogo.png" width="50" height="50" border="0" /></a></td>
</tr>
</table>
</div>
<!-- InstanceEndEditable --><!-- InstanceBeginEditable name="special offers" -->
<div id="specoff"><a href="calendarData.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image7','','images/offers_and_events_over.png',1)"><img src="images/offers_and_events.png" name="Image7" width="210" height="124" border="0" id="Image7" /></a></div>
<!-- InstanceEndEditable --><!-- InstanceBeginEditable name="address" -->
<div id="address">Octoberfest pub London<br />
678-680 Fulham Road<br />
London SW6 5SA<br />
Tel: 0 20 7736 5293</div>
<!-- InstanceEndEditable --></div>
</div>
<div class="clearfloat"></div>

<div id="nav">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="about us/index.html" target="_self"><p></p>about us</a>
</li>
<li><a href="menu/index.html" target="_self" class="MenuBarItemSubmenu"><p></p>
menu</a>
<ul>
<li><a href="menu/food_special/index.html"><p></p>
food special</a></li>
<li><a href="menu/beer/index.html" target="_self">
beer</a></li>
<li><a href="menu/scnapps/index.html">schnapps</a></li>
<li><a href="menu/christmas_party/index.html">christmas menu</a></li>
</ul>
</li>
<li><a href="calendarData.html" target="_self" class="MenuBarItemSubmenu"><p></p>events</a>
<ul>
<li><a href="events/oktoberfest_events/index.html" target="_self"><p></p>oktoberfest events</a></li>
<li><a href="events/poker/index.html" target="_self"><p></p>
poker</a></li>
<li><a href="events/live_music/index.html" target="_self"><p></p>
live music</a></li>
<li><a href="events/special_events/index.html" target="_self">special events</a></li>
</ul>
</li>
<li><a href="bookings/index.html" target="_self" class="MenuBarItemSubmenu"><p></p>
bookings</a>
<ul>
<li><a href="bookings/birthday_groups/index.html" target="_self">
<p></p>
birthday and groups</a></li>
<li><a href="bookings/corporate/index.html">corporate</a></li>
<li><a href="bookings/stag_hen/index.html">stag/ hen</a></li>
<li><a href="bookings/hold_your_own_beerfest/index.html">hold your own beerfest</a></li>
<li><a href="bookings/book_a_keg/index.html">book a keg</a></li>
<li><a href="bookings/venue_hire/index.html">venue hire</a></li>
<li><a href="bookings/ticketing_tandcs/index.html">ticketing terms and conditions</a></li>
</ul>
</li>
<li><a href="sports/index.html" target="_self" class="MenuBarItemSubmenu"><p></p>
sports</a>
<ul>
<li><a href="sports/football.html" target="_self"><p></p>
football</a></li>
<li><a href="sports/rugby.html" target="_self">rugby</a></li>
<li><a href="sports/other_sport.html">other sports</a></li>
<li><a href="bayern supporters club/index.html">bayern munich supporters</a></li>
</ul>
</li>
<li><a href="merchandise/index.html" target="_self"><p></p>merchandise</a></li>
<li><a href="double knuckle challenge/index.html" target="_self">double knuckle challenge</a></li>
<li><a href="photo gallery/index.html" target="_self" class="MenuBarItemSubmenu">
<p></p>
Photo gallery</a>
<ul>
<li><a href="photo gallery/2005.html">2005</a></li>
<li><a href="photo gallery/2006.html">2006</a></li>
<li><a href="photo gallery/2007.html">2007</a></li>
<li><a href="photo gallery/2008.html">2008</a></li>
<li><a href="photo gallery/2009.html">2009</a></li>
<li><a href="photo gallery/2010.html">2010</a></li>
</ul>
</li>
<li><a href="contact/index.html" target="_self"><p></p>contact us</a></li>
</ul>
</div>
<div class="clearfloat"></div>
<div id="maincontent"><!-- InstanceBeginEditable name="main left" -->
<div id="maincontentleft">
<div id="yuicalendar1"></div>
<script type="text/javascript">
// BeginWebWidget YUI_Calendar: yuicalendar1

(function() {
var cn = document.body.className.toString();
if (cn.indexOf('yui-skin-sam') == -1) {
document.body.className += " yui-skin-sam";
}
})();

var inityuicalendar1 = function() {
var yuicalendar1 = new YAHOO.widget.Calendar("yuicalendar1");

// The following event subscribers demonstrate how to handle
// YUI Calendar events, specifically when a date cell is
// selected and when it is unselected.
//
// See: http://developer.yahoo.com/yui/calendar/ for more
// information on the YUI Calendar's configurations and
// events.
//
// The YUI Calendar API cheatsheet can be found at:
// http://yuiblog.com/assets/pdf/cheatsheets/calendar.pdf
//
//--- begin event subscribers ---//
yuicalendar1.selectEvent.subscribe(selectHandler, yuicalendar1, true);
yuicalendar1.deselectEvent.subscribe(deselectHandl er, yuicalendar1, true);
//--- end event subscribers ---//

yuicalendar1.render();
}

function selectHandler(event, data) {
var formattedDateString = data[0][0][1] + "/" + data[0][0][2] + "/" + data[0][0][0];
var r = dsCourses.findRowsWithColumnValues({"Date": formattedDateString }, true);
var region = Spry.Data.getRegion("classDetail");
if(r){
dsCourses.setCurrentRow(r.ds_RowID);
region.setState("showClass", true);
} else {
region.setState("ready", true);
}
};

function deselectHandler(event, data) {
// The JavaScript function subscribed to yuicalendar1. It is called when
// a selected date cell is unselected.
};

// Create the YUI Calendar when the HTML document is usable.
YAHOO.util.Event.onDOMReady(inityuicalendar1);


// EndWebWidget YUI_Calendar: yuicalendar1
</script>
<div spry:detailregion="dsCourses" id="classDetail">
<div spry:state="showClass">
<table width="590" border="0" cellspacing="2" cellpadding="4">
<tr>
<td colspan="3" class="h1">{Class}</td>
</tr>
<tr>
<td width="290" height="290" rowspan="2">{Logo}</td>
<td colspan="2">{Description}</td>
</tr>
<tr>
<td>{Location}</td>
<td>{Date}</td>
</tr>
</table>
</div>
<div spry:state="ready">
There are no events on this date. Please select another date.
</div>
</div>
</div>

<!-- InstanceEndEditable -->
<div id="mainclear">
</div>
</div>
<!-- InstanceBeginEditable name="bookings" -->
<div id="booking"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image6','','images/book_now_NEW_COL_OVER.png',1)"></a><a href="bookings/index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('book now','','images/book_now_banner_over.png',1)"><img src="images/book_now_banner.png" name="book now" width="280" height="67" border="0" id="book now" /></a></div>
<!-- InstanceEndEditable --><!-- InstanceBeginEditable name="testimonials" -->
<div id="testimonials"><img src="images/quotes_straight.png" width="500" height="71" /></div>
<!-- InstanceEndEditable --><br />
<div class="clearfloat"></div>
<!-- InstanceBeginEditable name="contact" -->
<div id="contact"><a href="mailto:info@octoberfestpub.com">info[at]octoberfestpub.com</a></div>
<!-- InstanceEndEditable --></div>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>
<!-- InstanceEnd --></html>