Xin Calendar 2 Step-by-step: Set up the layout and styles

yxScripts.com

If we open the "config/xc2_default.js" in a text editor, we could notice that it consists of several sections:

All the settings are defined with Javascript variables and the names of these variables should be quite self-explained. Now let's look at the first three sections and we will cover the mods later.

Date Format

xcDateFormat

A string with "yyyy" for the year, "mm" or "mon" for the month, "dd" for the day and "day" for the week day (optional). The separator can be any other characters.

For example:

yyyy-mm-dd ... 2004-07-22
mon. dd (day), yyyy ... Jul. 22 (Thu), 2004
CSS Settings
The calendar consists of couple DIV blocks: the outer panel, the year/month head block, the weekday block, the day block and the foot link block. When setting up the CSS definitions, we should make sure that the weekday block and the day block have the same width, and the weekday cells and day cells have the same width. Once we have the CSS definitions, we can assign them to the following variables accordingly.

xcCSSPanel

 the CSS class name for the outer panel

xcCSSHeadBlock

 the CSS class name for the year/month head block

xcCSSHead

 the CSS class name for the year/month title string

xcCSSArrowMonthPrev

 the CSS class name array for the previous month scrolling arrow at normal, mouse-overed and mouse-downed states

xcCSSArrowMonthNext

 the CSS class name array for the next month scrolling arrow at normal, mouse-overed and mouse-downed states

xcCSSArrowYearPrev

 the CSS class name array for the previous year scrolling arrow at normal, mouse-overed and mouse-downed states/td>

xcCSSArrowYearNext

 the CSS class name array for the next year scrolling arrow at normal, mouse-overed and mouse-downed states

xcCSSWeekdayBlock

 the CSS class name for the weekday block

xcCSSWeekday

 the CSS class name for the weekday cells

xcCSSDayBlock

 the CSS class name for the day block

xcCSSDay

 the CSS class name array for dates at normal, mouse-overed, mouse-downed and disabled states

xcCSSDayCurrent

 the CSS class name array for the date picked or today at normal, mouse-overed and mouse-downed states

xcCSSDaySpecial

 the CSS class name array for special dates at normal, mouse-overed, mouse-downed and disabled states

xcCSSDayOther

 the CSS class name array for dates of previous/next month at normal, mouse-overed, mouse-downed and disabled states

xcCSSDayOtherCurrent

 the CSS class name array for the date picked or today at normal, mouse-overed and mouse-downed states when it's not in the month being shown

xcCSSDayOtherSpecial

 the CSS class name array for special dates of previous/next month at normal, mouse-overed, mouse-downed and disabled states

xcCSSDayEmpty

 the CSS class name for the empty day cells

xcCSSVersion

 the version of XC2 that supports the CSS settings for dates

xcCSSFootBlock

 the CSS class name for the foot link block

xcCSSFootToday

 the CSS class name array for the foot link of [Today] at normal, mouse-overed and mouse-downed states

xcCSSFootClear

 the CSS class name array for the foot link of [Clear] at normal, mouse-overed and mouse-downed states

xcCSSFootBack

 the CSS class name array for the foot link of [Back] at normal, mouse-overed and mouse-downed states

xcCSSFootClose

 the CSS class name array for the foot link of [Close] at normal, mouse-overed and mouse-downed states

xcCSSFootReset

 the CSS class name array for the foot link of [Reset] at normal, mouse-overed and mouse-downed states

xcCSSFootOther

 the CSS class name array for customized foot links at normal, mouse-overed and mouse-downed states
Layout Settings
The layout settings define the display and position for the calendar components.

xcMonthNames

 an array that lists the full month names for use in month part of the year/month title

xcMonthShortNames

 an array that lists the short month names for use in date format

xcMonthPrefix

 a string that prefixes the month name in the year/month title

xcMonthSuffix

 a string that suffixes the month name in the year/month title

xcYearDigits

 an array that lists the contents used for each digit of the year

xcYearPrefix

 a string that prefixes the year in the year/month title

xcYearSuffix

 a string that suffixes the year in the year/month title

xcHeadSeparator

 a string that separates the year and month in the year/month title

xcHeadTagOrder

 a flag number to tell the order of year and month in the year/month title

xcHeadTagAdjustment

 a flag number to tell whether to stretch the year/month title to the available width of the head block, this should be used in conjunction with the CSS of xcCSSHead

xcArrowMonth

 an array of two strings for the month scrolling arrows

xcArrowYear

 an array of two strings for the year scrolling arrows

