Event calendar with popups

After building an event calendar (see this page), you might want a balloon / popup / tooltip to appear when hovering over a date. This tooltip would display the node titles of all events on that date. This is not very straightforward to implement in Drupal. I puzzled for 2 days to get this done.

I have written a module for this to make this process easier. You can find it at http://drupal.org/project/calendar_tooltips. It requires beautytips.

If you would like to know how it works or how to do it manually, read on.

There are many tooltip modules for Drupal out there. I use beautytips. Download it and install it. For Explorer you also need to download excanvas_r3, and unzip it in a new directory excanvas_r3 in the sites/all/modules/beautytips/other_libs directory.

The content of a tooltip (the text appearing on the balloon) can come from:

  1. an HTML element's attribute, by default the title attribute
  2. the content of an HTML element
  3. another (external) HTML document.

We won't be using the first method, because I had trouble including HTML markup in the title attribute of an HTML element. The third method, referring to another HTML document, is cumbersome to implement. I went for the second method. Say, for example, we have a date 25 (like in december 25). Normally the following HTML code is produced:

<div class="month mini-day-on"><a href="...">25</a></div>

The class "mini-day-on" is added when there are events on that date. If there are no events on that date, then the class "mini-day-off" is added.

What we are trying to achieve is placing the following HTML code after the hyperlink "25":

<span style="display:none">Christmas day</span>

The text "Christmas day" will not display on the calendar (because of the "display:none" style), but later on when we are done, it should display on the tooltip when you hover over "25" on the calendar. When there are multiple events on that date, it may be useful to list the events in an unordered list. This will look something like this:

<span style="display:none"><ul><li>Christmas day</li><li>Richie's birthday</li></ul></span>

In order to tell Beautytips where to get the content we need to override the calendar module's calendar-mini.tpl.php. Copy sites/all/modules/calendar/theme/calendar-mini.tpl.php to your theme's directory. Add the following code at the beginnning of the month-view div:

<?php
   $bt_options['mini-calendar'] = array(
      "area" => ".mini-day-on a",
      "contentSelector" => '$(this).next().html()'
   );
   beautytips_add_beautytips($bt_options);
?>

The area is a CSS selector that selects every hyperlink (eg. every date) on the mini calendar. The contentSelector is jQuery code which specifies the HTML code  of the hyperlink's first sibling (in our case the span element) as the tooltip's content.

Now we need to write some PHP code that produces the span element with the relevant event data. This is the difficult part. Look for the function called template_preprocess_calendar_datebox in sites/all/modules/calendar/theme/theme.inc. Copy this function to your theme's template.php. Replace the text "template" by the name of your theme. Insert the following code after this line:

$vars['class'] = 'mini-day-on';

Here is the code:

$bt_text = "<ul>";
foreach ($vars['items'][$date] as $time => $results_at_that_time)
   foreach ($results_at_that_time as $num => $result)
      $bt_text .= "<li>" . $result->raw->node_title . "</li>";
$bt_text .= "</ul>";
$bt_text = "<span style=\"display:none\">" . $bt_text . "</span>";
$vars['link'] = l($vars['day'], $vars['url']) . $bt_text;

What this does is aggregating all event data of that day and put it in an HTML unordered list, which is parented in a span element, which, on its turn, is placed next to the hyperlink.

That's it!

No Limit for events display on calendar

Hey

 

In this module we could not control how much events we can display on each day ....

Fused Silica - Multi-lab

Fused Silica - Multi-lab offer BNP 2 Machinable Aluminium Nitride in blocks, rods, sheets and finished components for industries including aerospace.

Are you still supporting this?

I'm having an issue making this work. I keep recieving this error and I'm too green with Drupal to figure out how to fix it.

 

  • Notice: Undefined property: stdClass::$raw in zen_preprocess_calendar_datebox() (line 167 of/home/content/37/5923437/html/dev2/sites/all/themes/zen/template.php).
  • Notice: Trying to get property of non-object in zen_preprocess_calendar_datebox() (line 167 of/home/content/37/5923437/html/dev2/sites/all/themes/zen/template.php).
  • Notice: Undefined property: stdClass::$raw in zen_preprocess_calendar_datebox() (line 167 of/home/content/37/5923437/html/dev2/sites/all/themes/zen/template.php).
  • Notice: Trying to get property of non-object in zen_preprocess_calendar_datebox() (line 167 of/home/content/37/5923437/html/dev2/sites/all/themes/zen/template.php).

 

Re: Are you still supporting this?

The instructions on this page are for Drupal 6 users that prefer to do this manually (without using the calendar_tooltips module). If you use the module, then you do not need to edit any files. Also, this page has not been updated for Drupal 7 yet. That's probably why you get those error messages.

So, if you undo the changes you made in the templates then it should work.

Cheers,

Ronald

ambeien

Hemorrhoids or piles known as hemorrhoids,namely the decrease in bearing the anus (anal cushion) which is caused by many things, these bearings consists of mucosa, smooth muscle tissue of the anus, loose connective tissue and vascular tissue.Manfaat Kunyit Untuk Ambeien

obat kolesterol

thank to information Obat Asam Urat Yang Ada Di Apotik succes and Jamu Kuat Pria Tahan Lama first one position

bronkitis pada anak

QNC Jelly Gamat able to treat bronchitis in children is safe and without side effects, QNC jelly gamat give herbal treatment for children suffering from bronchitis.Obat Herbal Bronkitis Pada Anak

Need this module for drupal 5

Hi

I really liked this module but i need this for drupal 5 can you please help me out in this

Regards,

Muhammad

High Fever Treatment

How to cope with fever and body ache with herbal medicine QNC gamat jelly can help heal or cope with chills and body aches naturally and quickly. Pengobatan Demam Tinggi
Bahaya Obesitas
Penyubur Sperma
Penyakit Parkinson
Tips Anak Sehat
Jelly Gamat Cair
Sleep Care Capsule

Re: Need this module for drupal 5