Highlight Dates with Events in YUI Calendar

Report · Dec 06, 2009

This is a question that I have posted in "Dreamweaver General" already, but I thought I'd give it a try here:

I have created a calendar in Dreamweaver CS4 using the YUI Calendar widget and a Spry data set, following the instructions from the Adobe Developer Connection articles. (http://www.adobe.com/devnet/dreamweaver/articles/using_yui_widgets.html) I think it works well for my purposes, however I think it would be more user friendly if I could have dates with events highlighted.

For example, if there was an event on December 15, 2009, I would want that date in the YUI Calendar to be highlighted in a different color.

I have read some different ways to do so, but I have limited knowledge of CSS and barely understand any JavaScript.

For those of you JavaScript people who don't use YUI, here's the code for my page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>SSAC /// Calendar</title>

<!--

var ds1 = new Spry.Data.HTMLDataSet("events.html", "events");

//-->

</script>

</head>

<body>

// 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 ---//

yuicalendar1.render();

}

function selectHandler(event, data) {

// 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].

var formattedDateString = data[0][0][1] + "/" + data[0][0][2] + "/" + data[0][0][0];

var r = ds1.findRowsWithColumnValues({"Date": formattedDateString }, true);

var region = Spry.Data.getRegion("events");

if(r){

ds1.setCurrentRow(r.ds_RowID);

region.setState("showEvent", 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>

<tr>

<td colspan="2">Event Name:{Event}</td>

</tr>

<tr>

<td rowspan="3"><u>Desription:</u><br />

{Description}</td>

</tr>

<tr>

<td><u>Location:</u> {Location}</td>

</tr>

<tr>

<td><u>Contact:</u> {Contact}</td>

</tr>

</table>

</div>

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

</div>

</div>

</body>

</html>

Is there anyone who can provide me with a simple way to highlight these dates? I would really appreciate any help.

Report · Dec 30, 2009

I found the answer to my question in another thread:

http://forums.adobe.com/message/1914860

Thanks to Phil_W for the answer.