grails calendar插件

Grails日历插件
  功能
I18N
提供多种样式，客户可自定义样式
支持选择时间和日期
支持客户自定义时间制：12小时制或24小时制
支持日期格式化
自动绑定当前时间
客户样式选择.
自定义年份范围
没有使用第三方JS库
拖动面板

安装说明
1.grails install-plugin calendar
使用说明必须先导入日历插件资源

导入资源提供2种导入方式:

在每一个使用的页面导入
在 main layout里面.
使用 <calendar:resources/> .

Resources 标签
1.<calendar:resources lang="en" theme="tiger"/>
Resources 属性
theme (optional): 样式选择. 默认: tiger
lang (optional): 语言. default: english
sytle (optional): 客户自定义样式文件地址.

日期选择标签<calendar:datePicker name="date" defaultValue="${new Date()}"/>
日期选择标签属性
name: 名字，form中的名字
dateFormat (optional): 日期格式. default: %m/%d/%Y
weekNumbers (optional): 如果为ture ,在左边显示第几周. default: true
showTime (optional): 如果为true,允许选择时间. default: false
timeFormat (optional): 配置时间制 12 /24 h. default: 24h
value (optional): 组件值. default:null
defaultValue (optinal): 默认显示值. default:null
years (optional): 显示的 年份范围，格式为："first,last".default: 1900,2999
singleClick (optional).如果为  false，双击才能关闭日期控件 . default: true
日期格式 Pattern Value
%d the day of the month ( 00 .. 31 )
%e the day of the month ( 0 .. 31 )
%H hour ( 00 .. 23 )
%I hour ( 01 .. 12 )
%j day of the year ( 000 .. 366 )
%m month ( 01 .. 12 )
%M minute ( 00 .. 59 )
%S second ( 00 .. 59 )
%p PM or AM
%P pm or am
%y year without the century ( 00 .. 99 )
%Y year including the century ( ex. 1979 )

  样式： Theme Name Example
aqua 
blue 
blue2 
brown 
green 
system 
tas 
tiger 
win2k-1 
win2k-2 
win2k-cold-1 
win2k-cold-2 

  自定义样式
<calendar:resources style="${createLinkTo(dir:'css',file:'custom-calendar.css')}"/>

语言 默认提供3种语言支持 Language File
English APPLICATION_DIR/web-app/calendar-x.x.x/js/lang/calendar-en.js
Spanish APPLICATION_DIR/web-app/calendar-x.x.x/js/lang/calendar-es.js
Brazilian Portuguese APPLICATION_DIR/web-app/calendar-x.x.x/js/lang/calendar-br.js

客户自定义语言

<calendar:resources lang="zh">

添加中文支持：
找到这个包：/web-app/plugins/calendar-1.1.1/js/lang
添加个：calendar-zh.js文件
文件内容如下：
1.
 
2.// ** I18N
 
3.// Calendar EN language
 
4.// Author: Mihai Bazon, <[email protected]>
 
5.// Encoding: any
 
6.// Distributed under the same terms as the calendar itself.
 
7.// For translators: please use UTF-8 if possible.  We strongly believe that
 
8.// Unicode is the answer to a real internationalized world.  Also please
 
9.// include your contact information in the header, as can be seen above.
 
10.// full day names
 
11.Calendar._DN = new Array
 
12.("星期日",
 
13."星期一",
 
14."星期二",
 
15."星期三",
 
16."星期四",
 
17."星期五",
 
18."星期六",
 
19."星期日");
 
20.// Please note that the following array of short day names (and the same goes
 
21.// for short month names, _SMN) isn't absolutely necessary.  We give it here
 
22.// for exemplification on how one can customize the short day names, but if
 
23.// they are simply the first N letters of the full name you can simply say:
 
24.//
 
25.//   Calendar._SDN_len = N; // short day name length
 
26.//   Calendar._SMN_len = N; // short month name length
 
27.//
 
28.// If N = 3 then this is not needed either since we assume a value of 3 if not
 