xcArrowSwitch

 an array of two flag numbers to switch on/off the year and month scrolling arrows

xcArrowPosition

 a flag number to tell whether to put the year/month scrolling arrows in the head block or in the foot link block

xcWeekdayNames

 an array that lists the full weekday names for use in the long date format mod

xcWeekdayShortNames

 an array that lists the short weekday names for use in date format

xcWeekdayDisplay

 an array that lists the weekday display names for use in the weekday cells

xcFootTags

 an array that lists the display titles of the foot links

xcFootTagSwitch

 an array of flag numbers to tell the display order of the foot links and switch on/off the foot links

xcFootTagAdjustment

 a flag number to tell whether to stretch the foot links to the width of the foot link block, this should be used in conjunction with the CSS of xcCSSFoot

xcFootButtons

 an array that lists the display titles of the user foot links

xcFootButtonSwitch

 an array of flag numbers to tell the display order of the user foot links and switch on/off the user foot links

xcFootButtonLinks

 an array that lists the handling functions for user foot links

xcGridWidth

 a number to set the cellspacing width for grid effect

xcBaseZIndex

 the base z-index number for the calendar layers

xcMultiCalendar

 a flag number to tell whether to display multiple popup calendars

xcShowCurrentDate

 a flag number to tell whether to apply the CSS styles of xcCSSDayCurrent/xcCSSDayCurrentMouseover/xcCSSDayCurrentMousedown to the date picked or today

xcWeekStart

 a flag number to tell whether the week starts with Sunday or Monday

xcAutoHide

 a flag number to tell whether to auto-hide a calendar after mouseout

xcStickyMode

 a flag number to tell whether the calendar should stay open after a date is picked

xcShowPrevNextMonth

 a flag number to tell whether the calendar should show dates of previous/next month

xcDayContents

 an array that lists the contents used for days (1-31) at normal stage

xcDayContentsDisabled

 an array that lists the contents used for days out off the date range

xcDayContentsCurrent

 an array that lists the contents used for days at current stage


So basically we have the option to set up CSS styles for individual click-able elements in the calendar at normal stage, mouse-over stage and mouse-down stage. Following is the default configuration used by Xin Calendar 2:

// date format
// -----------
xcDateFormat="yyyy-mm-dd";


// css conf
// --------
xcCSSPanel="panel";

xcCSSHeadBlock="row_head";
xcCSSHead="head";

xcCSSArrowMonthPrev=["arrow_prev", "arrow_prev_over", "arrow_prev_down"];
xcCSSArrowMonthNext=["arrow_next", "arrow_next_over", "arrow_next_down"];

xcCSSArrowYearPrev=["arrow_prev", "arrow_prev_over", "arrow_prev_down"];
xcCSSArrowYearNext=["arrow_next", "arrow_next_over", "arrow_next_down"];

xcCSSWeekdayBlock="row_week";
xcCSSWeekday="weekday";

xcCSSDayBlock="row_day";
xcCSSDay=["day", "day_over", "day_down", "day_disabled"];
xcCSSDayCurrent=["day_current", "", ""];
xcCSSDaySpecial=["day_special", "day_over", "day_down", "day_disabled"];
xcCSSDayOther=["day_other", "day_other_over", "day_down", "day_disabled"];
xcCSSDayOtherCurrent=["day_other_current", "", ""];
xcCSSDayOtherSpecial=["", "", "", ""];
xcCSSDayEmpty="day_empty";

xcCSSVersion="2.9";

xcCSSFootBlock="row_foot";
xcCSSFootToday=["foot", "foot_over", "foot_down"];
xcCSSFootClear=["foot", "foot_over", "foot_down"];
xcCSSFootBack=["foot", "foot_over", "foot_down"];
xcCSSFootClose=["foot", "foot_over", "foot_down"];
xcCSSFootReset=["foot", "foot_over", "foot_down"];


// layout conf
// -----------
xcMonthNames=["January", "February", ..., "December"];
xcMonthShortNames=["Jan", "Feb", ..., "Dec"];
xcMonthPrefix="";
xcMonthSuffix="";
xcYearDigits=["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"];
xcYearPrefix="";
xcYearSuffix="";
xcHeadSeparator=" "; // separator string between year and month
xcHeadTagOrder=1; // 1: month/year, 0: year/month
xcHeadTagAdjustment=1; // 1: 100% width, 0: actual width

xcArrowMonth=["‹", "›"];
xcArrowYear=["«", "»"];
xcArrowSwitch=[1, 1]; // [year, month] 1:on, 0:off
xcArrowPosition=0; // 0:in head block, 1:in foot block

