Xin Calendar 2 Example: Using images in calendar

yxScripts.com

Images can be added in two ways, as display content or as background image.

Scrolling arrows and foot links are good candidates to use images as display contents, and we have the following settings for the scrolling arrows in this example:

xcArrowMonth=[
  "<img src='../images/month_prev.gif' width='15' height='15' border='0' hspace='2'>",
  "<img src='../images/month_next.gif' width='15' height='15' border='0' hspace='2'>"
];
xcArrowYear=[
  "<img src='../images/year_prev.gif' width='15' height='15' border='0'>",
  "<img src='../images/year_next.gif' width='15' height='15' border='0'>"
];

In such a case, we don't really need CSS for the scrolling arrows, so we also have:

xcCSSArrowMonthPrev=["","",""];
xcCSSArrowMonthNext=["","",""];

xcCSSArrowYearPrev=["","",""];
xcCSSArrowYearNext=["","",""];

The blocks are good candidates to use images as backgrounds, and in this example we simply pick the outer panel:

.panel {
  border:1px solid #000000;
  padding:7px;
  background:url("../images/pad.gif") no-repeat;
}

We can also use background images for scrolling arrows and foot links, and do the mouse-over/mouse-out image swapping. The trick is just to define different background images for their CSS classes used at mouse-over stage and mouse-out stage, and set the display contents to empty strings.

For example, if we have the following CSS definitions:

.today_link {
  width:20px;
  height:20px;
  line-height:20px;
  cursor:pointer;
  background:url("../images/today.gif") center center no-repeat;
}
.today_over {
  width:20px;
  height:20px;
  line-height:20px;
  cursor:pointer;
  background:url("../images/today_over.gif") center center no-repeat;
}
.today_down {
  width:20px;
  height:20px;
  line-height:20px;
  cursor:pointer;
  background:url("../images/today_down.gif") right bottom no-repeat;
}

and the following config settings:

xcCSSFootToday=["today_link", "today_over", "today_down"];

xcFootTags=["", ...];

then we will have some image swapping effects for the foot link of [ Today ]. We can see this in action in the next example.

[The foot links] [Back to index page]

# # #