29.// present, to be compatible with translation files that were written before
 
30.// this feature.
 
31.// short day names
 
32.Calendar._SDN = new Array
 
33.("日",
 
34."一",
 
35."二",
 
36."三",
 
37."四",
 
38."五",
 
39."六",
 
40."日");
 
41.// First day of the week. "0" means display Sunday first, "1" means display
 
42.// Monday first, etc.
 
43.Calendar._FD = 0;
 
44.// full month names
 
45.Calendar._MN = new Array
 
46.("一月",
 
47."二月",
 
48."三月",
 
49."四月",
 
50."五月",
 
51."六月",
 
52."七月",
 
53."八月",
 
54."九月",
 
55."十月",
 
56."十一月",
 
57."十二月");
 
58.// short month names
 
59.Calendar._SMN = new Array
 
60.("一月",
 
61."二月",
 
62."三月",
 
63."四月",
 
64."五月",
 
65."六月",
 
66."七月",
 
67."八月",
 
68."九月",
 
69."十月",
 
70."十一月",
 
71."十二月");
 
72.// tooltips
 
73.Calendar._TT = {};
 
74.Calendar._TT["INFO"] = "Microthink.cn";
 
75.Calendar._TT["ABOUT"] =
 
76."DHTML Date/Time Selector/n" +
 
77."(c) dynarch.com 2002-2005 / Author: Mihai Bazon/n" + // don't translate this this ;-)
 
78."For latest version visit: http://www.dynarch.com/projects/calendar//n" +
 
79."Distributed under GNU LGPL.  See http://gnu.org/licenses/lgpl.html for details." +
 
80."/n/n" +
 
81."Date selection:/n" +
 
82."- Use the /xab, /xbb buttons to select year/n" +
 
83."- Use the " + String.fromCharCode(0x2039) + ", " + String.fromCharCode(0x203a) + " buttons to select month/n" +
 
84."- Hold mouse button on any of the above buttons for faster selection.";
 
85.Calendar._TT["ABOUT_TIME"] = "/n/n" +
 
86."Time selection:/n" +
 
87."- Click on any of the time parts to increase it/n" +
 
88."- or Shift-click to decrease it/n" +
 
89."- or click and drag for faster selection.";
 
90.Calendar._TT["REV_YEAR"] = "上一年";
 
91.Calendar._TT["REV_MONTH"] = "上一月";
 
92.Calendar._TT["GO_TODAY"] = "返回今天";
 
93.Calendar._TT["NEXT_MONTH"] = "下一月";
 
94.Calendar._TT["NEXT_YEAR"] = "下一年";
 
95.Calendar._TT["SEL_DATE"] = "选择时间";
 
96.Calendar._TT["DRAG_TO_MOVE"] = "拖动";
 
97.Calendar._TT["ART_TODAY"] = " (今天)";
 
98.// the following is to inform that "%s" is to be the first day of week
 
99.// %s will be replaced with the day name.
 
100.Calendar._TT["DAY_FIRST"] = "%s ";
 
101.// This may be locale-dependent.  It specifies the week-end days, as an array
 
102.// of comma-separated numbers.  The numbers are from 0 to 6: 0 means Sunday, 1
 
103.// means Monday, etc.
 
104.Calendar._TT["WEEKEND"] = "0,6";
 
105.Calendar._TT["CLOSE"] = "关闭";
 
106.Calendar._TT["TODAY"] = "今天";
 
107.Calendar._TT["TIME_PART"] = "按住(Shift)键左右拖到时间值就增加或减小时间值";
 
108.// date formats
 
109.Calendar._TT["DEF_DATE_FORMAT"] = "%Y-%m-%d";
 
110.Calendar._TT["TT_DATE_FORMAT"] = "%a, %b %e";
 
111.Calendar._TT["WK"] = "周";
 
112.Calendar._TT["TIME"] = "时间:";
新建下面的样式文件到/web-app/css/中，名称为：calendar.css
1./* The main calendar widget. DIV containing a table. */
 
