概述

dorado中的日历组件经常用在日程管理的软件里面。本示例的链接如下：

http://61.151.239.187/dorado5/skills/controls/calendar.jsp

准备工作

新建一工程calendar，并且配置好数据库，具体步骤参考3.1.2节。

开发步骤

添加Dataset

步骤1：添加一Common ViewModel，文件名Calendar。
步骤2：添加一AutoSqlDataset，选择schedule表，选择所有字段，AutoSqlDataset属性设置如下：

属性	值
id	datasetSchedule
originTable	SCHEDULE
keyFields	ID

为datasetScedule添加两个BaseMatchRule，属性分别设置如下：

属性	值
level	1
dataType	datetime
value	:start_time
escapeEnabled	false
table	SCHEDULE
originField	start_time
operator	>

属性	值
level	1
dataType	datetime
value	:end_time
escapeEnabled	false
table	SCHEDULE
operator	<
originField	start_time

步骤3：为datasetScedule的"START_TIME"、"END_TIME"和"TASK"添加Required Validator。
步骤4：为datasetScedule的afterInsert事件添加如下代码：

var calendarDate = calendarSchedule.getDate(); 
if (calendarDate != null) { 
	 var day = formatDate(calendarDate, "yyyy-MM-dd"); 
	 dataset.setValue("start_time", parseDate(day + " 08:00:00")); 
	 dataset.setValue("end_time", parseDate(day + " 08:00:00")); 
}

为datasetScedule的onFilterRecord事件添加如下代码：

var date = record.getValue("start_time"); 
var calendarDate = calendarSchedule.getDate(); 
if (date != null && calendarDate != null) { 
	return (date.getFullYear() == calendarDate.getFullYear() && 
	date.getMonth() == calendarDate.getMonth() && 
	date.getDate() == calendarDate.getDate()); 
} 
else { 
	return true; 
}
return true;

步骤5：设置datasetScedule的id字段的updatable为false。

添加SubWindow和ListDropDown

步骤1：添加一SubWindow，属性设置如下：

属性	值
id	subwindowTask
status	hidden

步骤2：为subwindow的afterHide事件添加如下代码：

if (datasetSchedule.getCurrent() != null) { 
	datasetSchedule.cancelRecord(); 
}

步骤3：添加一ListDropDown，id设置为dropdownTask，添加三个DropDownItem，value分别设置为："开会"、"外出"、"约会"。
并且设置datasetSchedule的TASK字段的dropDown为dropdownTask。

添加DataTable和Button

步骤1：添加一DataTable，属性设置如下：

属性	值
id	tableSchedule
dataset	datasetSchedule
height	100%
width	200
showHScrollBar	false
showIndicator	false
rowHeight	50

步骤2：为tableSchedule其添加一字段，属性设置如下：

属性	值
name	description
label	任务描述

步骤3：为tableSchedule的onRecordDblClick方法写入如下代码：

 buttonEdit.click();

步骤4：为tableSchedule的description字段的onRefresh事件添加如下代码：

var HTML = record.getString("task") + "<br>" + 
formatDate(record.getValue("start_time"), "HH:mm") + " 至 " + 
formatDate(record.getValue("end_time"), "HH:mm"); 
cell.innerHTML = HTML; 
cell.title = record.getValue("cmnt"); 
return false;

步骤5：添加一Button，属性设置如下：

属性	值
id	buttonAdd
value	添加

为buttonAdd的onClick事件添加如下代码：

datasetSchedule.insertRecord(); 
subwindowTask.show(true, true);

步骤6：添加一Button，属性设置如下：

属性	值
id	buttonEdit
value	编辑

为buttonEdit的onClick事件添加如下代码：

subwindowTask.show(true, true);

步骤7：添加一Button，属性设置如下：

属性	值
id	buttonDelete
value	删除

为buttonDelete的onClick事件添加如下代码：

if (datasetSchedule.getCurrent() != null) { 
	datasetSchedule.deleteRecord(); 
	commandSave.execute(); 
}

添加Calendar

步骤1：添加一Calendar，属性设置如下：

属性	值
id	calendarSchedule
width	100%
height	100%
calendarType	schedule
dataset	datasetSchedule
field	start_time
date	2006-4-3

步骤2：为calendarSchedule的afterDateChange事件写入如下代码：

calendar.disableBinding(); 
datasetSchedule.refreshControls(); 
calendar.enableBinding(); 
 
