Calendar popup for calendar block

I would also love something like this. Along with distinguishing with a chosen color days on which there are events on the mini calendar.

Other solution that would suit me fine would be if one could a hover on a selected day and see a box with the titles and the details of the nodes.

Do you guys have any ideas on how to do something like this? any help would be greatly appreciated :)

I would also love something like this.

There must be someone who knows this?!?!
:)

I too would like to know if this is possible.

me too

subscribing

me2

This is not by any way the recommended way to get this done. But I ran across this issue and decided to share one way this can be accomplish by just using the views module.

What this is going to do is format the title links in order for them to get pick up by the jcalendar jquery code and that will handle the popup.

1. In the calendar block you will need to add 3 fields.
- Node:Nid
- Node: Title
- Node: Link
The three fields need to be in that same order.

2. For the Node:Nid field have these settings selected:
- label : {empty}
- Exclude from display - {Check}
- Rewrite the output of this field - {Check}
- In the text box available for you to rewrite the output use this: "calendar:[nid]" without the quotes
- You can save that field and move to the next field

3. For the Node:Title field have these settings selected:
- label : {empty}
- Exclude from display - {Check}
- Link this field to its node - {Check}
- You can save that field and move to the next field

4. For the Node:Link field have these settings selected:
- label : {empty}
- Exclude from display - {UnCheck}
- Rewrite the output of this field - {Check}
- In the text box available for you to rewrite the output use this: "

" without the quotes
- You can save that field and move to the next field

Just in case in the above text when I use {empty} I mean nothing as in no text whatsoever.

After you follow those steps you can save your view and that should do it. You will now be get a popup when you click on the title link on the calendar block.

I'm using the latest Drupal version and the latest date, Calendar, and views module.

Again this isn't the way everyone should do it just. Just a quick and dirty way to accomplish this if anyone needs it right now.

I have written something that displays a list of node titles in a tooltip produced by Beautytips when you hover over a date. See attached screenshot. I'm writing documentation right now at my site: http://linuxpc.info/node/83 .

If anyone is interested, I can probably convert it to a module, which can do this out-of-the-box, without copying and editing theme files.

Cheers,
Ronald

That is exactly what I'm searching for and it works great!
Thank you so much for your post here, it has been of great help to me.
Since I don't know a lot about PHP code and making function for Drupal, people posting solutions here helps me a lot often.

I would like to add a "read more" link in the pop-up box so people can read about the event planned for that day. The link should be a link to the original node. Is this possible? And (for me) maybe more important, how can I do it?

Thanks for the help in advance.

The module I was working on is finished (I think). It is called "calendar tooltips". Your request is also built-in, but you need to enable it on the module settings page of calendar tooltips. The setting is called: "Link to node".

It did require some changes, though. To prevent a link-in-a-link, the tooltip's text needed to be placed outside the date's hyperlink, because the tooltip's text itself contains a hyperlink: the "read more" link. The jQuery code needed to be changed accordingly.

Additionally, the tooltip must remain open when you move the mouse to one of the links, otherwise the whole thing would disappear before you had a chance to click on it. You can still close the tooltip by clicking outside the tooltip. I made a setting for that also, which is called: "Click to close".

Finally, when multiple events appear on a single day, multiple "read more" links would appear. I thought it would be better to make the node titles clickable instead of making seperate "read more" links.

Hope this helps. Enjoy the module ;-)

And a happy new year to all of you.

Thank you so much for all the work you've done. And it works out of the box:)
The only thing is that clicking somewhere on the site to close the pop-up is not very user friendly:S.
I've been thinking about something that would be and I came with this:
As long as you keep focus on the date that triggers the pop-up, it exists. At the moment you move the mouse away from the date, a counter starts counting for like 3seconds and after that the pop-up disappears.
So I took a look in the API of beautytips and found that you can change some parameters of jQuery.bt.defaults.
The only thing is I dont know how to implement a timer in the module.
Does anyone have a clue?

