Pop-up widget calendar: how do we do that?

I saw Walter mentioning it as an example on the forum but not really a specific description how to go about. I need a small widget that people can click on and the date will be added on a text field - as you see on booking forms.
If anybody has some advise how to integrate that on a FW page…

BTW: I got a nice one downloaded, but the next question is than how to integrate that on a FW form… http://codetale.com/2007/02/23/javascript-calendar-widget/

Thanks!

Paul


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I tried to dig out the one I did that had magic picking lists that
“knew” how many days were in each month and so forth, but I couldn’t
find it.

So after a bit of digging on Scripteka, I found a really clean and
easy-to-add one: http://calendarview.org

For a basic way to apply it in Freeway, lay out your page the way you
want it to appear. Make sure to add an ID to your date field (Freeway
will add an ID to the container DIV, but that’s not the same thing –
use the Extended dialog to make sure it attaches to the form field).

Now add the Protaculous Action to your page, and choose the prototype-
packed library. Click on one of the Function Body buttons, and paste
the following inside the dialog:

Calendar.setup({
	dateField: 'date'
})

In this example, I’ve used ‘date’ as the ID of my form field. Change
this word to be exactly the same as the ID you add on your page. (You
can have more than one, just make sure that they have unique IDs, and
add an instance of the code block above for each within the same
dialog in Protaculous.)

Next, you need to add the stylesheet and the calendar script to the
page. You can try the External JavaScript Action for this, but there
may be an issue with it not getting the script high enough into the
page to have it be loaded before the script calls it. The stylesheet
can be added using the External Stylesheets Action or by hand-coding.
Here’s the code for both, just paste it into the Page / HTML Markup
dialog in the “before /head” slot, and use Upload Stuff or an FTP
application to put the files in the same folder as your page on the
server.

<script src="calendarview.js" type="text/javascript" charset="utf-8"></ 
script>
<link rel="stylesheet" href="calendarview.css" type="text/css"  
media="screen" charset="utf-8"/>

Publish, and test it out. Click on the date field, and it should be
covered by a nice calendar centered on either whatever date you had in
the field already, or on today’s date if you left it blank.

It’s very hackable, the CSS is well written and easy to change if you
need to. I put a simple page up at <date picker

if you want to see the absolute minimum example possible.

Walter

On Dec 11, 2008, at 11:18 PM, paulvw wrote:

I saw Walter mentioning it as an example on the forum but not really
a specific description how to go about. I need a small widget that
people can click on and the date will be added on a text field - as
you see on booking forms.
If anybody has some advise how to integrate that on a FW page…

BTW: I got a nice one downloaded, but the next question is than how
to integrate that on a FW form… http://codetale.com/2007/02/23/javascript-calendar-widget/

Thanks!

Paul


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Wow Walter, that looks good… indeed! Thanks. Gonna try it straight away. Keep people posted here, coz I think more might use the thing at some point.

Thanks again!

Paul


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Walter… somethings goes wrong here… is it possible that you mail me the simple FW file you created in this example?
paulvanwijgerden-then-the-at-gmail.com


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

on 12/12/2008 09:49, paulvw at email@hidden wrote:

Walter… somethings goes wrong here… is it possible that you mail me the
simple FW file you created in this example?
paulvanwijgerden-then-the-at-gmail.com

Could I make a general request that when anyone goes to the trouble to
create a sample page like this that they also make available for download
the FW source file.

I do understand it’s extra work, but like Paul, me and I suspect many other
FW users not used to adding code to FW pages would find this a real extra
benefit.

When Walter first put up instructions and a sample file for the Carousel
action using Scriptaculous I certainly found it invaluable to “unpick” it’s
construction.

3 cheers for Walter ;~}}

Best wishes Peter

================================
Peter Tucker, Oxford UK email@hidden


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Actually, I remember indeed the Carousel example which I also downloaded before. It was a huge blessing and got a great site because of that sample file!!!

Yes, Thanks Walter!!!


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

The example I posted was hand-coded, just a lot quicker that way. But
I took the time to work through it in Freeway, and uncovered a couple
of things that might trip you up if you were trying to code it in
Freeway.

First, the CSS for the calendar did not include any notion of z-index.
If your form field is in a layer, then the calendar will be stuck
behind it, not over the top of it, and you won’t be able to see the
entire calendar. A one-line edit in the CSS, but necessary nonetheless.

Second, the External CSS Action needs major work before it will be
suitable for this sort of application, sad to say. I haven’t looked at
it in anger in quite a while. I’ll let you know if and when I fix it
up. Basically, it needs to be able to upload and link to a file, not
just a URL as it currently does. I ended up using Upload Stuff and the
HTML Markup dialog to insert the reference to the CSS.

So here’s the reference document, with the following caveat: you must
download and install the following Actions before this document will
really work. (Due to the way that Freeway caches local copies of
Actions, but not the resource files that those Actions include within
their “bundle”, if you simply run the file in Freeway Pro 5, it will
appear to work, but will “epic fail”, as my oldest daughter puts it.)

  1. Protaculous (ActionsForge)
  2. Upload Stuff (Somewhere in the OLD KnowledgeBase)
  3. External JavaScript (ActionsForge)

http://scripty.walterdavisstudio.com/datepicker

Walter

On Dec 12, 2008, at 2:01 AM, paulvw wrote:

Wow Walter, that looks good… indeed! Thanks. Gonna try it straight
away. Keep people posted here, coz I think more might use the thing
at some point.

Thanks again!

Paul


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Aha… I assume that explains it all. Thanks again for finding the problems we encountered in FW. Wow… Gonna give it a try again!

Cheers,

Paul


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options