Xin Calendar 2 Mods: Special Days

The Special Days mod lets us apply different CSS styles to the dates at a weekly, monthly and yearly base.

To turn it on:

xcMods=[...
        {"order": 1,  "mod": "Special Days",  "script": "mod_days.js"},
        ...

or:

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

Now we need to specify some dates and the CSS styles for those dates, and we have:

setLoopWeek(conf_name, css, css_disabled, start_week, week_offset, [week_day]) ... special dates at a weekly base
1. conf_name ... a name for the configuration reference
2. css ... css class (or two classes separated by a colon) for special dates, if empty, use the ones defined by the [ xcCSSDaySpecial ] array and the [ xcCSSDayOtherSpecial ] array
3. css_disabled ... css class (or two classes separated by a colon) for special dates that are disabled, if empty, use the ones defined by the [ xcCSSDaySpecial ] array and the [ xcCSSDayOtherSpecial ] array
4. start_week ... number from 1 to 5
5. week_offset ... repeating interval
6. [week_day] ... any of "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"
```
setLoopWeek("special", "", "", 1, 1, "Sun", "Sat") ... Sunday and Saturday on every week
```
setLoopMonth(conf_name, css, css_disabled, start_month, month_offset, [day_in_month]) ... special dates at a monthly base
1. conf_name ... a name for the configuration reference
2. css ... css class (or two classes separated by a colon) for special dates, if empty, use the ones defined by [ xcCSSDaySpecial ] and [ xcCSSDayOtherSpecial ]
3. css_disabled ... css class (or two classes separated by a colon) for special dates that are disabled, if empty, use the ones defined by [ xcCSSDaySpecial ] and [ xcCSSDayOtherSpecial ]
4. start_month ... number from 1 to 12
5. month_offset ... repeating interval
6. [day_in_month] ... any of 1 to 31
```
setLoopMonth("special", "", "", 1, 2, 1, 15) ... The first and fifteenth day on every other month starting from Jan.
```
setLoopYear(conf_name, css, css_disabled, date_format, [date_in_year]) ... special dates at a yearly base
1. conf_name ... a name for the configuration reference
2. css ... css class (or two classes separated by a colon) for special dates, if empty, use the ones defined by [ xcCSSDaySpecial ] and [ xcCSSDayOtherSpecial ]
3. css_disabled ... css class (or two classes separated by a colon) for special dates that are disabled, if empty, use the ones defined by [ xcCSSDaySpecial ] and [ xcCSSDayOtherSpecial ]
4. date_format ... date format used for [date_in_year], if empty, use the one defined by [ xcDateFormat ]
5. [date_in_year] ... any date strings (the year portion will be ignored)
```
setLoopYear("special", "", "", "yyyymmdd", "20040101", "20040214", "20040401", "20040701", ...)
```

Here we have different CSS styles for different weekdays:

<head>
...
<link rel=stylesheet href="../css/xc2_default.css" type="text/css">
<style type="text/css">
.Sun { background-color:... }
.SunO { background-color:... }
.Mon { background-color:... }
.MonO { background-color:... }
.Tue { background-color:... }
.TueO { background-color:... }
.Wed { background-color:... }
.WedO { background-color:... }
.Thu { background-color:... }
.ThuO { background-color:... }
.Fri { background-color:... }
.FriO { background-color:... }
.Sat { background-color:... }
.SatO { background-color:... }
</style>
...
<head>

Note: The above CSS settings should be defined in the calendar template file (script/xc2_template.html) for Popup-Window calendars.

and we call the setLoopWeek() for each weekday:

<head>
...
<link rel=stylesheet href="../css/xc2_default.css" type="text/css">
<style type="text/css">
.Sun { background-color:#c69000; ... }
...
</style>
...
<script language="javascript" src="../script/xc2_inpage.js"></script>
<script language="javascript">
setLoopWeek("conf", "Sun:SunO", "", 1, 1, "Sun");
setLoopWeek("conf", "Mon:MonO", "", 1, 1, "Mon");
setLoopWeek("conf", "Tue:TueO", "", 1, 1, "Tue");
setLoopWeek("conf", "Wed:WedO", "", 1, 1, "Wed");
setLoopWeek("conf", "Thu:ThuO", "", 1, 1, "Thu");
setLoopWeek("conf", "Fri:FriO", "", 1, 1, "Fri");
setLoopWeek("conf", "Sat:SatO", "", 1, 1, "Sat");
</script>
<head>

[Date Info] [Back to index page]

# # #