Welcome, Guest. Please login or register.
Did you miss your activation email?


Login with username, password and session length

Search

 
Advanced search

8240 Posts in 1905 Topics- by 2172 Members - Latest Member: JeffHLB
Calendar Script CommunityCustomizationHacks and Mods (Moderators: scott, DanO)Using Erik Bosrup's Overlib with Calendarscript
Pages: [1]   Go Down
Print
Author Topic: Using Erik Bosrup's Overlib with Calendarscript  (Read 2147 times)
0 Members and 1 Guest are viewing this topic.
wakalapi
Guest
« on: February 26, 2007, 12:36:00 PM »

There are many calendars with really cool pop-up tooltips people see when they pass their mouse over calendar event links. You can implement these into CalendarScript, too, and it's not that difficult.

Some of us have already hacked up the default template (risky) or created fancy replacements (recommended, always have a clean original default.html backed up somewhere). I use customized templates that have all of the datafields hardcoded (rather than auto-inserted as the default does). My own templates must be manually modified whenever I add a new custom field to the database. Is this a pain? No! Just a little extra work can produce a highly customized result. CalendarScript lets you be free to do advanced things once you are familiar with how the templates work.

1. Download the latest version of the free OverLib Javascript and instructions from http://www.bosrup.com/web/overlib/?Download  

2. Upload scripts to your webserver as instructed, let's assume for my example that you are putting it into www.yourwebsite.com/includes/javascript/.  Let's also assume your monthly grid view shows event titles, but you want to show "city" and "state" fields in a popup (substitute whatever fields you really have or want once you get the hang of this).

3. Now go to your CalendarScript templates and insert the following line somewhere into the header.html template, or anywhere between the <head> and </head> tags of any template you are using, such as default.html:

<script type="text/javascript" src="/includes/javascript/overlib.js"><!-- overLIB (c) Erik Bosrup --></script>

4. Open your default.html template and add the following mouseover and mouseout elements to the hyperlink to your event view:

onmouseover="return overlib('<%= EVENT FIELD(city) %>, <%= EVENT FIELD(state) %>');" onmouseout="nd();"

Don't know where this happens? Find:

      <%-- =============================== --%>
      <%-- THIS IS THE ACTUAL DISPLAY AREA --%>
      <%-- =============================== --%>

      <%-- MONTHLY OR WEEKLY VIEW --%>
      <% if ($VIEW eq "Month") { %>
         <%-- GRID STYLE DISPLAY --%>

And carefully scroll down until you find:
                  <%FOREACH EVENT%>

Then find:

<A HREF="<%=$CGI_URL_QUERYSTRING%>view=Event&event_id=<%= EVENT FIELD(id) %>" CLASS="gridtext"><%= EVENT FIELD(title) %></A>

And add the mouseover and mouseout elements, producing the following result:

<A HREF="<%=$CGI_URL_QUERYSTRING%>view=Event&event_id=<%= EVENT FIELD(id) %>" CLASS="gridtext" onmouseover="return overlib('<%= EVENT FIELD(city) %>, <%= EVENT FIELD(state) %>');" onmouseout="nd();"><%= EVENT FIELD(title) %></A>

Did I mention that this example assumes you made "city" and "state" fields, and that you could actually use any other custom text field you choose?

**** LIMITATIONS: ****

I haven't found a workaround for this yet, if your event city or state (or other chosen field) has an apostrophe (') or even its HTML entity (&apos a user's browser will misinterpret that character as an end-of-statement in executing the Javascript. For example, a city such as Coeur D'Alene, Idaho in that field for that event would cause the Overlib tooltip to simply not appear.

An example of how this works can be found on my test implementation:
http://www.powwowtime.com/calendar/  

Other mods I'm trying there include integration with CPG-Nuke via PHP curl and the use of TinyMCE text boxes in the event entry form. I am also using separate templates for the grid (based on dayspan) and event views, and all other views are eliminated since I just don't have a need for them. My event views include Google Ads, motel search links and a Yahoo! Map API Ajax-based map (results based on an events "address", "city" and "state" fields).

Logged
lectrichead
New Member
*

Karma: 0
Offline Offline

Posts: 5


WWW
« Reply #1 on: June 22, 2007, 09:30:44 AM »

Quote from: wakalapi link=topic=1530. msg6360#msg6360 date=1172511360
**** LIMITATIONS: ****<P>I haven't found a workaround for this yet, if your event city or state (or other chosen field) has an apostrophe (') or even its HTML entity (' <IMG SRC="hxxp: www. calendarscript. com/support/forum/wink. gif"> a user's browser will misinterpret that character as an end-of-statement in executing the Javascript.  For example, a city such as Coeur D'Alene, Idaho in that field for that event would cause the Overlib tooltip to simply not appear.

  Use the ASCII code -
Code:
&#39;
Logged
scott
Administrator
Hero Member
*****

Karma: 10000
Offline Offline

Posts: I am a geek!!



WWW
« Reply #2 on: June 23, 2007, 04:26:15 PM »

I've announced the development of CalendarScript v4, and am taking requests now.. Once I get a list together of what's wanted, I'll put together a poll and we'll see what needs to be implemented first.. to help address things like this.

Scott
Logged

Pages: [1]   Go Up
Print
Jump to: