Event Calendar and overLIB

I’ve been playing with phpEventCalendar recently as a calendaring tool for group to which both Fern and I belong. The php and MySQL based calendar system was simple and worked really well for what I wanted, but one of the other systems that I looked had a neat feature. Whenever you would mouse over the event, it would display the details without having to click. I really wanted to add this capability and when I found a reference to overLIB in the phpEventCalendar forum I knew I had a new project.

overLIB is a a JavaScript library created to enhance websites with small popup information boxes (like tooltips) to help visitors around the website. I knew that I could use this to produce what I wanted. I took a little work (actually a fair amount seeing as how I don’t know PHP or JavaScript), but I now have what I want.

Event Rollovers
To get this functionality I had to make the following changes:

Make the changes as stated in the Preparing the Page section of overLIB Documentation. If you want the shadow effect, then follow the directions for using the Shadow pluggin.

A couple of modifications are needed. The first occurs in the function getEventDataArray. We need to add code to pull the event text. Look for the line $sql = "SELECT id, d, title, start_time, end_time, "; and replace it with $sql = "SELECT id, d, title, start_time, end_time, text, "; this pulls the necessary info from the db.

Next add the following code
$eventdata[$row["d"]]["text"][] = stripslashes(str_replace("\r\n", "<br />", $row["text"]));
just after the line
$eventdata[$row["d"]]["timestr"][] = $timestr;.

Now we are ready to add the code to display the boxes on mouse over. In the function writeCalendar find the section titled // write title link if posting exists for day and replace this line
$str .= "<a href=\"javascript:openPosting(" . $eventdata[$day]["id"][$j] . ")\">";

with the following two lines (lines may wrap)
$str .= "<a href=\"javascript:openPosting(" . $eventdata[$day]["id"][$j] . ")\" ";
$str .= "onmouseover=\"return overlib('" . $eventdata[$day]["text"][$j] . "', SHADOW, SHADOWOPACITY, 60, CAPTION, '" . $eventdata[$day]["title"][$j] . "');\" onmouseout=\"return nd();\">";

That’s all that is needed. Of course there are a lot of additional features of overLIB, but that got me what I wanted.

Weekend Highlighting
Next, I wanted to change the color of the weekend cells. I was able to do this with a couple of changes. The first to realize is that I’m no coder, so this is a real hack (if anyone can come up cleaner code I’d appreciate it).

I added an entry to the default.css to define the color for the weekend cells (note I’ve also modified the height and width so you will need to use whatever matches the rest of your cells
.weekend_cell { background-color:#CCCCCC; height:65; width: 85; }

All of the changes occur in function writeCalendar function. Look for the section that start // loop writes empty cells until. Then for the following code:

if (($day == $d) && ($month == $m) && ($year == $y))
                $str .= "today";
                $str .= "day";

you will need to replace the line $str .= "day"; with the following lines:

switch ($i) {
        case 0:
                $str .= "weekend";
        case 6:
                  $str .= "weekend";
                $str .= "day";
[Listening to: Bye Bye Baby by The Commitments – The Commitments (3:25)]
Leave a comment

1 Comment

  1. zoel

     /  November 28, 2007

    sory! this is for event calendar version?
    because in new version code is different..trims

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: