1. 初始化

首先将 dhtmlxSuit 中的 dhtmlxCalendar 文件夹下的 codebase 文件夹整个复制到你的项目目录下，然后创建HTML文件。

1.1 引入JS文件和CSS文件

<link rel="stylesheet" type="text/css" href="codebase/dhtmlxcalendar.css" />
<script  src="codebase/dhtmlxcommon.js"></script>
<script  src="codebase/dhtmlxcalendar.js"></script>

?

1.2 定义用于显示日历的容器

<input type="text" id="calendar" />

?

1.3 定义生成日历的 JS 函数

<script type="text/javascript">
window.dhx_globalImgPath = "codebase/imgs/";
window.onload = function() {
    var cal1 = new dhtmlxCalendarObject('calendar');
}
</script>

?

1.4 效果预览

?

2. 皮肤设置

2.1 引入样式文件

在上面的基础上，引入 codebase 文件夹下所有的样式文件。

<link rel="stylesheet" type="text/css" href="codebase/dhtmlxcalendar.css" />
<link rel="stylesheet" type="text/css" href="codebase/skins/dhtmlxcalendar_classic.css" />
<link rel="stylesheet" type="text/css" href="codebase/skins/dhtmlxcalendar_dhx_black.css" />
<link rel="stylesheet" type="text/css" href="codebase/skins/dhtmlxcalendar_dhx_blue.css" />
<link rel="stylesheet" type="text/css" href="codebase/skins/dhtmlxcalendar_dhx_skyblue.css" />
<link rel="stylesheet" type="text/css" href="codebase/skins/dhtmlxcalendar_simpleblue.css" />
<link rel="stylesheet" type="text/css" href="codebase/skins/dhtmlxcalendar_simplecolordark.css" />
<link rel="stylesheet" type="text/css" href="codebase/skins/dhtmlxcalendar_simplecolorsand.css" />
<link rel="stylesheet" type="text/css" href="codebase/skins/dhtmlxcalendar_simplegrey.css" />
<link rel="stylesheet" type="text/css" href="codebase/skins/dhtmlxcalendar_vista.css" />
<link rel="stylesheet" type="text/css" href="codebase/skins/dhtmlxcalendar_yahoolike.css" />

?

2.2 定义下拉列表框

<select name="cssName" id="skinSelect" onChange="cal1.setSkin(this.value);">
    <option value="" selected >= default =</option>
    <option value="yahoolike">Yahoo like</option>
    <option value="simplegrey">Simple gray</option>
    <option value="simpleblue">Simple blue</option>
    <option value="vista">Windows Vista</option>            
    <option value="simplecolordark">Simple color dark</option>
    <option value="simplecolorsand">Simple color sand</option>
    <option value="classic">Classic</option>                                
    <option value="dhx_blue">Dhx Blue</option>
    <option value="dhx_black">Dhx Black</option>
<option value="dhx_skyblue">Dhx Skyblue</option>
</select>

?

2.3 效果预览

说明：运行后，选择下拉列表框即可改变日历的皮肤。事实上，这里调用了 setSkin 函数，并指定参数即可。

?

3. 基本设置

<script type="text/javascript">
window.dhx_globalImgPath = "codebase/imgs/";
window.onload = function() {
var cal1 = new dhtmlxCalendarObject('calendar', true, {isYearEditable: true, isWinHeader: true, isWinDrag: true});
cal1.setYearsRange(1900, 2010);
cal1.loadUserLanguage("en-us");
}
</script>

年度设置：