Add a flyout for more information on events

There was discussion of optional integration with beautytips for something like this.

And fullcalendar documentation mentions qtip...

    eventRender: function(event, element) {
        element.qtip({
            content: event.description
        });
    }

I'm going to experiment with the qtip stuff

I'm going to make a pach for the qtip module. It requires only the code mentioned above and you can style it a bit in the UI of the QTip module. That way we don't have to care about the extra plugin. The only thing I worry about is what we are going to pass into the description... hmm....

The QTip module is far from perfect but it works out of the box (if you like yellow). You can make patches for it if you like to.

Like I said before I have some troubles with putting random css and stuff into fullcalendar.
I prefer jquery plugins. (like qtip or others)

I have a D7 patch that is working. Would like some opinions about it.
If you would like to test it you have to patch qtip, I know it sucks, but the D7 port is kinda crap at the moment.

Maybe beautytips uses the same approach so we can insert that one to.. I don't know...

Notes:
1) You can style qtip to get the same result you guys have with your custom code.
2) for some reason only the bottom left positioning is working well... Dunno why...
3) It has a few colorschemes build in (config=>qtip)

4) At the moment the description is empty, wouldn't it be nice if we have a multiselect box to select all the fields we would like to add into our description and in the views preprocess phase we filter the content out of these fields. You can pass html into the description. The description framework is alrdy in this patch, we just need to figure out which fields to pass and how to filter the content.

This is experimental so don't be mad if it would brake something I didn't test...

I hacked my way through it to show what I mean. Its ugly because the options are spread between the style and the row options.
But the code is easy and simple.

:D

I'm going to expand this experimantal patch to also support beautytips. I misunderstood the module the first time I saw it.
We will see what that will bring :).

Beautytip has even worse D7 integration at the moment. It just breaks the site, so I'll have to wait a bit.

But I think I found a nice pattern:
1) In the style settings choose the jquery plugin for tooltips you would like to have (or none if not needed)
- show only the supported plugins that are installed
- hide the other options when you chose one

2) Add ALL the field data into the description (default)

3) If you selected a jquery tooltip plugin show a "Custom description field" into the row settings. Here you can select the fields you would actually like to display into the popup.

(I don't know if it possible to check if you selected a checkbox in an other settings window, we also could display these custom settings if we install on of these libraries)

----------------------------------------------------------------------------------------------------------------------------
Usabilty issue:
- people will have to know that they should configure their description (in an other window!) after enabling a tooltip

SOLUTION:
==> When they select an option, display a description message under the checkbox
"It is advised to configure the discription for your tooltip in your row settings"

ps1: I don't know if you can link to those dynamic pages
ps2: What do you think :)

Hmmm... what if I don't want to exclude a particular textfield (I would like to use it to override the title) but would like to exclude it from the description?

I'm experimenting with git workflows so me and Tim decided to put this in a sandbox.
You can fetch the code from http://drupal.org/sandbox/aspilicious/1092518 (the test branch, will rename it to flyout)

Subscribe!

subscribing

The sandbox is way out of date. Still might be salvageable code though.

I'm going to postpone this myself until beautytips or qtips has some reasonable D7 version.

subscribe

Good evening!
Don't prompt, for D6 there is a similar patch?

I'm looking to implement a solution for D7. A summary of what needs to be done would help and any code I get working I will submit back to the community. Thanks.

Ok what needs to be done.
Beautytips has a stable release now so I suggest looking into that one first.

1) So install beautytips :)

2) Understand http://www.lullabot.com/articles/announcing-beautytips-jquery-tooltip-pl... and the code in http://drupal.org/files/issues/fullcalendar-qtip-experimentalV2.patch (the part in the js file ==> eventrender)
The code I wrote is based on qtip but it follow the same principle.
3) You should also call the beautytips library just before we load the fullcalendar js.

You can use hardcoded values (for background and text color) to start. That's very easy now beautytips got his stable release.
When you got this working you can report back so I can look at your work. :)

I will be available in the #drupal-fullcalendar irc channel for answering questions.
Unassigning myself but will follow this and write some code if needed.

subscribing

Quick update as to not leave you in the lurch, this fortunately for us wasn't a show stopper so the client was happy to not to have this feature. As a result we've not had the development time in studio to do this.

However, there is a high chance it'll be picked up in phase 2.

So I'm not actively working on it atm, but watch this space. If anyone else wants to step in please do, it'd make the calendar a lot better.

http://drupalcode.org/project/fullcalendar.git/shortlog/refs/heads/flyou...

Based on beautytips.
Needs a quick code review.

