Javascript pop-up calendar for input form

I would love to see this also. The current method of inputting dates and times is a bit awkward.
Especially the dropdown for the minutes entry. For a dropdown, accuracy down to the minute is probably not required for most people.

Thanks for a good module.

A popup JS calendar would be streets ahead of the current drop downs. Somebody _please_ build this. ;-)

The minutes should also be configurable. most people only need :00, :15, :30, :45 I would have thought.

Perhaps it should be an admin setting.

The minutes should also be configurable. most people only need :00, :15, :30, :45 I would have thought.

Perhaps it should be an admin setting.

a swell idea. i just submitted this as a trivial patch against 4.6. i'll work on a 4.7 version ASAP and create a new issue for that when it's ready. sadly, even the 3 line diff failed to apply against 4.7... blasted forms API. ;)

-derek

for those who care, i posted the patch against 4.7 that provides an admin setting for the grainularity of the drop-down options for the minutes field.

I've added a jscalendar implementation to the Javascript Tools package, http://drupal.org/node/57285. Not quite working yet--there's a conflict with drupal.css somewhere. Has anyone run into/fixed this?

I think the js calendar is working with the very latest cvs version of form.inc. It didn't work until I updated form.inc. I like the toolkit, I just posted a question on your issues page about customizing jscalendar a bit.

I have created a patch that will add an option to use the jscalendar pop-up calendar instead of the normal drop-down date selector. I made the following changes to the event module:

1) When editing content types, right below the selection of where the event should be displayed, you will now see an option to use either a normal date selector or the javascript pop-up calendar. Your choice is stored as a variable for that node type. The option to use jscalendar will not be available unless jscalendar is installed, but if it is not installed, you will see a message that a javascript pop-up calendar would be an option if jscalendar was installed, with a link to the jstools project page.

2) When creating the input form, the program checks the selector variable created above to see if jscalendar is to be used and also checks that jscalendar is installed. If it passes both tests, the input form uses jscalendar, otherwise it uses the regular date selector.

3) I added to the validate function a place to check if jscalendar was used and if so to update the node to convert the jscalendar input (which is basically a textfield in an iso date format) back into an array like the one the normal selector. From that point on it can use the same validation and processing as the regular date selector.

