|

»

Using a JSCalendar as a Date Picker [Code Snippet]

View: New views

4 Messages — Rating Filter: Alert me

	Using a JSCalendar as a Date Picker [Code Snippet] by Steve_S :: Rate this Message: Reply to Author \| View Threaded \| Show Only this Message Hi All, 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
	Re: Using a JSCalendar as a Date Picker [Code Snippet] by Hugh Gibson :: Rate this Message: Reply to Author \| View Threaded \| Show Only this Message > I thought I'd post my achievement in getting JSCalendar working within > Qooxdoo. Posted at http://qooxdoo.oss.schlund.de/snippets/integrating-jscalendar Thanks very much! Keep them coming... Hugh ------------------------------------------------------- This SF.Net email is sponsored by xPML, a groundbreaking scripting language that extends applications into web and mobile media. Attend the live webcast and join the prime developer group breaking into this new coding territory! http://sel.as-us.falkag.net/sel?cmd=lnk&kid=110944&bid=241720&dat=121642 _______________________________________________ Qooxdoo-devel mailing list Qooxdoo-devel@... https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
	RE: Using a JSCalendar as a Date Picker [Code Snippet] by Jason Priebe :: Rate this Message: Reply to Author \| View Threaded \| Show Only this Message As a follow-up, 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; } > -----Original Message----- > From: qooxdoo-devel-admin@... > [mailto:qooxdoo-devel-admin@...] On Behalf > Of Hugh Gibson > Sent: Thursday, March 02, 2006 2:53 AM > To: qooxdoo-devel@... > Subject: Re: [qooxdoo-devel] Using a JSCalendar as a Date > Picker [Code Snippet] > > > I thought I'd post my achievement in getting JSCalendar > working within > > Qooxdoo. > > Posted at > http://qooxdoo.oss.schlund.de/snippets/integrating-jscalendar > > Thanks very much! Keep them coming... > > Hugh > > > ------------------------------------------------------- > This SF.Net email is sponsored by xPML, a groundbreaking > scripting language that extends applications into web and > mobile media. Attend the live webcast and join the prime > developer group breaking into this new coding territory! > http://sel.as-us.falkag.net/sel?cmd=lnk&kid=110944&bid=241720& > dat=121642 > _______________________________________________ > Qooxdoo-devel mailing list > Qooxdoo-devel@... > https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel > ------------------------------------------------------- This SF.Net email is sponsored by xPML, a groundbreaking scripting language that extends applications into web and mobile media. Attend the live webcast and join the prime developer group breaking into this new coding territory! http://sel.as-us.falkag.net/sel?cmd=lnk&kid0944&bid$1720&dat1642 _______________________________________________ Qooxdoo-devel mailing list Qooxdoo-devel@... https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
	RE: Using a JSCalendar as a Date Picker [Code Snippet] by Hugh Gibson :: Rate this Message: Reply to Author \| View Threaded \| Show Only this Message > As a follow-up, Posted. Hugh ------------------------------------------------------- This SF.Net email is sponsored by xPML, a groundbreaking scripting language that extends applications into web and mobile media. Attend the live webcast and join the prime developer group breaking into this new coding territory! http://sel.as-us.falkag.net/sel?cmd=lnk&kid=110944&bid=241720&dat=121642 _______________________________________________ Qooxdoo-devel mailing list Qooxdoo-devel@... https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel