YUI 2.8 Calendar issue

Good morning (for me, anyway!)

I'm currently using an adaptation of DavGlass's Calendar with Tooltip overlay in an attempt to make a company calendar for our intranet. This will pull data from a database using Java struts.

And so far, it works great! I set up the query, feed the dates into the array, and it draws the calendar perfectly. I've managed to even set up a function that calls pop-up window that displays the information for that date.

However, I've noticed the following two behaviors, and I'm not sure how to go about fixing them. (And I've been looking at it for a couple days now.)

1. A date that's in "selected" state (due to being pulled from the database), deselects once you click on it. I need the date to stay selected. To that end, I found the reset() command and that *does* help keep the date selected, however it leads to...

2. The calendar moves back to the page of origin instead of staying on the currently selected month. I've tried to fix this by setting the "pagedate" in a cookie and then trying to pull that (the cookie value)in as the new date to use for that. I've had no luck with that.

If anyone has any ideas as to go about solving those two issues, I'd appriciate it. Those are the only two things keeping the "application" from going online. I've already created the management system and all the other parts that are required. I just don't know what's causing the other two problems.

A working example (without the database backend, so just the script and html) can be found here:
http://terrilyn2001.bravehost.com/besCal.htm. (It's not on my work server due to security issues. Sorry in advance for the advertisments.)

My code is below.
Thanks in advance for any help given!

<html lang="en"> 

<title>TESTING: Intranet Events</title>

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.0r4/build/reset-fonts-grids/reset-fonts-grids.css">
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.0r4/build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.0r4/build/calendar/assets/skins/sam/calendar.css"/>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.0r4/build/assets/skins/sam/skin.css">
<link rel="stylesheet" type="text/css" href="http://developer.yahoo.com/yui/assets/dpSyntaxHighlighter.css">
<script src="http://us.js2.yimg.com/us.js.yimg.com/i/ydn/yuiweb/js/dpsyntax-min-2.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/utilities/utilities.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/container/container-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/calendar/calendar-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/event/event-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/dom/dom-min.js"></script>

<style type="text/css" media="screen">
/* highlight the whole row */

tr.hilite-row td.calcell {

/* highlight the current cell in the standard highlight color */

tr.hilite-row td.calcellhover {
border:1px solid #FF9900;

/* make sure out of month cells don't highlight too */
tr.hilite-row td.calcell.oom {
border:1px solid #E0E0E0;
#cal1Container {
margin: 2em;
.tt {
width: 250px;
p {
margin: .5em;
padding: .5em;
textarea {
width: 100%;
.yui-tt-shadow {
display: none;


<body class="yui-skin-sam">

<div id="cal1Container"></div>

<script type="text/javascript">

function setCookie (name, value) {
var exdate=new Date();exdate.setDate(exdate.getDate()+1);
document.cookie = name + "=" + escape (value)+ ";expires="+exdate.toGMTString();// + <-- save cookie value with expiration date of 1 year

function getCookie (name) {
var dcookie = document.cookie;
var cname = name + "=";
var clen = dcookie.length;
var cbegin = 0;
while (cbegin < clen) {
var vbegin = cbegin + cname.length;
if (dcookie.substring(cbegin, vbegin) == cname) {
var vend = dcookie.indexOf (";", vbegin);
if (vend == -1) vend = clen;
return unescape(dcookie.substring(vbegin, vend));
cbegin = dcookie.indexOf(" ", cbegin) + 1;
if (cbegin == 0) break;
return null;
function removeCookie(name)
document.cookie = name + '=; expires=Thu, 01-Jan-1970 00:00:01 GMT';
var Dom = YAHOO.util.Dom,
Event = YAHOO.util.Event,
cal1 = null,
dateHolder = [],
myTooltip = null,
myDates = {

var d=new Date();
var month=d.getMonth() + 1;
var year=d.getFullYear();
var tempToday="";
var strDates="";

function init() {

for (var tmpDate in myDates) {
strDates = strDates + ',' + tmpDate;

cal1 = new YAHOO.widget.Calendar('cal1', 'cal1Container', {
pagedate: tempToday,
selected: strDates,
title: "Best Events",

function mySelectHandler(type,args,obj) {
var selected = args[0];
var selDate = this.toDate(selected[0]);
getDate(selDate, this);


function myDeselectHandler(type, args, obj) {
var deselected = args[0];
var deselDate = this.toDate(deselected[0]);
getDate(deselDate, this);

function handleCalendarBeforeRender () {
var calDate=cal1.cfg.getProperty("pageDate");
var newState = String(calDate.getMonth() + 1)+"/"+String(calDate.getFullYear());
document.getElementById('newState').value= newState;

cal1.selectEvent.subscribe(mySelectHandler,cal1, true);
cal1.deselectEvent.subscribe(myDeselectHandler, cal1, true);
cal1.beforeRenderEvent.subscribe(handleCalendarBeforeRender, cal1, true);

var windowPrefs = "height=400,width=600,status=yes,scrollbars=yes,resizable=yes";

function getDate(dt, cal) {
var wStr = cal.cfg.getProperty("WEEKDAYS_LONG")[dt.getDay()];
var mStr = cal.cfg.getProperty("MONTHS_LONG")[dt.getMonth()];
var dStr = dt.getDate();
var yStr = dt.getFullYear();
var mVal = dt.getMonth()+1;


var eventDate=String(yStr)+String(mVal)+String(dStr);





0 Replies

Recent Posts

in General Discussion at YDN