You can get jscalendar from the jstools link provided earlier in this thread (http://drupal.org/node/57285).

Changing the title slightly to make it more clear. Also, I want to repeat that jscalendar (and other js tools) may not work right unless you have the latest version of form.inc, so be sure that is up to date.

Hi KarenS.

I just tried your patch. I'm running drupal / event / flexinode from CVS (as of 4/24).
Everything is a fresh install as of today.
All seemed OK - I went to: admin/settings/content-types/flexinode-1
(my event node type) and set Event date selector:* to Javascript pop-up calendar.

However, when I add an event, the menus don't show up (see attached).
Maybe there's an error in the code because the page does not seem to finish
loading. (Notice lower menus are not bold.)

THanks for any ideas. I'm really excited about your patch and hope it gets
committed.

Sorry I didn't try this before. I disables 'event all day' and it works fine.

It just appears that the calendar is not compatible with 'event all day'.

Event all day uses javascript and I am no javascript expert, but it looks like it is trying to update fields with names like 'end-hour' and 'end-minute', fields that you would have in a drop-down select list which do not exist in the form if you use jscalendar (since jscalendar uses a single textfield for the date).

The question is what to do about it? I could add a test in the module to make the jscalendar option available only if jscalendar is enabled and event all day is disabled, but don't know if that is really the best approach. I'm not comfortable trying to do anything that would get jscalendar's javascript and event all day's javascript working together so that event all day has the same effect on jscalendar's textfield as it does on a drop-down select field, but if someone else knows how to do it and wants to submit a patch that would work I'd be happy to try to incorporate it. Actually, it would probably need to be a patch for event all day that tests whether a jscalendar field is being used and alters its behavior accordingly.

This might also be the problem:

http://drupal.org/node/54980, but I haven't tried it yet.

A bug fix for event_all_day has been committed to HEAD. But though it works for other JS scripts, the bug seems to persist for exactly this one... is there a JS expert who can spot the problem?

Generally I think a date selector is a great idea! And thank you for the work done! But though I'd like to see this one implemented asap, there is still a number of aspects that have to be further elaborated:

* We need a more simple, clear and lightweight calendar script than jscalendar is. The overly complex graphical skin is confusing and takes too much bandwidth. The drag functionality of various buttons is absolutely non-standard and non-intuitive.
* A date selector using less JS and more PHP would be better. JS seems to be only needed for opening the selector and filling in the output. Check out this here as an example for a completely PHP-based script. Maybe we find something perfect for us...
* Do we really want to include the time selection within the date selector, though nobody expects it there? I think we should use the date selector just for the date and maybe another time selector for the time.
* We should definitely find a way combining the date selector with easy to use textbox. The user must have a choice and this combined field ("2006-05-01 02:05:00") is no choice.
* I would also like to see two arrows for moving +/- 1 day. See this one as an example for a user friendly navigation (though I don't like the date selector).

Please don't feel offended by my suggestions - I just think we should do the things right from the beginning!

KarenS is correct: event all day looks for specific form elements that will not be present under this patch.

If there's support for this patch, I'd be willing to write a patch for event all day to test for fields before acting on them.

@pancho: I evaluated a number of libraries before choosing jscalendar to build on. The key criterion for me was compatibility with Drupal js approaches.

I found another DHTML script here.
It's pretty old and the week numbers are missing but otherwise it's lighter and has a very good, plain layout.

Maybe someone can come up with an idea how to bring the best of all these solutions together... (I'm unfortunately not enough into these advanced PHP/JS things to contribute a solution myself)

Thanks again for your work!

I heartily agree with each one of pancho's bullets in #13.
jscalendar is much better than the previous solution, and I appreciate the efforts.
It does take a lot of explaining to my users, though.

The inclusion of the time field and the exact format of the text are both configurable. You could have 2 text boxes, one with the jscalendar for the date and another plain text box for the hour and minute, or a drop-dow n selector for the hour and minute. I combined it all into one because you can select the whole thing at one time, but it doesn't have to work that way.

I think the format of the date text box needs to be YYYY-MM-DD to work well internationally since other shortcut formats can be misconstrued. If you want the hour and minute to be separate, I personally would just as soon see a textbox with HH:MM as a selector since I think it is much faster to type in than scroll through a long list of hours and minutes, but that is just my preference.

Maybe we need to find a way to make some of these options configurable, probably in the event settings. I would have to think about how to implement it, but maybe we offer a short list of options -- date and time together as in the current configuration, date and time as two separate text boxes, date as js calendar with time as a text box, etc. etc.

That doesn't address the question of whether or not you like the jscalendar skin itself. As nedjo pointed out, you can't just pick up any old javascript and drop it in here, it has to be compatible with drupal's javascript, which is starting to include a library of ajax functions, so compatibility with existing js will be a really important and possibly limiting factor.

Personally, I like jscalendar fine. The only change I would like to see is to have the button be a small calendar icon instead of the dots to make it easier to see what it is (a feature request I already entered on the jstools page).

Hey KarenS,

Thank you! I applied the patch on cvs event.module and it works great. As you mentioned, it would be nice to have a small icon on the button.

Thanks again!

Jim

There is a small patch avaiable to change the dotted button in a small icon, look here: Configure button selector for js calendar.

Sorry, node/58080

I can't see a patch here.

I am only going to add a feature like this if it passes accessibility tests.

The patch is in the middle of the page (#7). It degrades to a plain textfield, so it should pass accessibility tests.

heh, thanks.

If it degrades, then we won't need a setting. The jscalendar module should simply be used if installed. This should be pointed out in the INSTALL file (and on project/event).

Actually, I'm not sure it should be used automatically. I can see reasons why someone would want to use the jscalendar for event content type A and not for event content type B, depending on the audience and the way that various content types are being used. That's why I put the jscalendar settings at the content-type settings level rather than as a global event setting.

Do you really think somebody would use jscalendar one one node type and not on another on the same site? I think that would be rather confusing for users. I am still in favour of removing the setting. Each setting less is a win for usability.

I'll re-roll the patch then (probably tomorrow).

once event.module turns into kick-ass date/time fields in CCK, there could be separate date/time field types for the different possible input methods. then the site admin could decide what date selectors made the most sense on a per-node-type basis. until then, just make it site-wide, IMHO.

Here's the re-rolled patch. It just implements jscalendar automatically if installed with no settings.

Applied!

Oops, wrong file. I meant to run the date through the _event_date function.

Sorry killes!

Sorry killes, here is another patch to fix the first patch and run the jscalendar date through _event_date.

applied