2.
 
3.div.calendar { position: relative;width: 220px; }
 
4.
 
5..calendar, .calendar table {
 
6.border: 1px solid #565;
 
7.font-size: 12px;
 
8.color: #000;
 
9.cursor: default;
 
10.background: #efe;
 
11.font-family: tahoma,verdana,sans-serif;
 
12.}
 
13.
 
14./* Header part -- contains navigation buttons and day names. */
 
15.
 
16..calendar .button { /* "<<", "<", ">", ">>" buttons have this class */
 
17.text-align: center; /* They are the navigation buttons */
 
18.padding: 2px; /* Make the buttons seem like they're pressing */
 
19.background: #676;
 
20.color: #fff;
 
21.font-size: 90%;
 
22.}
 
23.
 
24..calendar .nav {
 
25.background: #676 url(menuarrow.gif) no-repeat 100% 100%;
 
26.}
 
27.
 
28..calendar thead .title { /* This holds the current "month, year" */
 
29.font-weight: bold; /* Pressing it will take you to the current date */
 
30.text-align: center;
 
31.padding: 2px;
 
32.background: #250;
 
33.color: #efa;
 
34.}
 
35.
 
36..calendar thead .headrow { /* Row <TR> containing navigation buttons */
 
37.}
 
38.
 
39..calendar thead .name { /* Cells <TD> containing the day names */
 
40.border-bottom: 1px solid #565;
 
41.padding: 2px;
 
42.text-align: center;
 
43.color: #000;
 
44.}
 
45.
 
46..calendar thead .weekend { /* How a weekend day name shows in header */
 
47.color: #a66;
 
48.}
 
49.
 
50..calendar thead .hilite { /* How do the buttons in header appear when hover */
 
51.background-color: #afa;
 
52.color: #000;
 
53.border: 1px solid #084;
 
54.padding: 1px;
 
55.}
 
56.
 
57..calendar thead .active { /* Active (pressed) buttons in header */
 
58.background-color: #7c7;
 
59.padding: 2px 0px 0px 2px;
 
60.}
 
61.
 
62..calendar thead .daynames { /* Row <TR> containing the day names */
 
63.background: #dfb;
 
64.}
 
65.
 
66./* The body part -- contains all the days in month. */
 
67.
 
68..calendar tbody .day { /* Cells <TD> containing month days dates */
 
69.width: 2em;
 
70.color: #564;
 
71.text-align: right;
 
72.padding: 2px 4px 2px 2px;
 
73.}
 
74..calendar tbody .day.othermonth {
 
75.font-size: 80%;
 
76.color: #bbb;
 
77.}
 
78..calendar tbody .day.othermonth.oweekend {
 
79.color: #fbb;
 
80.}
 
81.
 
82..calendar table .wn {
 
83.padding: 2px 3px 2px 2px;
 
84.border-right: 1px solid #8a8;
 
85.background: #dfb;
 
86.}
 
87.
 
88..calendar tbody .rowhilite td {
 
89.background: #dfd;
 
90.}
 
91.
 
92..calendar tbody .rowhilite td.wn {
 
93.background: #efe;
 
94.}
 
95.
 
96..calendar tbody td.hilite { /* Hovered cells <TD> */
 
97.background: #efd;
 
98.padding: 1px 3px 1px 1px;
 
99.border: 1px solid #bbb;
 
100.}
 
101.
 
102..calendar tbody td.active { /* Active (pressed) cells <TD> */
 
103.background: #dec;
 
104.padding: 2px 2px 0px 2px;
 
105.}
 
106.
 
107..calendar tbody td.selected { /* Cell showing today date */
 
108.font-weight: bold;
 
109.border: 1px solid #000;
 
110.padding: 1px 3px 1px 1px;
 
111.background: #f8fff8;
 
112.color: #000;
 
113.}
 
114.
 
115..calendar tbody td.weekend { /* Cells showing weekend days */
 
116.color: #a66;
 
117.}
 
118.
 
