Highlight Dates with Events in YUI Calendar
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">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:spry="http://ns.adobe.com/spry">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>SSAC /// Calendar</title>
<script src="SpryAssets/SpryData.js" type="text/javascript"></script>
<script src="SpryAssets/SpryHTMLDataSet.js" type="text/javascript"></script>
<script src="scripts/YUI/2.6.0/build/yahoo-dom-event/yahoo-dom-event.js" type="text/javascript"></script>
<script src="scripts/YUI/2.6.0/build/calendar/calendar-min.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
var ds1 = new Spry.Data.HTMLDataSet("events.html", "events");
//-->
</script>
<link href="main.css" rel="stylesheet" type="text/css" />
<link href="scripts/YUI/2.6.0/build/fonts/fonts-min.css" rel="stylesheet" type="text/css" />
<link href="scripts/YUI/2.6.0/build/calendar/assets/skins/sam/calendar.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header"></div>
<div id="navbar"><script type="text/javascript" src="navbar.js"></script></div>
<div id="content">
<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 ---//
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>
<div spry:detailregion="ds1" id="events">
<div spry:state="showEvent">
<table width="400" border="0">
<tr>
<td colspan="2">Event Name:{Event}</td>
</tr>
<tr>
<td rowspan="3"><u>Desription:</u><br />
{Description}</td>
<td><u>Time:</u> {Time}</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>
<div id="footer"><script type="text/javascript" src="footer.js"></script></div>
</div>
</body>
</html>
AdChoices