--Update--
After some reading about the jQuery plugin and beautytips, I know it is possible with hoverIntent. With this option you can add two timers, a timer after which the popup will show and a timer after which the popup hides if the focus is lost.
(for more information: http://www.lullabot.com/files/bt/bt-latest/DEMO/index.html#hoverintent)
How/where can I implement the option in your module?

Happy new year to you also and thanks again for your help,

Matthijs

Here is a quick update which implements this. No error checking on the timer value, yet.
It works, but there is this little side effect in hoverIntent where the timer must expire before the same tooltip can be reopened again.

Thank you again for your help, it works great! When my site goes online ill post a link here so you can see how it all worked out.

Subscribing...

you didn't change the version number in the info file. further more great module.

i'm getting a lot of these error messages in firebug:
uncaught exception: [Exception... "Could not convert JavaScript argument arg 0" nsresult: "0x80570009 (NS_ERROR_XPC_BAD_CONVERT_JS)" location: "JS frame :: http://intranetsmulders.internetunlimited.nl/misc/jquery.js?A :: anonymous :: line 13" data: no]

i see this error in the beautytips issue queue: http://drupal.org/node/623682

Hi RJB,

I got your module working with my calendar block. Thanks for taking the time to create and post the module.

I was wondering if you could provide a bit of extra functionality?

I'd really like the popup balloon to display:

1) The event title
2) The event date/time
3) The event text (see the top right of the attached image)

At present, it only displays the event title (see calendar in attached image).

Once again, thanks for your help.

Rob

subscribe

(edited 27-03-2010)

#15: Johnny, thanks for reporting. Unfortunately I could not find any error in my code similar to the post you referred to. The line of code which causes these messages is a very long hard-to-debug line in jQuery...
The update of the version number was easy to fix, though ;-)

#16: Rob: here is a new version which allows you to do that. The event data shown in the balloon can now be specified in the display settings of your calendar view: choose the "Calendar block" "Block view" display, and change the "Fields" section.

There is one issue however: currently it only works for fields which are *not* overridden. Maybe someone can help me with this one. Somehow the theme function "calendar_datebox" is not getting the overridden field data where the other calendar theme functions (like "calendar_day_node") do. Anyway, until this is resolved, you can workaround it by changing the default values which are used by this module, and use overridden values for the other calendar displays.

The issue above is fixed in v1.3, coming up. Don't bother using v1.2 below ;)

Cheers,
Ronald

rjb,

Thanks for posting the update. That is exactly what I wanted to achieve with my calendar!

You're awesome.

Rob

Hi
I was searching for this kind of module but i am working on drupal 5 so RJB can you please help me out how this module could be workable for drupal 5?

thanx in advance.

Muhammad.

Hi Muhammad,
This module depends on beautytips for drawing the balloon, and beautytips is only available for Drupal 6. I currently don't see a good alternative module for this purpose. I can draw the balloon myself using a simple DIV and some CSS code for hiding and displaying it, but it would not look as nice as beautytips. In addition, the code for the Drupal 5 version of calendar is completely different from the Drupal 6 version, so my module would have to be rewritten from scratch. Also I'm not sure if the event data is available in the views object, so we may need to load nodes to get the event data, but then we need some node ID's...

So there are a few problems that would have to be solved, but unfortunately I don't have the time for this at the moment to do this myself. I think a good starting point is to take a look at the function theme_calendar_date_box in the calendar.theme file (D5 version of calendar). Here a link for a single day is rendered, so this is the place to examine the view object and add the code for the balloon.

Cheers,
Ronald

Hi RJB

Thanx for your help i will try to figure it out as you mentioned

Muhammad

It seems that when I enable this module, Domain Access losses styling settings (style sheet) for each particular domain and all my domains revert to the primary style sheet. Logo as well... Views queries and other relevant info is still divided by the right domains, but not the stylesheet or logo.. As soon as I disable this module, it all comes back. I tried with version 1.3, and 1.1, all the same. Beautytips alone works fine, but not with tooltips for the calendar.

Can anybody confirm this problem?

Thanks for the great plugin.

rjb, i'm trying to do this myself without using the module. what i keep getting stuck at is how to print the node title information. i looked at your website, but is there any way you could explain this any simpler? i thought it would just be a matter of overriding calendar-datebox.tpl.php, all i want is to print the node title after the date. i feel like all i need is a shove in the right direction of which array to extract the field from.

