Xin Calendar 2 Example: Customizable foot links

yxScripts.com

 

Besides the "default" ones, we can also add some customized user foot links to the calendar foot bar.

XC2 introduces four array variables for this purpose:

These variables can be found in the config script (config/xc2_default.js), and by default they are empty.

The xcFootButtons array contains the display text for the user foot links, we can specify static values or function handlers that will return some values. For example:

function weather_icon() {
  return "<img src='http://www.myweather.com/weather_icon.cgi'>";
}

xcFootButtons = ["Home", weather_icon];

will show two user foot links of "Home" and the weather image.


The xcFootButtonSwitch is just like the xcFootTagSwitch, these two arrays will be combined to sort out the order for default foot links and user foot links. For example:

xcFootTags=["Today", ...];
xcFootTagSwitch = [2, 0, 0, 0, 0, 0, 0, 0];
...
xcFootButtons = ["Home", weather_icon];
xcFootButtonSwitch = [1, 3];

will show foot links of "Home", "Today" and the weather image.


The xcFootButtonLinks array is where we define the function handlers for the user foot links. For a function handler specified in the xcFootButtonLinks array, the function will be called when its user foot link is clicked. The function should expect four parameters to be passed. For example:

function open_home(cal_target_field, cal_ref_field, cal_default_date, last_date_picked) {
  window.open("http://www.yxscripts.com");
}

function open_weather(cal_target_field, cal_ref_field, cal_default_date, last_date_picked) {
  window.open("http://www.myweather.com/show_weather.cgi?date="+cal_target_field.value);
}

xcFootButtonLinks = [open_home, open_weather];

The xcCSSFootOther array contains arrays of CSS class names for user foot links. For example:

xcCSSFootOther=[ ["home", "home_over", "home_down"], ["weather", "weather_over", "weather_down"] ];

As a summary, to define an user foot link, we will put the display text in the "xcFootButtons" array, the display order in the "xcFootButtonSwitch" array, the function link in the "xcFootButtonLinks" array, and the CSS class array in the "xcCSSFootOther" array.


[Static calendar 2] [Back to index page]

# # #