Integrating JSCalendar
What you need:
- qooxdoo 0.5.0 or higher
- A calendar image (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”, remove the spaces from the “script” tags (6 places) 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> <scr ipt 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.
You have to do a little more work if your text field and image objects are not visible on screen when window.application.post fires (for example, if the widgets are on a non-active page of a QxBarView).
To handle this, add an event listener to imgCal so that when it first appears, you can set up the calendar, like this:
window.application.main = function() { // rest of init code deleted... imgCal.addEventListener("appear", on_imgCal_appear); // rest of init code deleted... } // use a variable to ensure that you only initialize the // calendar once var calendar_init = false; function on_imgCal_appear (e) { if (calendar_init) { return; } 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) }); calendar_init = true; }
From Steve Scargall, originally posted here
To get the date set by jscalendar, try this (as suggested by Sebastian):
var xdate = txtDate.getComputedValue();
or this as noted by Jason Priebe
var xdate = document.getElementById("f_date_b").value;
Note that this will not work:
var xdate = txtDate.getValue();
(forget about the fact that txtDate is a local var in Steve’s example; even if it were available to an event handler, the value would be null).
