« Return to Thread: Using a JSCalendar as a Date Picker [Code Snippet]

Using a JSCalendar as a Date Picker [Code Snippet]

by Steve_S :: Rate 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

« Return to Thread: Using a JSCalendar as a Date Picker [Code Snippet]