I need some help:
1) the beautytips look ugly in the calendar, there is a problem with calculating the dimensions, maybe a fullcalendar <-> beautytip conflict.
2) now I print the field name, I need to fetch the field content from the view

Ok it works :).

I don't filter the seperator yet, this means you can insert html like
(which is nice). But we have to ensure our code is safe.

Anyway it looks nice, one style doesn't work for some reason. But thats a beautytips problem.

Postponing on #1326772: Devise a way for other modules to add settings to the FullCalendar style options

Stupid dropdown.

Wonderful. Thanks aspilicious.

Now that we have the field names, how would I go about pulling in the field values into the displayed beautytipsText?

Thanks!!

Something is wrong with my module.

And the submit will fail I think because it uses $view which is undefined in that scope.

Ah, found why the JS was completely broken for everything, and why the form wouldn't show.
I changed fullCalendar to fullcalendar already (#1344840: Change fullCalendar in JS to lowercase), sorry about that.

Also, it's hook_fullcalendar_options_form but you forgot the fullcalendar_ part.

It doesn't work straight out of the box, but I'm sure there's some beautytips stuff I'm missing. A library or something.

A patch with hardcoded text. Finally I see the positive effect of ctools in here.
I got stuck... :(
Unassigning myself for now as I don't know what to do :)

TODO:

1) Build a list with flyout text based on the select fields.

This list is as long as the events that are going to be rendered.
We need to use that list to print the correct text for each event

2) Verify this all works with ajax turned on.

3) Some tips look funky due to js/css clashes. Verify we can't do anything about that...

POSSIBLE TODO:
When all this works, add qtip integration

Hmm. I'll look at this, see if I can unstick it.

On a FullCalendar 7.x-2.x-dev, FullCalendar 7.x-2.0-beta3 modules from #31 & #35 has no effect. What there is any way to make a tooltip like this http://philorch.org/concert/calendar ?

I have to run out, so I can't take this much further, but I at least have the text appearing correctly in popups. patch attached.

slight update to a comment in the js file.

Added dependency on beautytips - promise this is the last patch. I think.

Fixed the options_definition hook invocation (was previously option_definition). Flyout settings are now exported.

no more promises about whether this is the last patch ;)

This is looking really close! Haven't tested yet.

+++ b/fullcalendar_flyout/js/beautytips.fullcalendar.jsundefined
@@ -0,0 +1,19 @@
+  options: function (fullcalendar) {
+    var settings = Drupal.settings.fullcalendar[fullcalendar.dom_id].beautytips;

If you check http://drupal.org/node/1342772, you'll see that you now get the settings passed to you.

+++ b/fullcalendar_flyout/js/beautytips.fullcalendar.jsundefined
@@ -0,0 +1,19 @@
+    if (!settings.beautytips)
+      return;

Can you put in { } please?

thanks for the feedback, updated patch attached.

Last bit of nitpicks, sorry I didn't see these before.

+++ b/fullcalendar_flyout.moduleundefined
@@ -0,0 +1,14 @@
+ * Add beautytips integration

Missing trailing full stop. And there should still be Implements hook_fullcalendar_api(). in here

+++ b/includes/beautytips.fullcalendar.incundefined
@@ -0,0 +1,114 @@
+ * Implements hook_fullcalendar_options_process.

Missing the () at the end

+++ b/includes/beautytips.fullcalendar.incundefined
@@ -0,0 +1,114 @@
+  $view->my_setting = TRUE;

I guess this was debug code?

+++ b/includes/beautytips.fullcalendar.incundefined
@@ -0,0 +1,114 @@
+  drupal_add_library('beautytips', 'beautytips-module');
+  // Needed for internet explorer
+  drupal_add_library('beautytips', 'excanvas_r3');
+  // Needed for rtl
+  if($language->direction) {
+    drupal_add_library('beautytips', 'beautytips-ltr');

This should use #attached, see http://drupalcode.org/project/fullcalendar.git/blob/refs/heads/7.x-2.x:/... for an example.

I guess this was debug code?

ha, no, it was copy-pasted directly from the api doc.

patch attached based on your feedback. Excited about getting this in!

I was lacking time, but this was my precious patch. And I'm SOOOO happy someone is finally finishing it.

You're my hero!

@aspilicious: you did the hard part, I just polished it up!

patch #45 works for me! it's cool! Thank you all!

everything is fine, but the changes beautytipsStyle and beautytipsSeparator in Options have no effect

@max_d: thanks for the feedback, updated patch attached addressing both concerns.

@acrollet, thanks!! now works perfect!!

@max_d: if you're not seeing any more issues with this patch, would you consider marking it rtbc? It'd be nice to get this in...

Hi, @acrollet!
what it means to rtbc? I know the language poorly.
patch/module working very good, i not have problems with him.

@max_d: sorry, rtbc stands for Reviewed and Tested By the Community - more explanation here: http://drupal.org/node/156119

ok, I understand. As I wrote above - the patch works very well. I can do something to help, except for my response?

+++ b/fullcalendar_flyout/includes/beautytips.fullcalendar.incundefined
@@ -0,0 +1,121 @@
+    $settings['beautytips']['beautytipsText'][$result->nid] = ¶

trailing whitespace

+++ b/fullcalendar_flyout/includes/beautytips.fullcalendar.incundefined
@@ -0,0 +1,121 @@
+  global $language;

We have a habbit putting globals on top of a function

+++ b/fullcalendar_flyout/js/beautytips.fullcalendar.jsundefined
@@ -0,0 +1,18 @@
+          element.bt(settings.beautytips.beautytipsText[event.eid], settings.beautytips.beautytipsOptions);

2 unneeded spaces in front of element.bt...

Didn't have a chance to test it yet

patch attached addressing formatting issues in #56

Update

Is there a D6 patch available for this functionality? I see a patch in comment #2, but that's over a year ago.

Any ideas?

#58 works great - nice work. Some issues..

1) .fc-view has overflow:hidden; which causes tooltips towards the top to get cut off pretty bad.

2) Using a global text views field doesn't work.