// names for days
xcWeekdayNames=["Sunday", "Monday", ..., "Sunday"];
xcWeekdayShortNames=["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
xcWeekdayDisplay=["S", "M", "T", "W", "T", "F", "S", "S"];

// foot links
xcFootTags=["Today", "Clear", "Back", "Close", "Reset", "_Today_", "_Back_", "_Reset_"];
xcFootTagSwitch=[1, 0, 0, 2, 0, 0, 0, 0]; // non-zero: display order, 0: off
xcFootTagAdjustment=0; // 1: % width, 0: actual width

// customized foot links
xcFootButtons=[];
xcFootButtonSwitch=[];
xcFootButtonLinks=[];

xcGridWidth=0; // used as cellspacing
xcBaseZIndex=100; // z-index for calendar layers
xcMultiCalendar=0; // 1:multi-calendar, 0:single-calendar
xcShowCurrentDate=1; // 1:highlight current date/today, 0:no highlight
xcWeekStart=0; // 0:Sunday, 1:Monday

xcDayContents=[" ", "1", "2", ..., "30", "31"];
xcDayContentsDisabled=xcDayContents;
xcDayContentsCurrent=xcDayContents;

...

and the default CSS definitions (css/xc2_default.css):

.panel {
  border-width:1px;
  border-style:solid;
  border-color:#cce6ff #668099 #668099 #cce6ff;
  background-color:#f0f0f0;
}

.row_head {
  border-width:1px;
  border-style:solid;
  border-color:#f0f0f0;
  background-color:#f0f0f0;
}
.head {
  font-family:verdana;
  font-size:11px;
  font-weight:bold;
  text-align:center;
  color:#000000;
  background-color:#f0f0f0;
  cursor:default;
}

.arrow_prev {
  font-family:verdana;
  font-size:11px;
  width:12px;
  margin-right:1px;
  text-align:center;
  color:#ffffff;
  background-color:#99b3cc;
  border-width:1px;
  border-style:solid;
  border-color:#cce6ff #668099 #668099 #cce6ff;
  padding:1px;
  cursor:pointer;
}
.arrow_prev_over {
  font-family:verdana;
  font-size:11px;
  width:12px;
  margin-right:1px;
  text-align:center;
  color:#ffffff;
  background-color:#afc6dd;
  border-width:1px;
  border-style:solid;
  border-color:#cce6ff #668099 #668099 #cce6ff;
  padding:1px;
  cursor:pointer;
}
.arrow_prev_down {
  font-family:verdana;
  font-size:11px;
  width:12px;
  margin-right:1px;
  text-align:center;
  color:#ffffff;
  background-color:#7e93aa;
  border-width:1px;
  border-style:solid;
  border-color:#4b6077 #afc6dd #afc6dd #4b6077;
  padding:2px 0px 0px 2px;
  cursor:pointer;
}

.arrow_next {
  font-family:verdana;
  font-size:11px;
  width:12px;
  margin-left:1px;
  text-align:center;
  color:#ffffff;
  background-color:#99b3cc;
  border-width:1px;
  border-style:solid;
  border-color:#cce6ff #668099 #668099 #cce6ff;
  padding:1px;
  cursor:pointer;
}
.arrow_next_over {
  font-family:verdana;
  font-size:11px;
  width:12px;
  margin-left:1px;
  text-align:center;
  color:#ffffff;
  background-color:#afc6dd;
  border-width:1px;
  border-style:solid;
  border-color:#cce6ff #668099 #668099 #cce6ff;
  padding:1px;
  cursor:pointer;
}
.arrow_next_down {
  font-family:verdana;
  font-size:11px;
  width:12px;
  margin-left:1px;
  text-align:center;
  color:#ffffff;
  background-color:#7e93aa;
  border-width:1px;
  border-style:solid;
  border-color:#4b6077 #afc6dd #afc6dd #4b6077;
  padding:2px 0px 0px 2px;
  cursor:pointer;
}

.row_week {
  border-width:1px;
  border-style:solid;
  border-color:#99b3cc #99b3cc #668099 #99b3cc;
}
.weekday {
  font-family:verdana;
  font-size:11px;
  width:23px;
  text-align:center;
  color:#ffffff;
  background-color:#99b3cc;
  border:1px solid #99b3cc;
  padding:1px;
  cursor:default;
}

.row_day {
  padding:1px;
}
.day {
  font-family:verdana;
  font-size:11px;
  line-height:14px;
  width:23px;
  text-align:center;
  color:#000000;
  background-color:#f0f0f0;
  border:1px solid #f0f0f0;
  padding:1px;
  cursor:pointer;
}
.day_over {
  font-family:verdana;
  font-size:11px;
  line-height:14px;
  width:23px;
  text-align:center;
  color:#000000;
  background-color:#f0f0f0;
  border-width:1px;
  border-style:solid;
  border-color:#ffffff #c0c0c0 #c0c0c0 #ffffff;
  padding:1px;
  cursor:pointer;
}
.day_down {
  font-family:verdana;
  font-size:11px;
  line-height:14px;
  width:23px;
  text-align:center;
  color:#000000;
  background-color:#cfcfcf;
  border-width:1px;
  border-style:solid;
  border-color:#9c9c9c #ffffff #ffffff #9c9c9c;
  padding:1px;
  cursor:pointer;
}
.day_empty {
  font-family:verdana;
  font-size:11px;
  line-height:14px;
  width:23px;
  text-align:center;
  color:#f0f0f0;
  background-color:#f0f0f0;
  border:1px solid #f0f0f0;
  padding:1px;
  cursor:default;
}
.day_disabled {
  font-family:verdana;
  font-size:11px;
  line-height:14px;
  width:23px;
  text-align:center;
  text-decoration:line-through;
  color:#999999;
  background-color:#f0f0f0;
  border:1px solid #f0f0f0;
  padding:1px;
  cursor:default;
}
.day_current {
  font-family:verdana;
  font-size:11px;
  line-height:14px;
  width:23px;
  text-align:center;
  color:#ffffff;
  background-color:#99b3cc;
  border-width:1px;
  border-style:solid;
  border-color:#cce6ff #668099 #668099 #cce6ff;
  padding:1px;
  cursor:pointer;
}
.day_special {
  font-family:verdana;
  font-size:11px;
  line-height:14px;
  width:23px;
  text-align:center;
  color:#ffffff;
  background-color:#cc9999;
  border-width:1px;
  border-style:solid;
  border-color:#ffcccc #996666 #996666 #ffcccc;
  padding:1px;
  cursor:pointer;
}
.day_other {
  font-family:verdana;
  font-size:9px;
  line-height:14px;
  width:23px;
  text-align:center;
  color:#999999;
  background-color:#f0f0f0;
  border:1px solid #f0f0f0;
  padding:1px;
  cursor:pointer;
}
.day_other_over {
  font-family:verdana;
  font-size:9px;
  line-height:14px;
  width:23px;
  text-align:center;
  color:#666666;
  background-color:#c0c0c0;
  border-width:1px;
  border-style:solid;
  border-color:#f0f0f0 #909090 #909090 #f0f0f0;
  padding:1px;
  cursor:pointer;
}
.day_other_current {
  font-family:verdana;
  font-size:9px;
  line-height:14px;
  width:23px;
  text-align:center;
  color:#666666;
  background-color:#c0c0c0;
  border-width:1px;
  border-style:solid;
  border-color:#f0f0f0 #909090 #909090 #f0f0f0;
  padding:1px;
  cursor:pointer;
}

.row_foot {
  margin:1px;
}

.foot {
  font-family:verdana;
  font-size:11px;
  width:50px;
  margin:0px 1px;
  text-align:center;
  color:#ffffff;
  background-color:#99b3cc;
  border-width:1px;
  border-style:solid;
  border-color:#cce6ff #668099 #668099 #cce6ff;
  padding:1px;
  cursor:pointer;
}
.foot_over {
  font-family:verdana;
  font-size:11px;
  width:50px;
  margin:0px 1px;
  text-align:center;
  color:#ffffff;
  background-color:#afc6dd;
  border-width:1px;
  border-style:solid;
  border-color:#cce6ff #668099 #668099 #cce6ff;
  padding:1px;
  cursor:pointer;
}
.foot_down {
  font-family:verdana;
  font-size:11px;
  width:50px;
  margin:0px 1px;
  text-align:center;
  color:#ffffff;
  background-color:#7e93aa;
  border-width:1px;
  border-style:solid;
  border-color:#4b6077 #afc6dd #afc6dd #4b6077;
  padding:2px 0px 0px 2px;
  cursor:pointer;
}

...

Usually we don't need to modify the default config file but just overwrite some settings to change the look and feel of the calendar, which we demonstrate in the coming examples.

[The helper functions] [Back to index page]

# # #