dhtmlx-calendar

来源：互联网发布：阿里云域名优惠 2017 编辑：程序博客网时间：2024/05/22 11:43

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

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

0 0