Xin Calendar 2 Mods

yxScripts.com

A mod is a JS script that changes the behavior of the calendars. The changes could be the look and feel of the calendar, or extra features added to the calendar. Some mods will apply to all the calendars once installed, some mods will only apply to calendars that reference them.

Currently Xin Calendar 2 provides the following mods:

Mod Description Script Type I/P*

Month/Year List

To replace the month/year title with two select lists

mod_list.js

all

Yes

Date Range

To enable/disable date ranges, weekdays and dates

mod_date.js

reference

Yes

Special Days

To display dates with different CSS styles

mod_days.js

reference

Yes

Date Info

To display date info inside the date cells

mod_info.js

reference

Yes

Journal

To open the journal page when click on a date

mod_journal.js

all

Yes

Date Link

To open the specified page when click on a date

mod_link.js

reference

Yes

Long Date Format

To use full month/weekday names in date format

mod_long.js

all

Yes

Tiles

To display background tile images for a calendar

mod_tiles.js

reference

Yes/No

Date Tips

To show tooltips for dates

mod_tips.js

reference

Yes/No

Time

To support time

mod_time.js

all

Yes
  I/P: specifies whether the mod will work with In-Page/Popup-Window calendars.


The default config file (config/xc2_default.js) lists all the mods so that we can turn on/off a mod with ease:

...
xcModPath="../script/";
xcMods=[{"order": 0,  "mod": "Month/Year List",   "script": "mod_list.js"},
        {"order": 0,  "mod": "Date Range",        "script": "mod_date.js"},
        {"order": 0,  "mod": "Special Days",      "script": "mod_days.js"},
        {"order": 0,  "mod": "Date Info",         "script": "mod_info.js"},
        {"order": 0,  "mod": "Journal",           "script": "mod_journal.js"},
        {"order": 0,  "mod": "Date Link",         "script": "mod_link.js"},
        {"order": 0,  "mod": "Long Date Format",  "script": "mod_long.js"},
        {"order": 0,  "mod": "Tiles",             "script": "mod_tiles.js"},
        {"order": 0,  "mod": "Date Tips",         "script": "mod_tips.js"},
        {"order": 0,  "mod": "Time",              "script": "mod_time.js"}];
...

Say we want to turn on the Date Range mod, we can simply change its "order" to 1:

...
xcModPath="../script/";
xcMods=[{"order": 0,  "mod": "Month/Year List",   "script": "mod_list.js"},
        {"order": 1,  "mod": "Date Range",        "script": "mod_date.js"},
        {"order": 0,  "mod": "Special Days",      "script": "mod_days.js"},
        {"order": 0,  "mod": "Date Info",         "script": "mod_info.js"},
        {"order": 0,  "mod": "Journal",           "script": "mod_journal.js"},
        {"order": 0,  "mod": "Date Link",         "script": "mod_link.js"},
        {"order": 0,  "mod": "Long Date Format",  "script": "mod_long.js"},
        {"order": 0,  "mod": "Tiles",             "script": "mod_tiles.js"},
        {"order": 0,  "mod": "Date Tips",         "script": "mod_tips.js"},
        {"order": 0,  "mod": "Time",              "script": "mod_time.js"}];
...

If we don't want to touch the default config file, we can do that in the JS way. For the Date Range mod, it's the second entry in the list (index starts from 0) and we can have:

<script language="javascript" src="../config/xc2_default.js"></script>
<script language="javascript">
  xcMods[1].order=1;
</script>

which does the same thing as to set "order" to 1 for the Date Rande mod.


After we turn on a mod, we might need to adjust some CSS styles, change some config settings and call some functions provided by the mod:

<head>
<link rel=stylesheet href="../css/xc2_default.css" type="text/css">
<style type="text/css">
... customized CSS styles ...
</style>

<script language="javascript" src="../config/xc2_default.js"></script>
<script language="javascript">
... customized config settings ...
</script>

<script language="javascript" src="../script/xc2_inpage.js"></script>
<script language="javascript">
... mod settings ...
</script>
</head>

The mod setup for Popup-Window version is almost the same, except that the CSS part is included in the calendar template file (script/xc2_template.html).

Now let's go through the mods one by one.

[Month/Year List] [Back to index page]

# # #