drupal calendar date picker

how do i make a drupal calendar with date picker like this?

http://www.whitehouse.gov/schedule/complete/2010-W35
charmingduckAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Thomas4019Commented:
As your probably know, the calendar is a "week" view powered by this module, http://drupal.org/project/calendar.

If you're not picky, you can get something similar by simply enabling the "Date Popup" module that comes with the Date module.

The date picker is powered by JQuery UI, http://jqueryui.com/demos/datepicker.  You can get JQuery UI in drupal using this module, http://drupal.org/project/jquery_ui. However, that won't automatically enable a datepicker on that calendar. I don't know exactly how to attach the jquery ui datepicker to the calendar.
0
charmingduckAuthor Commented:
okay, maybe let's get the date picker working first. I think I've done all that you mentioned but couldn't make date picker working, I think in the date configuration there's place says date picker, but I don't know what it does.

The Date Popup really isnt that great, but thanks.

I think I remember where I see the date picker option, it's in field, you can choose

select list
select list with date repeat
text field..
calendar..
text field with date picker

I tried date picker, but it didnt give me a date picker, how do I make it work? i have jquery_ui installed.






0
Thomas4019Commented:
Hmm, installing jquery_ui is a a little more intensive than installing other modules. Make sure you read it's README.txt and INSTALL.txt. You have to update JQuery as well. Make sure to read's JQuery Update's README.txt and INSTALL.txt as well.

I most certainly agree that the date popup is so-so. So do you have "Date Popup" enabled? If you could send a screenshot of the field that doesn't have the popup that would be fabulous.
0
CompTIA Network+

Prepare for the CompTIA Network+ exam by learning how to troubleshoot, configure, and manage both wired and wireless networks.

charmingduckAuthor Commented:
please see attached


it says text field with date pop up calendar
Picture-142.png
0
charmingduckAuthor Commented:
i do think i got jquery_ui working, at least, it's installed properly, i did have trouble installing this module the first time, so i'm pretty sure it's working now.
0
Thomas4019Commented:
Hmm, yeah it looks like's its configured right. What is that screenshot of views configuration?, cck configuration? Where exactly do you want the datepicker popup to appear, a link to your site would be ideal if possible.

So it seems your date pop-up isn't working for some reason. Maybe because of something that went wrong with jQuery UI installation. That shouldn't matter if we can get jQuery UI's datepicker working.

Here's some discussion about using the datepicker, http://drupal.org/node/499228.
0
Thomas4019Commented:
Oh wow, apparently date popup uses jquery ui, http://drupal.org/node/874064.
0
Thomas4019Commented:
This makes me think you messed something up when installed jquery_ui, jquery_update, etc. Maybe try disabling jquery_ui?
0
charmingduckAuthor Commented:


Hey, you know what, think about the whitehouse schedule and the date picker, does it look like a filter for you? maybe that's a good start?
0
Thomas4019Commented:
Yeah, you're on the right track. That datepicker field is built into views calendar. See this attached screenshot.
Capture.PNG
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
charmingduckAuthor Commented:
haha, you are awesome, but i should really get the date picker working first, i'll try again,

do you have that installed?
0
Thomas4019Commented:
Yeah, I have the calendar module installed on one my sites - it's pretty nice.

Maybe's it's best to uninstall jquery_ui and jquery_update and try to undo all those changes? It is a very tricky module to install, I've never actually done it because of it's difficulty.
0
charmingduckAuthor Commented:
hmm,  I think i actually missed something





* In your module, call the following function:

    jquery_ui_add($files);

  For example:

    jquery_ui_add(array('ui.draggable', 'ui.droppable', 'ui.sortable'));

    jquery_ui_add('ui.sortable');  // For a single file

  See the contents of the jquery.ui-X.X sub-directory for a list of available
  files that may be included, and see http://ui.jquery.com/docs for details on
  how to use them. The required ui.core file is automatically included, as is
  effects.core if you include any effects files.




what does this mean? call it in the module?
0
charmingduckAuthor Commented:
hey, it's so interesting, i got the date-picker working without the jquery_ui and jquery_update installed!!!
0
Thomas4019Commented:
Great!, It looks like the Date module might be supplying just the amount of jQuery UI code needed to make the popup.

Now with CSS you can change that popup to look just the way you want it, that's what the whitehouse.gov people did. They also changed it so that it popups by clicking an icon on the side as seen in this example, http://jqueryui.com/demos/datepicker/#icon-trigger.
0
charmingduckAuthor Commented:
the original look is okay, how do i tweak the look? actually i want a different look, are there any themes available for it?
0
Thomas4019Commented:
Yes there are themes, if you look in the top right on this page, http://jqueryui.com/demos/datepicker/. However, sadly I don't think Date Popup has a way for you to choose a theme.
0
charmingduckAuthor Commented:
how's it coming on the ajax mini calendar?
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Drupal

From novice to tech pro — start learning today.