3) Selecting a taxonomy field to show in the tooltip results in Fatal error: Cannot use object of type stdClass as array in /var/www/includes/common.inc on line 5723

4) Looks like labels aren't added.

5) Seems like selecting the default style doesn't actually use the default style set in the beautytips admin settings page.

6) Rewrite rules are ignored

@mikestefff can you leave new comments? It keeps notifying that you updated it but I can't tell what was changed.

Also, needs work.

Yea sorry -- I kept thinking I was done, then hoped I was making the edits before anyone saw.

As for the css issue, I think more is needed than what I suggested because the week/day views aren't fixed with that change. I'm also a little nervous to change the overflow setting.

7) Can we embed this in the view content, rather than load the javascript settings up with content? The main benefit of that would be caching so this doesn't have to be done every single time.

Line 88 needs to check if $settings['fullcalendar_flyout']['beautytipsFields'] exists and is an array. The code assumes the beautyTips will be enabled for all fullcalendar views.

Same goes for the setting at line 99:

Notice: Undefined index: beautytipsSeperator in fullcalendar_flyout_fullcalendar_options_process() (line 99 of /var/www/sites/all/modules/contrib/fullcalendar_flyout/fullcalendar_flyout.module).

I also don't like the call to module_exists and function_exists every time the module is loaded.

I also don't like the call to module_exists and function_exists every time the module is loaded.

FWIW, I believe the original author intended to be able to use multiple pop-up libraries and choose between them.

Well this should be a seperate "sub" module and that module can have a dependency for the moment on beautytips.
If this works great we can look at a modular system to supprt multiple libraries. When thats done the dependency has to go.

I'll be looking at this more detailed in a few weeks. Stay tuned. (I never looked at the recent code) :)

@mikestefff then you're REALLY not going to like last 100 lines of views.module: http://drupalcode.org/project/views.git/blob/refs/heads/7.x-3.x:/views.m...

;)

boo

My mistake..looks like the JS settings get cached as well..

You can get the output to respect the rewrite rules if you use:

$rendered_field = theme(
  'views_view_field', 
  array(
    'view' => $view,
    'field' => $view->field[$enabled_field],
    'row' => $result,
  )
);

Not sure how to get the label settings on there, but this is a good start..

edit: It's throwing errors for some fields..might not be a great idea (yet)

This works better and makes more sense:

$rendered_field = $view->render_field($enabled_field, $row_index);

.. I knew there was a function someone in views for this....

$row_index would be the array key added to the first foreach()

Still getting this error though:

Notice: Undefined property: view::$row_index in views_handler_field->get_render_tokens() (line 1355 of /var/www/sites/all/modules/contrib/views/handlers/views_handler_field.inc).

I loaded up a few other views, and they all had $view->row_index set (but all set to NULL) -- I'm not sure why this view doesn't have it. Perhaps it's the fullcalendar plugin? Anyway, I just added this to the top of fullcalendar_flyout_fullcalendar_options_process():

if (!isset($view->row_index)) {
  $view->row_index = NULL;
}

Also only add the flyout field if there's content once it's rendered; otherwise you just enter a useless separator.

