:: Forum >>

Example JSCalendar as AW Combo Popup


This is a simple example, and I worked a while proving the concept to myself, so someone else can expand these functions. (SHOULDN'T BE NECESSARY... the docs explain the functions.)

I just wanted to post so someone else could have an IDEA on where to start. The key is my variable called self....

(0) Include your calendar.js files AFTER the AW files.
(1) First set self=this (this being the Combo control)
(1b) Then, the onSelect sets the date with self.setControlText(date).
(2) Next, make sure to destroy the calendar in the onClose function.
(3) Create your calendar using the constructor. Set it up as per docs. I don't like the setup helper js because it is yet ANOTHER file to include. I'd rather comb docs until i find the constructor, as I did below.
(4) Immediately show the calendar...
(5) return a blank AW.HTML.DIV (so no errors come from the popup)

That's really it.....

The only quirk I see is the dragging.... but it won't drag since it is shown in a "non-existent" portion of javascript code. So if you don't mind the draggable cursor and/or the "Drag to move" text, this is it.

Cheers
John Mason
Tuesday, December 19, 2006
I'm an idiot... Ctrl-V is paste....


<html>
<head>
<title>JSCalendar and AW version 2.0.1</title>
<link href="runtime/styles/aqua/aw.css" rel="stylesheet"></link>
<script language="javascript" type="text/javascript" src="runtime/lib/aw.js"></script>
<link rel="stylesheet" href="calendar-blue.css"></link>
<script type="text/javascript" src="calendar.js"></script>
<script type="text/javascript" src="calendar-en.js"></script>
<style type="text/css">
.special { background-color: #000; color: #fff; }
</style>
</head>
<body>
<script>
var DatePicker2 = new AW.UI.Combo;
DatePicker2.setId("DatePicker2");
DatePicker2.getContent('box/text').setAttribute('autocomplete', 'off');
DatePicker2.setPopupTemplate(function(){
var self=this;

var onSelect = function(calendar, date){if(calendar.dateClicked){self.setControlText(date);calendar.callCloseHandler();}}
var onClose = function(calendar){calendar.hide();calendar.destroy();}
var disallowDate=function(date){if(date.getFullYear()==2006&&date.getMonth()==11&&date.getDate()==25){return true;} return false;};

var SPECIAL_DATES={2006:{0:[1],6:[4],10:[11,18],11:[25,30,31]},2007:{0:[1],5:[26,29],6:[4],10:[11,18],11:[25,30],},2008:{0:[1],6:[4],11:[25],}};

var dateIsSpecial = function(year, month, day){var m = SPECIAL_DATES[year];if (!m) return false;var d = m[month];if (!d) return false;for (var i in d) if (d[i] == day) return true;return false;}
function dateStatusHandler(date, y, m, d){if (dateIsSpecial(y, m, d)) return "special";else return false;}

var calPopup = new Calendar(0, null, onSelect , onClose);
calPopup.weekNumbers = true;
calPopup.showsTime = true;
calPopup.setDateFormat("%m/%d/%Y");
calPopup.setDisabledHandler(disallowDate);
calPopup.setDateStatusHandler(dateStatusHandler);
calPopup.create();
calPopup.show();
return new AW.HTML.DIV;
});
document.write(DatePicker2);
</script>
</body>
</html>
John Mason
Tuesday, December 19, 2006
WOW!

I found a fix that makes it work WELL.... okay, with the EXACT code i have above for the ActiveWidgets, but in the calendar.js (better use a BIG editor or vi in linux like I did for the calendar_stripped.js)

Add the following to the Calendar.prototype.create function: (USING VERSION 1.0 of JSCALENDAR.... 2.0.1 AW)

calendar.js (similar in calendar_stripped.js)
...
Calendar.prototype.create = function (_par,_draggable) {
    var parent = null;
    if (! _draggable) { this.isDrag = true; } else { this.isDrag = false; }
    if (! _par) {
        // default parent is the document body, in which case we create
        // a popup calendar.
        parent = document.getElementsByTagName("body")[0];
        this.isPopup = true;
    } else {
        parent = _par;
        this.isPopup = false;
    }
..........


    row = Calendar.createElement("tr", thead);
    var title_length = 6;
    (this.isPopup && this.isDrag) && --title_length;
    (this.weekNumbers) && ++title_length;

..........

    hh("?", 1, 400).ttip = Calendar._TT["INFO"];
    this.title = hh("", title_length, 300);
    this.title.className = "title";
    if (this.isPopup && this.isDrag) {
        this.title.ttip = Calendar._TT["DRAG_TO_MOVE"];
        this.title.style.cursor = "move";
        hh("&#x00d7;", 1, 200).ttip = Calendar._TT["CLOSE"];
    }

..........

    cell.className = "ttip";
    if (this.isPopup && this.isDrag) {
        cell.ttip = Calendar._TT["DRAG_TO_MOVE"];
        cell.style.cursor = "move";
    }
    this.tooltips = cell;

....


Basically, all I did was add the _draggable parameter to the function. Chances are, you can easily go back to all of your Calendar.create calls and change those you STILL want to BE draggable to have an additional 'true' parameter (in addition to the null parameter so that the calendar is still a popup).

So, in other words: Calendar.create() takes an argument already. If it is null, then the calendar appears as a popup, draggable.... BUT after the changes, the popup defaults to non-draggable. You have to add the second true value as a parameter to make it draggable.


SO Back to AW: in order to have the Combo popup work like we might want, we make the changes above, then any non-combo like calendars we add the 'true' parameter to. BUT the combo entries we leave as-is.



So, if you use the code from my previous posts, you'll get a working calendar popup in a combo box.

BUT now let's say you want more than one! Use the following as another template:
(just a rewritten example to put the calPopup into the right scope for repitition and the show() function SHOWS it relative to that element.)




<html>
<head>
<title>JSCalendar and AW version 2.0.1</title>
<link href="runtime/styles/aqua/aw.css" rel="stylesheet"></link>
<script language="javascript" type="text/javascript" src="runtime/lib/aw.js"></script>
<link rel="stylesheet" href="calendar-blue.css"></link>
<script type="text/javascript" src="calendar.js"></script>
<script type="text/javascript" src="calendar-en.js"></script>
<style type="text/css">
.special { background-color: #000; color: #fff; }
</style>
</head>
<body>
<script>

var SPECIAL_DATES={2006:{0:[1],6:[4],10:[11,18],11:[25,30,31]},2007:{0:[1],5:[26,29],6:[4],10:[11,18],11:[25,30],},2008:{0:[1],6:[4],11:[25],}};
var dateIsSpecial = function(year, month, day){var m = SPECIAL_DATES[year];if (!m) return false;var d = m[month];if (!d) return false;for (var i in d) if (d[i] == day) return true;return false;}

var DatePicker1 = new AW.UI.Combo;
DatePicker1.setId("DatePicker1");
DatePicker1.getContent('box/text').setAttribute('autocomplete', 'off');
DatePicker1.setPopupTemplate(function(){
var self=this;

this.calPopup_onSelect = function(calendar, date){if(calendar.dateClicked){self.setControlText(date);calendar.callCloseHandler();}}
this.calPopup_onClose = function(calendar){calendar.hide();calendar.destroy();}

this.calPopup_dateStatusHandler = function(date, y, m, d){if (dateIsSpecial(y, m, d)) return "special";else return false;}

this.calPopup = new Calendar(0, null, this.calPopup_onSelect , this.calPopup_onClose);
this.calPopup.weekNumbers = false;
this.calPopup.setDateFormat("%m/%d/%Y");
this.calPopup.setDateStatusHandler(this.calPopup_dateStatusHandler);
this.calPopup.create();
this.calPopup.showAtElement(this.element(),"Bc");
return new AW.HTML.DIV;
});
document.write(DatePicker1);

</script><hr /><script>

var DatePicker2 = new AW.UI.Combo;
DatePicker2.setId("DatePicker2");
DatePicker2.getContent('box/text').setAttribute('autocomplete', 'off');
DatePicker2.setPopupTemplate(function(){
var self=this;

this.calPopup_onSelect = function(calendar, date){if(calendar.dateClicked){self.setControlText(date);calendar.callCloseHandler();}}
this.calPopup_onClose = function(calendar){calendar.hide();calendar.destroy();}

this.calPopup_dateStatusHandler = function(date, y, m, d){if (dateIsSpecial(y, m, d)) return "special";else return false;}

this.calPopup = new Calendar(0, null, this.calPopup_onSelect , this.calPopup_onClose);
this.calPopup.weekNumbers = false;
this.calPopup.setDateFormat("%m/%d/%Y");
this.calPopup.setDateStatusHandler(this.calPopup_dateStatusHandler);
this.calPopup.create();
this.calPopup.showAtElement(this.element(),"Bc");
return new AW.HTML.DIV;
});
document.write(DatePicker2);


</script>
</body>
</html>
John Mason
Tuesday, December 19, 2006
P.S. Alex.... if it isn't too much trouble, can you help me turn this little thing into an AW.Template.Calendar object?

I think it would be really useful!


Thanks!
John Mason
Wednesday, December 20, 2006


Sorry, ignore this... this is so that the search engine for this forum will pick up this post easier... I had a HELL of a time finding any info to start. =)

date picker
date picker combo
date combo

John Mason
Wednesday, December 20, 2006
Hi,

Good one.
There are a few problems though.
It works fine in FireFox, but in IE7, there's an error about extra commas in the var SPECIAL_DATES line.
Look for ,} and change it to just } to fix the error.

Further, the calendar seems to open to the right of the drop down box in IE7, but works fine in FireFox (opens below drop down box).
I haven't yet looked into fixing this yet.

Regards,
Ankur
Ankur Motreja
Wednesday, December 20, 2006

This topic is archived.


Back to support forum

Forum search