When I enabled the module on a druapal 6, I have the setting of the administration theme which is not used any more (I have a different thème for admin and website).
Is somebody else have the same problem ?

I have a small bug with #19 :
- I set the disparition of ballon by timer,
- I move the mouse from date1 to date2 (both with events to display) before the closing of the baloon of date1
- date2 baloon opens and date1 one close (good behavior).
- I go back to date1 before the closing of date 2 baloon
- date1 baloon do not opens.
- date2 baloon closes due to timeout, but now date1 baloon don't work anymore. It can rework if you reopen date1 baloon and let it close with mouse out of the calendar.

Edit: how strange : when you hover the baloon during your path from date1 to date2 (and vice-versa) everything works...

#24, #26: The version below should take care of these problems. It has something to do with this D6 issue: http://drupal.org/node/219910 .
#25: you can indeed just override calendar-datebox.tpl.php. What I do is altering the $link variable, basically. Which field are you referring to? The node title?
#27: Is this by any chance related to #12? Are you able to reopen the balloon after the timer expires?

Calendar tooltips will get its own project page, by the way. I just need to figure out how these developer tools work :)

You are right #27 looks related to #12.

When the timer didn't expired and you get back to the first date then you reset it and it look like the baloon cannot opens.

In order to reduce this effect, I used a shorter value for the timer.

Good Job :)

Nevertheless I confirm that there is something strange with the admin theme setting. I think it is related to the override of preprocess_calendar_datebox. I think theme_registry_theme is not aware of the current theme and just revert to default. So it is not clearly a bug of your module.

#28: yes, im looking to display the node title field and possibly also the node id for direct linking, so clicking on the node title will take you to the node and not the day view for the calendar. i thought this could be done via traversing the $items array, but im not sure. im just trying to set up something so i can implement this jquery functionality: http://jqueryfordesigners.com/coda-popup-bubbles/

so far i have this in calendar-datebox.tpl.php after printing the $day:
if($mini && $selected): print $items[????]; endif;

i guess i need some sort of foreach() to iterate through $items to print all possible node information?

I would first do a print_r($items) to see the structure of $items. I just did that, and I think you need these:

$items[YYYY-MM-DD][HH:MM:SS][num]->nid
$items[YYYY-MM-DD][HH:MM:SS][num]->raw->node_title

Note that $items contains events for the entire month, not only for the day we are processing. The date we are processing is in $date, so you should probably use $items[$date]. Something like this:

if ($mini && $selected)
{
   foreach ($items[$date] as $time => $results_at_that_time)
   {
      foreach ($results_at_that_time as $num => $result)
      {
         print $result->nid;
         print $result->raw->node_title;
      }
   }
}

Thanks rjb, that worked great!

I ended up changing it slightly to accommodate CCK fields:

 if ($mini && $selected)
{
	print '<div class="calendar-popup">';
	foreach ($items[$date] as $time => $results_at_that_time)
	{
		foreach ($results_at_that_time as $num => $result)
		{
			print '<a href="' . $result->url . '">';
			print $result->raw->node_data_field_date_field_event_title_value . '</a>';
		}
	}
	print '</div>';
} 

I also tried adopting your template_preprocess_calendar_datebox function, but it only worked when I added it to calendar's theme.inc. When I added it to my template.php as delphic_preprocess_calendar_datebox (theme name delphic) it wasn't working. Thoughts?

Check it out my progress:

Hi Brodingo,
Looks good. Great progress.
About template.php, the only thing i can think of is clearing Drupal's cache (see /admin/settings/performance).

For #26 the bug is related to beautytips_add_beautytips() which breaks the choice of admin theme.

I used a workaround in order to remove the init call on admin pages :

function calendar_tooltips_init() {
   $exploded = explode('/', $_REQUEST['q']);
   if ($exploded[0]=='admin') {
        return;
   }

The project page of the Calendar Tooltips module is up & running at: http://drupal.org/project/calendar_tooltips. See you there! ;-)

#34: Thanks, but I had to fix it in a different manner. I have moved the beautytips init call from hook_init() because it was calling theme() which breaks several things (not only admin pages) in D6 when called from hook_init(). See this issue: http://drupal.org/node/219910 .

The D5 versions are end of life now, no longer supported. Sorry.