YUI Calendar


I'm trying to get date cells to have a shaded background color when if there is an event occurring on a particular day. I'm using some spry code from Adobe forums to display event data but I can't seem to figure out how to have the active date cells highlight. Does anyone know how to to do this?

Here's the code I'm working with:

<!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" xmlns:spry="http://ns.adobe.com/spry">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<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>
<script type="text/javascript">
var dsCourses = new Spry.Data.HTMLDataSet("schedule.htm", "classSched");
var eventdate = new Spry.Data.HTMLDataSet("schedule.htm", "edate");
<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" />


<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(deselectHandler, yuicalendar1, true);
//--- end event subscribers ---//


function selectHandler(event, data) {
//This new function takes the data array returned by the calendar when clicked and formats it into a string that matches the date column in the Spry detail region table.
var formattedDateString = data[0][0][1] + "/" + data[0][0][2] + "/" + data[0][0][0];

// variable to search the dataset for the selected date:
var r = dsCourses.findRowsWithColumnValues({"Date": formattedDateString }, true);

// variable that will display the course data if a matching date is found:
var region = Spry.Data.getRegion("classDetail");


region.setState("showClass", true);
} else {
region.setState("ready", true);

// The JavaScript function subscribed to yuicalendar1. It is called when
// a date cell is selected.
// alert(event) will show an event type of "Select".
// alert(data) will show the selected date as [year, month, date].

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.

// EndWebWidget YUI_Calendar: yuicalendar1


<div spry:detailregion="dsCourses" id="classDetail">
<div spry:state="showClass">
<table width="350" border="0">
<td colspan="3"><h2>{dsCourses::Class}</h2></td>
<td width="36" rowspan="2">{dsCourses::Logo}</td>
<td colspan="2">{dsCourses::Description}</td>

<div spry:state="ready">
There are no classes on this date. Please select another date.


1 Reply

Recent Posts

in General Discussion at YDN