Xin Calendar Mods

Copyright 2003 Xin Yang

Mod:Date Tips
Script:mod_tips.js
Description:to popup a tip box when hover a date

Core: - In-Page

Interface: setTipsTiming()
setDateStyle()
setTipsStyle()
setTipsLayout()
addDateTips()

Usage: - setTipsTiming(T) ... T is the time delay in ms before a tip box pops up, default is 1000.

- setDateStyle(font_color, bgcolor) ... colors for dates with tips, default settings are "#cc0000" and "#f0f0f0".

- setTipsStyle(border_size, border_color, font, font_size, title_color, title_bgcolor, tip_color, tip_bgcolor, tip_align, padding) ... styles for the tip box.

- setTipsLayout(auto_hide, sticky, position, width) ... layout settings for the tip box, default setting is [1, 0, 4, 0].

  "auto_hide" could be 0 (sticky, shows the date hovered as title with a [X] link to close the tip box) or 1 (auto hide).

  "sticky" will only apply when "auto_hide" is set to 0, it could be 0 (hide the tip box if a click-able element on the calendar is clicked or the [X] is clicked) or 1 (stay sticky until the [X] is clicked).

  "position" could be 0 (above the calendar), 1 (overlapping the calendar), 2 (beneath the calendar), 3 (above the date hovered), 4 (beneath the date hovered), 5 (to the left of the calendar) or 6 (to the right of the calendar).

  "width" could be 0 (to use calendar width) or any number.

- addDateTips(calendar_name, date_string, tip) ... the "date_string" should be compliant to the date format defined, if long date format or two digit year is used, it should follow the "internal" date format.

include the mod script after the core script include line and before the config script include line:

<script language="javascript" src="mod_tips.js"<>/script>

Note: If this mod is used with Date Link Mod, the mod script included later will define the cell colors for special dates.

Demo: <script language="javascript" src="cal_core.js"<>/script>
<script language="javascript" src="mod_tips.js"<>/script>

<script language="javascript">
addCalendar("date", "date", "", "2003/03/20", "cal-1", "cal-2", 0, 0);

addDateTips("date", "2003/03/01", "- sometimes it dances<br>- and sometimes it flies<br>- but I don't know<br>- when it dances<br>- and when it flies");
addDateTips("date", "2003/03/15", "mocha is my favorite");
addDateTips("date", "2003/03/30", "here is a message for you");
</script>

 (this is a lite version, you can scroll the month and year with the full verison)