Credits for the magnificent jCalendar go to Ted Serbinski of course.

Notes about the implementation:
- when the optional jCalendar parameter for date_select_input() is set to true, the normal defaults will be overridden for more sensible defaults
- both jcalendar.js and jcalendar.css are included in the Date module
- jcalendar.js is unaltered
- jcalender.css is altered to work nicely across multiple themes (it has been tested with all core themes), its relative sizes are untouched (meaning that you can set the font size of your browser larger and the calendar will scale nicely)

Thanks to EclipseGC for trying to help me out with the CSS - I found it myself eventually :)

One issue left in the CSS though: when you hover the dates in Firefox, a 1 pixel thick horizontal line at the bottom of each cell won't get highlighted. It works fine in Safari though. I have absolutely no clue how to fix this (having tried numerous possible solutions), I'll leave that up to somebody else.

Demo: http://creditcalc.biz/demo

Comments

wim leers’s picture

StatusFileSize
new1.4 KB

The CSS file.

wim leers’s picture

StatusFileSize
new9 KB

The JS file.

rjleigh’s picture

Thanks for working on this; the jcalendar is a cool widget.

I applied the patch successfully, but didn't see any results immediately.

Looking at your code, I see you added a $jcalendar variable, but don't see where that would get set. I forced it to true in the date.module call, and now get the widget. But it doesn't seem to modify the month (maybe that's theme related?).

Haven't really gotten to far in unwinding this problem, since I'm not familiar with the date mod code either, but wanted to give some early feedback.

One more thing; to me, it would be more useful to link the calendar to a text field date entry.

Thanks again

wim leers’s picture

Are you sure you also downloaded the .js and .css files?

You have to set $jcalendar in your Form API element, of course. Like this:

  $form['invoice_date'] = array(
    'label' => t('Invoice date'),
    'granularity' => array('M', 'D', 'Y'),
    'required' => TRUE,
    'weight' => 2,
    'jcalendar' => TRUE,
  );

I disagree. I think this is more usable. It depends on your needs though. Also, since this is an option for the date_**select**_input() form element, a textfield would not be possible, a select however is.

Thanks for the feedback.

rjleigh’s picture

right, I moved the force to the template after thinking about it too. I guess I originally thought it should be set on an admin page.

I don't think the dropdowns are a huge problem, but I like the way this similar calendar works in the "Calendar appears both ways" example. BTW, did you see this calendar creator's offer of participation?: http://drupal.org/node/142181

wim leers’s picture

That's a very nice and unobtrusive way to use it indeed. But jCalendar relies on having three selects available, so that textfield really wouldn't be possible. The effect is very useful if you don't want the calendar to be displayed always. Perhaps we could add this feature, but that should be a second phase.

karens’s picture

Status: Needs review » Needs work

This will go into the 5.2 version of the Date module which I'm developing in HEAD. The Date API is significantly different in that version since it uses PHP 5 date function, so this patch won't work, but I do plan to get this into that version one way or another. I'm marking this CNW to keep it on the queue since the feature is not yet added to HEAD, and the code will need to be rewritten when it is.

rjleigh’s picture

Thanks for adding that, Karen. that's great news.

karens’s picture

Status: Needs work » Fixed

Ted told me he has decided not to continue working on his jcalendar because there is a better jquery calendar popup available, jquery-calendar (from the jquery plugins page). That popup only handles the date, so I found a popup to handle the time entry, jquery-timeentry, and created a module called date_popup to implement both of them. That module and the code to incorporate them into the date module are now in HEAD.

It's still experimental and needs debugging, but it's there, so I'm marking this fixed (the feature request is in).

wim leers’s picture

Thanks for the status update Karen!

Anonymous’s picture

Status: Fixed » Closed (fixed)
anders.fajerson’s picture

Status: Closed (fixed) » Fixed

KarenS: I've been working on a date/time picker for advpoll: http://drupal.org/node/172546. We got stuck on the way, but I plan to finish it (or now use your module, just saw it). I'm using jquery-calendar and an improved version of the time-picker plugin. Time-picker plugin is demoed here: http://labs.perifer.se/timedatepicker/ (that demo is outdated btw). (marking temporary back to fixed to gets some visibility, since there is no project page for date_popup yet)

karens’s picture

Actually I prefer the timepicker I used in date_popup. It has keyboard navigation, the ability to select an increment for minutes and seconds, the ability to have two time fields constrain each other, and more. And he dual licensed it as GPL just so I could include it with no licensing problems.

The date_popup code in HEAD is working pretty well and should be ready to go with the Date API version 5.2. The new Date API defines date elements you can set up as the form #type by making the element #type = 'date_popup'. The element takes a regular textfield and breaks it down into separate date and time fields for the widget in the element #process, then combines it back into a single date on validation.

The main holdup to releasing the 5.2 version of the Date API are some issues about how to incorporate timezones into each of the date elements, but I really hope to get it released pretty soon.

I'm no javascript expert so I'm open to improvements in the way I incorporated it, but I did show it to quicksketch at DrupalCon and he thought it looked OK.

karens’s picture

Status: Fixed » Active

Guess I'll mark it active until a release is ready.

anders.fajerson’s picture

Took a closer look at JQuery Time Entry, and it *is* nice. I first thought it was this one http://www.oakcitygraphics.com/jquery/clockpick/ClockPick.cfm. The time picker I've been using is GPL (I've asked, just as I did with JQuery calender, both agreed to dual license their work) and keyboard and AM/PM support was at least planned. BUT, JQuery Time Entry is at least equally good, if not better.

Seems like you took a slightly different route on converting the date+time. I did it all client-side. Interesting, I'll do a checkout and look at your code.

karens’s picture

Title: Offer jCalendar as an option for date_select_input(). » Offer jCalendar as an option for date selection

Changing title a bit, this no longer uses a select input field.

Also, just as a FYI, my intention is that the Date API 5.2 version that is almost ready to release would be a toolkit of date-related things that can be used by any module that needs advanced date functionality so we can share these kinds of things and not keep reinventing them. The API handles timezone conversions, dates earlier than 1901, has a whole slew of functions to create translated and untranslated arrays of day, month, and timezone names, has the ability to work with all types of date fields, including timestamp, datetime and ISO dates, has lots of functions to convert dates from one type to another, etc, etc. So you could consider requiring the Date API and using what's here, with whatever improvements you can contribute.

And I would *love* to see people with more javascript knowledge than I have get involved with Date and Calendar because I have lots of jquery things I'd like to add in. So I hope I'm getting you interested in this work :)

anders.fajerson’s picture

The intention of Date module (which I was aware of) are just perfect, I will talk to Chris about using it for our start/enddate support in Advanced Poll. Not sure if we need it for more then the pickers though.

On topic: I tried the JQuery Time Entry some more, and although it has great settings/keyboard support I don't find it as intuitive as the time picker. I'll see if I can make time picker a worthy competitor.

ChrisKennedy’s picture

Will that code require the use of http://drupal.org/project/jquery_update though?

karens’s picture

Nope, it works for me on a standard D5 install.

anders.fajerson’s picture

I've updated my time picker. It now has keyboard support and some localisation options: http://labs.perifer.se/timedatepicker/

karens’s picture

fajerstarter, the HEAD version of the Date API is working pretty well now. I still have the timepicker I originally had, but I'm not opposed to trying yours instead. I don't have time to work on this but can you confirm that it will work on a standard D5 install with no extra downloads required? That's true for the current code and I don't want to add any dependencies. If so, if you want to make a patch against HEAD to use it, I'll take a look at it.

anders.fajerson’s picture

Ok, sounds promising. I'll try to roll a patch soon, and make sure it works with jQuery 1.0.4.

sun’s picture

Confirming, the date popup module in HEAD works great.
IMHO, this issue should be marked fixed, since a) the queue is quite big, and b) supporting more than one calendar would require a date popup API or plugin system to let the admin choose which JS-based calendar to use for each date field instance.

karens’s picture

Status: Active » Fixed

It was left open because fajerstarter is proposing an alternative timepicker, but I agree we should go ahead and close this issue. A new one can be opened if there is a proposal for changes in the timepicker.

BTW, you can choose either the jQuery popup or the original jscalendar popup at this point, so it is possible to have more than one. I plan to phase the jscalendar widget out, but have left it for now because it is already in use.

rjleigh’s picture

looking forward to your integration, fajerstarter! I'd be glad to test a patch.

Anonymous’s picture

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for two weeks with no activity.