Solved

drupal calendar date picker

Posted on 2010-08-18
18
1,367 Views
Last Modified: 2012-05-10
how do i make a drupal calendar with date picker like this?

http://www.whitehouse.gov/schedule/complete/2010-W35
0
Comment
Question by:charmingduck
  • 9
  • 9
18 Comments
 
LVL 17

Expert Comment

by:Thomas4019
ID: 33470551
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
 

Author Comment

by:charmingduck
ID: 33470862
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
 
LVL 17

Expert Comment

by:Thomas4019
ID: 33470900
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
 

Author Comment

by:charmingduck
ID: 33471062
please see attached


it says text field with date pop up calendar
Picture-142.png
0
 

Author Comment

by:charmingduck
ID: 33471083
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
 
LVL 17

Expert Comment

by:Thomas4019
ID: 33471116
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
 
LVL 17

Expert Comment

by:Thomas4019
ID: 33471121
Oh wow, apparently date popup uses jquery ui, http://drupal.org/node/874064.
0
 
LVL 17

Expert Comment

by:Thomas4019
ID: 33471124
This makes me think you messed something up when installed jquery_ui, jquery_update, etc. Maybe try disabling jquery_ui?
0
 

Author Comment

by:charmingduck
ID: 33471239


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
Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 17

Accepted Solution

by:
Thomas4019 earned 125 total points
ID: 33471255
Yeah, you're on the right track. That datepicker field is built into views calendar. See this attached screenshot.
Capture.PNG
0
 

Author Comment

by:charmingduck
ID: 33471305
haha, you are awesome, but i should really get the date picker working first, i'll try again,

do you have that installed?
0
 
LVL 17

Expert Comment

by:Thomas4019
ID: 33471312
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
 

Author Comment

by:charmingduck
ID: 33471403
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
 

Author Comment

by:charmingduck
ID: 33471431
hey, it's so interesting, i got the date-picker working without the jquery_ui and jquery_update installed!!!
0
 
LVL 17

Expert Comment

by:Thomas4019
ID: 33471650
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
 

Author Comment

by:charmingduck
ID: 33471663
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
 
LVL 17

Expert Comment

by:Thomas4019
ID: 33471702
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
 

Author Comment

by:charmingduck
ID: 33471740
how's it coming on the ajax mini calendar?
0

Featured Post

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

This article is for those that are having major problems with users upload files such as pictures to their profile. The solution is simple and has to do with correcting the directory paths. With some experimenting and testing i got it fixed. Note…
RTL (right to left) web applications aiming for audiences speaking languages like Hebrew or Arabic, are generally more complicated than the same applications aiming for audiences speaking Latin based languages. The main difference lies of course …
This video discusses moving either the default database or any database to a new volume.
You have products, that come in variants and want to set different prices for them? Watch this micro tutorial that describes how to configure prices for Magento super attributes. Assigning simple products to configurable: We assigned simple products…

760 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now