Xin Calendar 2 Example: Scrolling arrows on bottom

This example demonstrates how to twist the calendar settings quickly without making new config files.

We put the scrolling arrows in the foot link block and there is only one foot link (today) available. The popup trigger is set to the onfocus event so that the user has to pick a date to close the calendar.

We use a date format of "mon. dd (day), yyyy" in the example.

To do so, we take the default config (xc2_default.js) and put some lines after that to overwrite the default settings:

<script language="javascript" src="../config/xc2_default.js"></script>
<script language="javascript">
xcDateFormat="mon. dd (day), yyyy";
xcArrowPosition=1;
xcFootTagSwitch=[1, 0, 0, 0, 0, 0, 0, 0];
</script>

Of course, we also take the default CSS file (xc2_default.css) and put some lines after it to overwrite some style settings so that we can have a wider foot link:

<link rel=stylesheet href="../css/xc2_default.css" type="text/css">
<style type="text/css">
.head { background-color:#f0f0ff; }
.foot { width:100px; }
.foot_over { width:100px; }
.foot_down { width:100px; }
</style>

If we mouse-over the [Today] button, the tooltip of today's date will show up.

Simply put, this example shows the "usual" way to do minor customization to the default settings:

<head>
<link rel=stylesheet href="../css/xc2_default.css" type="text/css">
<style type="text/css">
... customized CSS settings ...
</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>
</head>

For the Popup-Window version, it would be:

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

<script language="javascript" src="../script/xc2_window.js"></script>
</head>

and the calendar template:

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

<script language="javascript" src="xc2_control.js"></script>
</head>

[Using images in calendar] [Back to index page]

# # #