Xin Calendar 2 Mods

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

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"}];
...

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"}];
...

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]

# # #