119..calendar tbody td.today { font-weight: bold; color: #0a0; }
 
120.
 
121..calendar tbody .disabled { color: #999; }
 
122.
 
123..calendar tbody .emptycell { /* Empty cells (the best is to hide them) */
 
124.visibility: hidden;
 
125.}
 
126.
 
127..calendar tbody .emptyrow { /* Empty row (some months need less than 6 rows) */
 
128.display: none;
 
129.}
 
130.
 
131./* The footer part -- status bar and "Close" button */
 
132.
 
133..calendar tfoot .footrow { /* The <TR> in footer (only one right now) */
 
134.text-align: center;
 
135.background: #565;
 
136.color: #fff;
 
137.}
 
138.
 
139..calendar tfoot .ttip { /* Tooltip (status bar) cell <TD> */
 
140.padding: 2px;
 
141.background: #250;
 
142.color: #efa;
 
143.}
 
144.
 
145..calendar tfoot .hilite { /* Hover style for buttons in footer */
 
146.background: #afa;
 
147.border: 1px solid #084;
 
148.color: #000;
 
149.padding: 1px;
 
150.}
 
151.
 
152..calendar tfoot .active { /* Active (pressed) style for buttons in footer */
 
153.background: #7c7;
 
154.padding: 2px 0px 0px 2px;
 
155.}
 
156.
 
157./* Combo boxes (menus that display months/years for direct selection) */
 
158.
 
159..calendar .combo {
 
160.position: absolute;
 
161.display: none;
 
162.top: 0px;
 
163.left: 0px;
 
164.width: 4em;
 
165.cursor: default;
 
166.border: 1px solid #565;
 
167.background: #efd;
 
168.color: #000;
 
169.font-size: 90%;
 
170.z-index: 100;
 
171.}
 
172.
 
173..calendar .combo .label,
 
174..calendar .combo .label-IEfix {
 
175.text-align: center;
 
176.padding: 1px;
 
177.}
 
178.
 
179..calendar .combo .label-IEfix {
 
180.width: 4em;
 
181.}
 
182.
 
183..calendar .combo .hilite {
 
184.background: #af8;
 
185.}
 
186.
 
187..calendar .combo .active {
 
188.border-top: 1px solid #6a4;
 
189.border-bottom: 1px solid #6a4;
 
190.background: #efe;
 
191.font-weight: bold;
 
192.}
 
193.
 
194..calendar td.time {
 
195.border-top: 1px solid #8a8;
 
196.padding: 1px 0px;
 
197.text-align: center;
 
198.background-color: #dfb;
 
199.}
 
200.
 
201..calendar td.time .hour,
 
202..calendar td.time .minute,
 
203..calendar td.time .ampm {
 
204.padding: 0px 3px 0px 4px;
 
205.border: 1px solid #898;
 
206.font-weight: bold;
 
207.background-color: #fff;
 
208.}
 
209.
 
210..calendar td.time .ampm {
 
211.text-align: center;
 
212.}
 
213.
 
214..calendar td.time .colon {
 
215.padding: 0px 2px 0px 3px;
 
216.font-weight: bold;
 
217.}
 
218.
 
219..calendar td.time span.hilite {
 
220.border-color: #000;
 
221.background-color: #686;
 
222.color: #fff;
 
223.}
 
224.
 
225..calendar td.time span.active {
 
226.border-color: #f00;
 
227.background-color: #000;
 
228.color: #0f0;
 
229.}
然后在/grails-app/views/layouts/main.gsp中<calendar:resources lang="zh" style="${createLinkTo(dir:'css',file:'calendar.css')}"/>

调用的地方
<calendar:datePicker name="updateTime"  showTime="true" dateFormat="%Y-%m-%d %H:%M:%S"  value="${developersInstance?.updateTime}" defaultValue="${new Date()}" />
显示效果如下：
 本篇文章来源于：开发学院 http://edu.codepub.com   原文链接：file:///D:/softwear/grails软件/grails%20calendar插件%20中文_Groovy_开发学院.mht