dhtmlx-calendar

时间：2015-07-30 23:24:36 阅读：314 评论：0 收藏：0 [点我收藏+]

标签：

项目中使用到了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');

小结：这些就是目前跟着官方的文档说明的学习，没有什么很难的东西。对于它的易用性有很深的体会。同时真心觉得官方的英文文档比中文翻译过来的东西要易懂一些。

dhtmlx-calendar

标签：

原文地址：http://blog.csdn.net/zhuojiajin/article/details/47157211

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行