ExtJs定制日历控件——定制部分解析

日历控件中，我们自己需要写的就是每一个日期单元格中的部分，在日历控件部分代码的最后面，有三个for循环，用来控制上个月当前月和下个月日期，其中第二个循环是当前月（日历标题部分选择的月份）控制部分。

代码如下：

         for(; i < startingPos; ) {
var tempId = "fruit"+i;
d.setDate(d.getDate()+1);
var fvalue = d.dateFormat(format);
textEls[i].innerHTML = '<div align="center"><font size ="2" color = "#8B8378" >'+(++prevStart)+'</font>'+'<br></div>';
cells[i].className = 'x-date-prevday';
setCellClass(this, cells[i]);
i = i + 1;
}
for(; i < days; ){
var divId = "div"+i;
var intDay = i - startingPos + 1;
d.setDate(d.getDate()+1);
var fvalue = d.dateFormat(format);
var comboId = "combo"+fvalue+"-"+i; // 设置这个ID是为了让每个单元格中保存当前日期唯一的ID，如果直接使用fvalue的话，获取的会是这个月最后一天对应的值
var config = new Ext.Button({
text: '设置',
id: comboId,
border: false,
handler : function(edt,e) {
var dateStrConfig = edt.id.substring(5,15);
/** 按钮处理事件 */
}
});
/** 单元格中显示内容 */
textEls[i].innerHTML = '<div align="center"><font size ="2">'+(intDay)+'</font>'+'<br><div id="'+divId+'" align="center"></div></div>';
config.render(divId);   // 将我们自己定义的按钮放到单元格中(渲染)
cells[i].className = 'x-date-active';
setCellClass(this, cells[i]);
i = i + 1;
}
var extraDays = 0;
for(; i < 42; ) {
var tempId = "fruit"+i;
d.setDate(d.getDate()+1);
var fvalue = d.dateFormat(format);
textEls[i].innerHTML = '<div align="center"><font size ="2" color = "#8B8378">'+(++extraDays)+'</font>'+'<br></div>';
cells[i].className = 'x-date-nextday';
setCellClass(this, cells[i]);
i = i + 1;
}

ExtJs定制日历控件——定制部分解析相关推荐

ExtJs中定制日历控件——带复选框
效果图: 代码: /*********************日历组件部分**************************** begin */ var dateArray = new Array ...
ExtJs中定制日历控件——带下拉列表
效果图: 日历组件部分代码: /*********************日历组件部分**************************** begin */ var dateArray = new ...
calendar控件使用 extjs_ExtJs定制日历控件——自动加载更新(日历控件显示)
将定制的日历控件放到一个Panel里显示,其结构如下: , { border: true, id: 'page', animCollapse : true, width: 1050, height: ...
Android自定义View精品（CustomCalendar－定制日历控件）
版权声明:本文为openXu原创文章[openXu的博客],未经博主允许不得以任何形式转载目录: 文章目录 1.分析 2.自定义属性 3.onMeasure() 4.onDraw() ①.绘制月份 ...
安卓学习笔记--- Android自定义View（CustomCalendar－定制日历控件）
最近需要做一个日历的控件,感觉使用系统的不能满足自己需求,发现了一个比较不错的自定义日历控件,博主写的很好,转载支持一下. 转载地址: http://blog.csdn.net/xmxkf/artic ...
如何定制日历控件显示的星期文字
关键代码以红色字体标出: public class Test : System.Web.UI.Page<?xml:namespace prefix = o ns = "urn:sche ...
CalendarView使用详细文档（一个很不错的日历控件）
github地址:https://github.com/huanghaibin-dev/CalendarView CalendarView使用详细文档日历控件定制是移动开发平台上比较常见的而且比较难 ...
自定义日历控件，可以根据需求定制属于自己的日历
自定义日历控件,可以根据需求定制属于自己的日历效果图最近笔者的朋友需要写一个关于考勤的日历,效果如下,但在网上找了半天都找不到合适的,于是乎就向笔者求助,笔者本来觉得在晚上随便找个日历demo,然 ...
自定义日历控android,Android 一个日历控件的实现小记
先看几张动态的效果图吧! 这里主要记录一下在编写日历控件过程中一些主要的点: 一.主要功能 1.支持农历.节气.常用节假日 2.日期范围设置,默认支持的最大日期范围[1900.1~2049.12] 3 ...

ExtJs定制日历控件——定制部分解析

ExtJs定制日历控件——定制部分解析相关推荐

最新文章

热门文章