buttonEdit.disabled = (datasetSchedule.getCurrent() == null); 
buttonDelete.disabled = buttonEdit.disabled;

步骤3：为calendarSchedule的beforeMonthChange事件写入如下代码：

var year = date.getFullYear(); 
var month = date.getMonth(); 
var startTime = new Date(year, month, 1); 
var endTime = new Date(year, month + 1, 1); 
var parameters = datasetSchedule.parameters(); 
parameters.setValue("start_time", startTime); 
parameters.setValue("end_time", endTime); 
datasetSchedule.flushData();

步骤4：为calendarSchedule的onContentRefresh事件写入如下代码：

var records = calendar.getRecords(date); 
if (records.length > 0) { 
	cell.innerHTML = records.length + "项任务"; 
	var tip = ""; 
	for (var i = 0; i < records.length; i++) { 
		var record = records[i]; 
		if (i > 0) tip += "\n"; 
			tip += (i + 1) + ". " + record.getString("task"); 
			cell.title = tip; 
		} 
	} 
else { 
	cell.innerText = ""; 
	cell.title = ""; 
} 
cell.style.color = "navy";

添加AutoForm、UpdateCommand和Button

步骤1：添加一AutoForm，属性设置如下：

属性	值
id	formTask
dataset	datasetSchedule

选中formTask，点击字段生成按钮。
步骤2：添加一UpdateCommand，id设置为commandSave。
为commandSave添加一DatasetInfo，Dataset设置为datasetSchedule。
步骤3：添加一Button，属性设置如下：

属性	值
id	buttonOK
value	确定

为buttonOK的onClick事件添加如下代码：

if (datasetSchedule.postRecord()) { 
	 commandSave.execute(); 
	 subwindowTask.hide(); 
}

步骤4：添加一Button，属性设置如下：

属性	值
id	buttonCancel
value	取消

为buttonCancel的onClick事件写入如下代码：

datasetSchedule.cancelRecord(); 
subwindowTask.hide();

生成Jsp页面

生成Jsp页面以后再编辑一下布局，最后结果如下：

<%@ page contentType="text/html; charset=UTF-8" %> 
<%@ taglib uri="http://www.bstek.com/dorado" prefix="d" %> 
 <html> 
 <head> 
 </head> 
 <body style="margin: 2; overflow: hidden"> 
 <d:View config="Calendar"> 
 <d:Layout type="border"> 
 <d:Pane position="center"> 
 <d:Calendar id="calendarSchedule" /> 
 </d:Pane> 
 <d:Pane position="right" width="200"> 
 <d:Layout type="vflow" height="100%"> 
 <d:Pane align="right"> 
 <d:Layout type="Hflow" padding="1"> 
 <d:Pane> 
 <d:Button id="buttonAdd" /> 
 </d:Pane> 
 <d:Pane> 
 <d:Button id="buttonEdit" /> 
 </d:Pane> 
 <d:Pane> 
 <d:Button id="buttonDelete" /> 
 </d:Pane> 
 </d:Layout> 
 </d:Pane> 
 <d:Pane height="100%"> 
 <d:DataTable id="tableSchedule" /> 
 </d:Pane> 
 </d:Layout> 
 </d:Pane> 
 </d:Layout> 

 <d:SubWindow id="subwindowTask" title="任务属性" width="350" 
height="260" draggable="true" resizable="true" 
showMinimizeButton="false" showMaximizeButton="false" 
showCloseButton="true"> 
 <d:Layout type="border"> 
 <d:Pane position="top"> 
 <d:AutoForm id="formTask" /> 
 </d:Pane> 
 <d:Pane position="center" align="right"> 
 <d:Layout type="Hflow"> 
 <d:Pane> 
 <d:Button id="buttonOK" /> 
 </d:Pane> 
 <d:Pane> 
 <d:Button id="buttonCancel" /> 
 </d:Pane> 
 </d:Layout> 
 </d:Pane> 
 </d:Layout> 
 </d:SubWindow> 
 </d:View> 
 </body> 
 </html>

浏览Jsp页面

启动服务器后，浏览效果如下：

本示例实现了一个简单的日程管理。

知识点

本示例知识点为组件Calendar的使用。关于Calendar，可以参考《dorado 5组件详解 1.1》第二部分的E部分。

Dorado 5 : 8.3.日历 (T22)

概述