项目中使用到了dhtmlxTree这个控件，所以在下班后了解了一下dhtmlx这个JavaScript 库。目前只是粗浅的看看，和写一些简单的Demo。先会用吧，下面就其中的一些组件做点总结。本篇博客就从calendar开始。
dhtmlx简介
dhtmlx是一套网页开发的JavaScript库，他提供了树、DataGrid、工具条等组件供开发人员使用；避免重复开发组件，缩短开发时间，目的在让开发者充分了解组件的每项功能，同时也让开发者能够迅速并容易地操作这些组件。提供开发者一套相同的开发模式，对于组件的使用有相同或类似的方式。总的来说，就是复用和易于使用。
引入资源
下载dhtmlxSuite_v403_pro.zip，解压后将所有的文件和文件夹复制到WebContent下。这么做是因为解压文件中有比较全的js文件和icon等资源，可以直接使用。当然，也可以只是选择其中的某些组件加入到项目中。dhtmlx的官方网站上提供单一组件的下载。
jsp页面
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
//引入的资源
<script type="text/javascript" src="codebase/dhtmlx.js"></script>
<link href="codebase/dhtmlx.css" rel="stylesheet" type="text/css"/>
<style>
#calendar{
border: 1px solid #909090;
font-family: Tahoma;
font-size: 12px;
}
</style>
<title>Insert title here</title>
</head>
<body onload="doOnLoad()" >
<div style="position:relative;height:280px;">
<input id="calendar" type="text">
</body>
<script>
var myCalendar;
var myDivCalendar;
function doOnLoad() {
myCalendar = new dhtmlXCalendarObject("calendar");
}
</script>
</html>
这是最简单的一个demo，calendar与input结合。只要引入dhtmlx.js文件和dhtmlx.css样式就好。先能看到一个实在的例子，就能体会dhtmlx的易用性。
calendar与div
calendar与div的结合和input的差别不大，就是日历的显示和隐藏需要通过js代码来控制了。如下：
<body onload="doOnLoad()" >
<div style="position:relative;height:280px;">
<input id="calendar" type="text">
</div>
<div id="divCalendar" style="position:relative;height:280px;">
</div>
</body>
<script>
var myCalendar;
var myDivCalendar;
function doOnLoad() {
myCalendar = new dhtmlXCalendarObject("calendar");
myDivCalendar = new dhtmlXCalendarObject("divCalendar");
myDivCalendar.show();
}
</script>
更换皮肤和语言
皮肤
更换皮肤还需要引入另一个js文件，一下是web风格的皮肤，其他皮肤还有其他的css：
<link href="skins/web/dhtmlx.css" rel="stylesheet" type="text/css"/>
然后js代码中加入：
myCalendar.setSkin("dhx_web");
语言
calendar支持自定义语言，使用也很简单。只要在js代码中加入如下部分即可：
dhtmlXCalendarObject.prototype.langData["chinese"] = {
dateformat: "%d.%m.%Y",
monthesFNames: [
"一月", "二月", "三月", "四月", "五月", "六月", "七月",
"八月", "九月", "十月", "十一月", "十二月"
],
monthesSNames: [
"一月", "二月", "三月", "四月", "五月", "六月", "七月",
"八月", "九月", "十月", "十一月", "十二月"
],
daysFNames: [
"周一", "周二", "周三", "周四", "周五", "周六", "周日"
],
daysSNames: ["一", "二", "三", "四", "五", "六", "日"],
weekstart: 7,
weekname: "周"
};
然后将要该语言的calendar做一下设置：
myCalendar.loadUserLanguage('chinese');
小结：这些就是目前跟着官方的文档说明的学习，没有什么很难的东西。对于它的易用性有很深的体会。同时真心觉得官方的英文文档比中文翻译过来的东西要易懂一些。
版权声明：本文为博主原创文章，未经博主允许不得转载。