This is my first post to the group so I'd firstly like to thank the developers for a great framework. I'm still trying to learn it but so far so good.
As it's been asked before in the archives, I thought I'd post my achievement in getting JSCalendar working within Qooxdoo.
What you need:
o qooxdoo 0.5.0 or higher
o jscalendar 1.0 or higher - http://www.dynarch.com/demos/jscalendar/
o A calendar image - http://www.anim8.biz/images/Calendar.png (Resized to 16, 22, 32, 64, 128px)
My directory structure looks like this:
Base
|
+- qooxdoo
| |
| +- (...)
|
+- calendar
| |
| +- jscalendar-1.0
|
+- images
|
+- 16
| |
| +- calendar_16.png
|
+- 22
+- 32
+- 64
+- 128
Now for the code. save the following as "cal.html" and put it in the <Base> directory:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" " http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns=" http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
< meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
<title>Date Picker :: Test</title>
<script type="text/_javascript_">
var QxSettings =
{
imageCorePath : "qooxdoo/images",
imageIconPath : "qooxdoo/themes/icons",
imageWidgetPath : "qooxdoo/themes/widgets"
};
</script>
<script type= "text/_javascript_" src="qooxdoo/script/qooxdoo.js"></script>
<script type="text/_javascript_" src= "calendar/jscalendar-1.0/calendar.js"></script>
<script type= "text/_javascript_" src="calendar/jscalendar-1.0/lang/calendar-en.js"></script>
< script type="text/_javascript_" src="calendar/jscalendar- 1.0/calendar-setup.js"></script>
<link rel="stylesheet" type="text/css" media="all" href="calendar/jscalendar-1.0/skins/aqua/theme.css" title="win2k-cold-1" />
</head>
<body>
<script type= "text/_javascript_">
window.application.main = function()
{
var doc = this.getClientWindow().getClientDocument();
var labelDate = new QxAtom("Date:");
with(labelDate)
{
setTop(3);
setLeft(0);
setWidth("35%");
setHorizontalChildrenAlign("left");
};
var txtDate = new QxTextField();
with(txtDate)
{
setTop(0);
setLeft(30);
setWidth("60");
setHtmlProperty("name","f_date_b");
setHtmlProperty("id", "f_date_b");
};
var imgCal = new QxImage("./images/16/calendar_16.png");
with (imgCal)
{
setTop(0);
setLeft(170);
setHtmlProperty("name","f_trigger_b");
setHtmlProperty("id","f_trigger_b");
};
doc.add(labelDate, txtDate, imgCal);
};
window.application.post = function(){
/* Setup the Calendar Popup Event handlers */
Calendar.setup({
inputField : "f_date_b", // id of the input field
ifFormat : "%m/%d/%Y %I:%M %p", // format of the input field
showsTime : true, // will display a time selector
button : "f_trigger_b", // trigger for the calendar (button ID)
singleClick : false, // double-click mode
step : 1 // show all years in drop-down boxes (instead of every other year as default)
});
};
</script >
</body>
</html>
JSCalendar itself is highly configurable so play around with it to get the output you desire.
Hope it helps someone
Steve
