[Extjs]带提醒功能的日历
来源:互联网 发布:大数据的缺点 编辑:程序博客网 时间:2024/05/21 20:29
/**//**
* @author zfzheng
* 带提醒功能的日历
*/
Ext.namespace("My");
My.Calendar = Ext.extend(Ext.DatePicker, ...{
todayText : "今天",
minText : "最小日期之前",
maxText : "最大日期之后",
disabledDaysText : "",
disabledDatesText : "",
monthNames : Date.monthNames,
dayNames : Date.dayNames,
nextText : '下月 (Control+Right)',
prevText : '上月 (Control+Left)',
monthYearText : '选择月 (Control+Up/Down)',
todayTip : "{0} (空格键)",
format : "y年m月d日",
okText : "确定",
cancelText : "取消",
constrainToViewport:false,
initComponent : function()...{
My.Calendar.superclass.initComponent.call(this);
this.addEvents(
/**//**
* @event markupselected
* Fires when the markup cell is selected
* @param {Calendar} this
* @param {Cfg} the current markup setting which user seeted
*/
'markupselected',
/**//**
* @event beforechange
* Fires before the select date is changed
* @param {Calendar} this
* @param {date} the new date
* @param {date} the old date
*/
'beforechange'
);
},
// private
update:function(date)...{
if(!date)...{
date=new Date();
}
var oldDate=(this.activeDate || this.value);
if(date.getTime()!=oldDate.getTime())...{
this.fireEvent("beforechange", this, date, oldDate);
}
My.Calendar.superclass.update.call(this,date);
if(this.markups)...{
this.onMarkup();
var cfg=this.getMarkupDateConfig(date);
if(cfg)...{
this.fireEvent("markupselected", this, cfg);
}
}
},
markupTPL:new Ext.Template(
'<span style="color:blue" title="{tip}">{day}</span>'
),
/**//**
* @param {markups} the array of object{date,tip}
* @param {handler} the function on the markup cell clicked, the callback param is (cell_date)
*/
setMarkup:function(markups,handler)...{
this.markups=markups;
this.markupHandler=handler;
this.onMarkup();
},
onMarkup:function()...{
var textNodes=this.textNodes;
for(var i=0;i<this.markups.length;i++)...{
var m=this.markups[i];
var span=this.getDateCellSpan(m.date);
if(span)...{
var day=span.innerHTML;
span.innerHTML='';
this.markupTPL.append(Ext.get(span),...{tip:m.tip,day:day});
}
}
},
/**//**
* @param date String:'yyyy-mm-dd' or Date object
*/
// private
getDateCellSpan:function(date)...{
var d;
if(typeof date =='string')...{
d=this.getMyDateFormat(date).getTime();
}else...{
d=date.getTime();
}
for(var i=0;i<this.textNodes.length;i++)...{
var cd=this.getCellDateTime(this.textNodes[i]);
if(cd==d)...{
return this.textNodes[i];
}
}
return null;
},
// private
getCellDateTime:function(span)...{
var dd=(this.activeDate || this.value).clearTime(true);
var tdEL=Ext.get(span).parent("td");
if(tdEL.hasClass('x-date-prevday'))...{
dd=dd.add("mo", -1);
}else if(tdEL.hasClass('x-date-active'))...{
}else if(tdEL.hasClass('x-date-nextday'))...{
dd=dd.add("mo", 1);
}
dd.setDate(span.innerHTML);
return dd.getTime();
},
/**//**
* @param date String:'yyyy-mm-dd'
* @return Date
*/
// private
getMyDateFormat:function(date)...{
return Date.parseDate(date, "Y-m-d")
},
/**//**
* 返回date时间的用户markup设置信息
*/
getMarkupDateConfig:function(date)...{
var dd=(date||(this.activeDate || this.value)).getTime();
for(var i=0;i<this.markups.length;i++)...{
var m=this.markups[i];
var mdt=this.getMyDateFormat(m.date).getTime();
if(mdt==dd)...{
return m;
}
}
return null;
}
});
* @author zfzheng
* 带提醒功能的日历
*/
Ext.namespace("My");
My.Calendar = Ext.extend(Ext.DatePicker, ...{
todayText : "今天",
minText : "最小日期之前",
maxText : "最大日期之后",
disabledDaysText : "",
disabledDatesText : "",
monthNames : Date.monthNames,
dayNames : Date.dayNames,
nextText : '下月 (Control+Right)',
prevText : '上月 (Control+Left)',
monthYearText : '选择月 (Control+Up/Down)',
todayTip : "{0} (空格键)",
format : "y年m月d日",
okText : "确定",
cancelText : "取消",
constrainToViewport:false,
initComponent : function()...{
My.Calendar.superclass.initComponent.call(this);
this.addEvents(
/**//**
* @event markupselected
* Fires when the markup cell is selected
* @param {Calendar} this
* @param {Cfg} the current markup setting which user seeted
*/
'markupselected',
/**//**
* @event beforechange
* Fires before the select date is changed
* @param {Calendar} this
* @param {date} the new date
* @param {date} the old date
*/
'beforechange'
);
},
// private
update:function(date)...{
if(!date)...{
date=new Date();
}
var oldDate=(this.activeDate || this.value);
if(date.getTime()!=oldDate.getTime())...{
this.fireEvent("beforechange", this, date, oldDate);
}
My.Calendar.superclass.update.call(this,date);
if(this.markups)...{
this.onMarkup();
var cfg=this.getMarkupDateConfig(date);
if(cfg)...{
this.fireEvent("markupselected", this, cfg);
}
}
},
markupTPL:new Ext.Template(
'<span style="color:blue" title="{tip}">{day}</span>'
),
/**//**
* @param {markups} the array of object{date,tip}
* @param {handler} the function on the markup cell clicked, the callback param is (cell_date)
*/
setMarkup:function(markups,handler)...{
this.markups=markups;
this.markupHandler=handler;
this.onMarkup();
},
onMarkup:function()...{
var textNodes=this.textNodes;
for(var i=0;i<this.markups.length;i++)...{
var m=this.markups[i];
var span=this.getDateCellSpan(m.date);
if(span)...{
var day=span.innerHTML;
span.innerHTML='';
this.markupTPL.append(Ext.get(span),...{tip:m.tip,day:day});
}
}
},
/**//**
* @param date String:'yyyy-mm-dd' or Date object
*/
// private
getDateCellSpan:function(date)...{
var d;
if(typeof date =='string')...{
d=this.getMyDateFormat(date).getTime();
}else...{
d=date.getTime();
}
for(var i=0;i<this.textNodes.length;i++)...{
var cd=this.getCellDateTime(this.textNodes[i]);
if(cd==d)...{
return this.textNodes[i];
}
}
return null;
},
// private
getCellDateTime:function(span)...{
var dd=(this.activeDate || this.value).clearTime(true);
var tdEL=Ext.get(span).parent("td");
if(tdEL.hasClass('x-date-prevday'))...{
dd=dd.add("mo", -1);
}else if(tdEL.hasClass('x-date-active'))...{
}else if(tdEL.hasClass('x-date-nextday'))...{
dd=dd.add("mo", 1);
}
dd.setDate(span.innerHTML);
return dd.getTime();
},
/**//**
* @param date String:'yyyy-mm-dd'
* @return Date
*/
// private
getMyDateFormat:function(date)...{
return Date.parseDate(date, "Y-m-d")
},
/**//**
* 返回date时间的用户markup设置信息
*/
getMarkupDateConfig:function(date)...{
var dd=(date||(this.activeDate || this.value)).getTime();
for(var i=0;i<this.markups.length;i++)...{
var m=this.markups[i];
var mdt=this.getMyDateFormat(m.date).getTime();
if(mdt==dd)...{
return m;
}
}
return null;
}
});
---------------------- 测试---------------------------------
var dm=new My.Calendar();
dm.setMarkup([{date:'2008-1-20',tip:'aaaaaaa'},{date:'2008-1-25',tip:'333333333333'}]);
dm.on("markupselected",function(calendar,cfg){
//showMsg(cfg.date+":"+cfg.tip);
});
更新提示信息
dm.on("beforechange",function(calendar,newDate,oldDate){
//request tip by newDate
});
- [Extjs]带提醒功能的日历
- 打开Android系统自带日历的新建提醒界面
- 关于多用户日历提醒功能的数据库设计
- 关于多用户日历提醒功能的数据库设计
- 带记事功能的日历插件fullCalendar
- oc的日历提醒机制
- 带提醒功能的重启脚本快捷键
- 基于Bmob云平台的android写日记带提醒功能
- 日历,带时钟的日历
- Android中带签到功能的日历(积分)
- 带登录注册功能的material design 云端日历备忘
- CSDN的提醒功能
- 带农历的日历
- 带农历的日历
- 带农历的日历
- 带农历的日历
- 仿google的日历日程提醒
- google日历的农历循环提醒
- Home, sweet home.
- 使用post与使用get区别
- [VC 开发工具] VC2005 Express Edtion with MSDN
- 合理利用DW完成PB的多表更新
- 转载:什么叫芯片测试
- [Extjs]带提醒功能的日历
- jj
- test
- zz常用论坛
- 写Java程序最容易犯的21种错误
- Ping的原代码
- Configuring SSH Secure Shell for TCP Wrappers Support
- Visual C++设计超强仿QQ自动伸缩窗口
- linux远程访问权限控制(hosts.allow和hosts.deny)