(i'll zip this up soon and re-upload)

I need some CSS help -- completely stuck on this issue.

If you set .fc-view to overflow:visible, the month mode works fine.

But, the week (agenda) and day (agenda) are awful because the popups will remain hidden under the edges of the calendar. It seems this is happening because they're set to scroll, and the popup thinks there's space for itself.

Nothing I try seems to help at all..

Ideas?

I see you've been doing a lot of work on this issue, and as I'm not an expert I would like to ask your advice:
Could you give an step by step guide to achieve the use of beauty tips over the fullcalendar, I ask this because I see too many patches, and patches to patches, so I really don't know where to start from.
Thanks for your help

I'm going to assign this to myself. If I didn't fix this issue on july 5th, ping me on irc.
Untill than there won't be any step by step guide as this is developpers use only now.
To buggy and untested.

Ok, thanks, I will be anxiously waiting

Here's what I got so far.. it could probably use a little cleanup and extra commenting..

Until issue #77 is resolved, I'd consider it unusable.

And this is all based off the great work from #58 (I only tweaked a few things)

That doesn't mean it is unusable I bet there are cases where people can live with this problem the plugin introduces...
Maybe the qtip integration doesn't have this poblem (although I don't think that). We'll see...

Btw can you make a patch? With a zip I don't know what is changed between this version and the current version. Else I can't use your code when checking the integration.

What's the "current" version exactly? The older zip? Because this was setup as a separate module..

The current version is the 7.x-2-x dev version.

http://drupal.org/project/fullcalendar/git-instructions

Sorry, I couldn't wait so long seeing that you're so active....
Well, I have installed the module uploaded at this comment http://drupal.org/node/1057972#comment-6143040 , it works great, the only thing that does not work well for me are the balloons at the calendar block, I mean, they come up as expected, but the visualization is not entire, the balloon get part of it hidden if it goes beyond the block area.

I better attach an image...

Yeah it is posisble we can't fix that :(.

@aspilicious i know what the current version of fullcalendar is. I didn't know if the flyout module would be kept separate or put into fullcalendar.

@andres: Yes, that's the primary issue I mentioned above. You can try setting .fc-view { overflow: visible; } in your CSS. That seems to fix the month mode, but does nothing for the week/day agenda modes. I'm assuming that will cause problems in older versions of IE, also.

for the moment I want to add is a submodule to the fullcalendar package. We will see how it goes.

Thanks a lot, it is working like a charm for me now, fortunatelly I only use the month mode at the block.

Thanks, thanks, thanks gurus!

site: http://parles.upf.edu/ca/content/secretaria-fti

mikesteff if you're more comfortabe with a sandbox you can create that.

Nah, this is fine.. I'm stuck until some css guru can save the day.. which sucks, because I really want this working.

Created new branch. Used code from above with some small modifications and cleaned some useless code.
http://drupalcode.org/project/fullcalendar.git/shortlog/refs/heads/flyou...

I have some questions/problems that I will discus with Tim but this should work just fine (for nodes)

after upgrade to Drupal 7.15 on my site is no longer working fullcalendar_flyout and http://drupalcode.org/project/fullcalendar.git/shortlog/refs/heads/flyou... too.

Same for me, no more tips at the block calendar view, does anybody knows how to recover them?

I reconfigured all the suff and it's working back, but also is back the problem reported in #86 eventhough I have setting .fc-view { overflow: visible; } in my CSS.

Again help is wellcomed, gurus.....

thanks.

Sorry, I forgot to tell you that I have installed the last version from here: http://drupalcode.org/project/fullcalendar.git/shortlog/refs/heads/flyou...

Sorry that i don't know how to use the beatytip and the full calendar? can you step by step telling me?

I have a block showing a mini full calendar with showing some event dates. I would like to mouse over the event date, it show more details like the following site:

http://philorch.org/

http://parles.upf.edu/ca/content/secretaria-fti

Thank you so much in advance!

Using the beautytips solution with ajax enabled doesn't seem to work.

Just looking into providing a tooltip on fullcalendar and was wondering if this ever progressed? I've downloaded and installed the latest zip file here and installed beautytips but I'm getting the following error when hovering over the calendar events:
TypeError: undefined is not an object (evaluating 'jQuery.bt.vars')

OK So I've discovered that al the issues I have had have actually been with Beauty Tips and not the way that the patch in this thread allows it to be used. It was all due to me using jQuery update with version 1.8 being applied on the front and obsolete functions in the Beauty Tips JS file as per: https://www.drupal.org/node/1902324 where you'll find a patch which works.