dhtmlxscheduler.js 和dhtmlxscheduler_timeline.js怎么matrix_cell里面的日期啊?

wenwen1 发布于 2013/08/28 14:32
阅读 1K+
收藏 0
代码如下:<%@ page language="java" isELIgnored="false" contentType="text/html; charset=utf-8" pageEncoding="UTF-8"%>
<jsp:directive.include file="/WEB-INF/sitemesh-decorators/include.jsp"/>
<head>
<meta name="decorator" content="ijquery"/>
<script src="${pageContext.request.contextPath}/js/dhtmlx/dhtmlxscheduler.js" type="text/javascript"></script> 
<script src="${pageContext.request.contextPath}/js/dhtmlx/ext/dhtmlxscheduler_dhx_terrace.js" type="text/javascript" charset="utf-8"></script>
<script src="${pageContext.request.contextPath}/js/dhtmlx/ext/dhtmlxscheduler_timeline.js"  type="text/javascript" charset="utf-8"></script>
<script src="${pageContext.request.contextPath}/js/codebase/ext/dhtmlxscheduler_multiselect.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="${pageContext.request.contextPath}/js/dhtmlx/dhtmlxscheduler.css" type="text/css" title="no title" charset="utf-8">
<style type="text/css" media="screen"> 
    html, body{
margin:0px;
padding:0px;
height:100%;
overflow:hidden;
}
.white_cell{
background-color:white;
}
.green_cell{
background-color:#95FF95;
}
.yellow_cell{
background-color:#FFFF79;
}
.red_cell{
background-color:#FF5353;
}
</style>
<script type="text/javascript">
var sss=${idKey};
       var year=${year};
       var month=${month};
       var day=${day};
function init() {


scheduler.locale.labels.matrix_tab = "Matrix"
scheduler.locale.labels.section_custom="Section";
scheduler.config.details_on_create=true;
scheduler.config.details_on_dblclick=true;
scheduler.config.api_date="%Y-%m-%d %H:%i";
       scheduler.config.xml_date="%Y-%m-%d %H:%i";
       scheduler.config.hour_date="%H:%i";
       scheduler.config.default_date="%Y年%m月%d日";
       scheduler.config.month_date="%Y年 %m月";
       scheduler.config.day_date="%D %m月%d日";
scheduler.config.multi_day = true;
brief_mode = true; 
scheduler.locale={
   date:{
       month_full:["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
       month_short:["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
       day_full:["周天", "周一", "周二", "周三", "周四", "周五", "周六"],
       day_short:["周天", "周一", "周二", "周三", "周四", "周五", "周六"]
   },
   labels:{
    dhx_cal_today_button:"今天",
       new_event:"新预约",
       matrix_tab:"实验室预约",
   icon_save:"保存",
   icon_cancel:"取消",
   icon_details:"查看",
   icon_edit:"修改",
   icon_delete:"删除",
   confirm_closing:"确定要关闭?", 
   confirm_deleting:"确定要删除该预约?",
   section_description:"申请理由",
   section_time:"申请日期",
   section_custom:"选择的节次"
   }
};

//===============
//Configuration
//===============
var sections=[
{key:1, label:"第一节"},
{key:2, label:"第二节"},
{key:3, label:"第三节"},
{key:4, label:"第四节"}
];

scheduler.createTimelineView({
name: "matrix",
x_unit: "day",
x_date: "%d %M",
x_step: 1,
x_size: 15,
y_unit: sections,
y_property: "section_id"
});
     //===============
//Data loading
//===============
scheduler.config.lightbox.sections=[
{name:"description", height:130, map_to:"text", type:"textarea" , focus:true},
{name:"custom", height:23, type:"multiselect", options:sections, map_to:"section_id" },
{name:"time", height:72, type:"time",value:"scheduler.templates.calendar_event"}
];
//===============
//Customization
//===============
scheduler.templates.matrix_cell_class = function(evs,x,y){
if (!evs) {
var day = x.getDay();
return (day==0 || day == 6) ? "yellow_cell" : "white_cell";
}
if (evs.length<50) return "green_cell";
if (evs.length<60) return "yellow_cell";
return "red_cell";
};


scheduler.templates.matrix_scalex_class = function(date){
if (date.getDay()==0 || date.getDay()==6)  return "yellow_cell";
return "";
}
scheduler.init('scheduler_here',new Date(year,month,day),"matrix");
scheduler.load("${pageContext.request.contextPath}/getLabReservation?idKey="+sss,"json");
scheduler.showLightbox=function(matrix_cell){
$("#searchEquipment").window('open');
alert(matrix_cell.x.getDay());
}
//scheduler.attachEvent("onYScaleClick", function (index, value){
   //  alert(value.key);
 //});
//scheduler.attachEvent("onXScaleClick", function (index, value){
   //return value.getMonth();
 //});
}
</script>

</head>

<body onload="init();">
   <!--搜索设备-->
<div id="searchEquipment" class="easyui-window" title="添加预约" closed="true" iconCls="icon-add" style="width:710px;height:400px">
<form:form id="form_appointment" modelAttribute="labAppointment">
    <table width="100%">
        <tr>
            <td width="15%">申请理由:</td>
            <td width="25%"><form:textarea id="appointment_reason" path="reason"/></td>
            <td width="15%">选择节次:</td>
            <td width="25%"></td>
        </tr>
         <tr>
            <td width="14%">申请日期:</td>
            <td width="16%"><form:input id="appointment_date" path="applicationDate"/></td>
            <td width="10%"></td>
            <td width="29%"><input type="submit"onclick="searchEquipmentSubmit();"  value="确定" border="0" style="margin-top:1px"></td>
        </tr>
    </table>
</form:form>
</div>
<!--搜索设备-->
<div id="scheduler_here" class="dhx_cal_container" style='width:100%; height:100%;'>
<div class="dhx_cal_navline">
<div class="dhx_cal_prev_button">&nbsp;</div>
<div class="dhx_cal_next_button">&nbsp;</div>
<div class="dhx_cal_today_button"></div>
<div class="dhx_cal_date"></div>

<div class="dhx_cal_tab" name="matrix_tab" style="right:280px;"></div>

</div>
<div class="dhx_cal_header">
</div>
<div class="dhx_cal_data">
</div>
</div>
</body>
我要实现的样式是

点击红色框弹出一个对话框,这个我是如下实现的:

scheduler.showLightbox=function(matrix_cell){
$("#searchEquipment").window('open');
alert(matrix_cell.x.getDay());
}但是就是获取不到该对话框的日期?怎样才能获取该对话框的日期?

加载中
0
xiaoyang0878
xiaoyang0878

matrix_cell 这只是一个id,通过

var ev = scheduler.getEvent(matrix_cell );
alert(ev.start_date+"  ================"+ev.end_date);




返回顶部
顶部