日历控件:带日期标注的日历控件

Control控件名称:Calendar with Date Mark
版本:1.0
类型:HTML Component
运行需求:IE 5(推荐IE5.5或更高版本)、MSXML、ASP或ASP.NET(后台)
费用:免费
支持:不提供支持
源 代 码:XML Scriptlet
------------------------------------------------------------------------
<public:attach event=\"oncontentready\" _disibledevent=><public:property name=\"value\" get=\"getValue\" put=\"Value\"/>
<public:property name=\"Value\" get=\"getStringValue\" />
<public:property name=\"mark\" get=\"getCurrentMark\" put=\"CurrentMark\" />
<public:property name=\"markList\" get=\"getMarkList\" />
<public:method name=\"refresh\" />
<public:method name=\"addMark\" />
<public:method name=\"removeMark\" />
<public:method name=\"removeAllMark\" />
<public:method name=\"loadMark\" />
<public:method name=\"saveMark\" />
<public:event name=\"onvaluechange\" id=\"vlcg\" />
<script language=\"JScript\">

//----------------------------------------------------------------
//HTML Component : Calendar with date mark(带时间标注日历Control控件)
//
//Version: 1.0
//
//Request: Microsoft IE 5 or up
//
//Author: JoJo
//
//Last Realse: 5/9/2001
//
//Copyright: Think Space Soft Tec
//
//Contact: [email protected]
//----------------------------------------------------------------

var date = Date;
var activeDate = Date;

var marklist = ActiveXObject(\"Scripting.Dictionary\");

function WriteXMLToDictionary(xmldoc,dict,rewrite){
var xnodelist = xmldoc.documentElement.selectNodes(\"Mark\");
(rewrite) dict.RemoveAll;
for (var i=0;i<xnodelist.length;i){
var xnode = xnodelist.item(i);
var xdate = xnode.selectSingleNode(\"MarkDate\");
var xnote = xnode.selectSingleNode(\"Note\");
//alert(xdate.text + \",\" + xnote.text);
(xdate.text && xnote.text){
dict.item(xdate.text) = xnote.text;
}
}
}

function postxml(xmldoc,url){
var xmlhttp = ActiveXObject(\"Microsoft.XMLHTTP\");
xmlhttp.Open(\"POST\",url,false);
xmlhttp.Send(xmldoc);
var xdoc = ActiveXObject(\"Microsoft.XMLDom\");
xdoc.async = false;
xdoc.loadXML(xmlhttp.responseText);
!!xdoc.documentElement.text;
}

function saveMark(url){
var xmldoc = ActiveXObject(\"Microsoft.XMLDom\");
WriteDictionaryToXML(marklist,xmldoc);
(postxml(xmldoc,url)){
refresh;
sendEvent;
true;
}
false;
}

function WriteDictionaryToXML(dict,xmldoc){
xmldoc.loadXML(\"<MarkList/>\");
var keys = ( VBArray(dict.Keys)).toArray;
for (var i=0;i<keys.length;i){
try{
var d = Date(keys[i]);
}catch(e){
continue;
}
(!dict.item(keys[i])) continue;
var xmark = xmldoc.createElement(\"Mark\");
var xmarkdate = xmldoc.createElement(\"MarkDate\");
xmarkdate.text = dateToSortString(d);
var xnote = xmldoc.createElement(\"Note\");
xnote.text = dict.item(keys[i]);
xmark.appendChild(xmarkdate);
xmark.appendChild(xnote);
xmldoc.documentElement.appendChild(xmark);
}
}

function loadMark(url,rewrite){
var xmldoc = ActiveXObject(\"Microsoft.FreeThreadedXMLDOM\");
xmldoc.async = false;
xmldoc.load(url);
//alert(xmldoc.xml);
WriteXMLToDictionary(xmldoc,marklist,rewrite);
refresh;
sendEvent;
}

function refresh{
fillCalendar(date);
}

function getCurrentMark{
(!getMark(activeDate)) \"\";
getMark(activeDate);
}

function CurrentMark(markvalue){
addMark(activeDate,markvalue);


}

function getMarkList{
marklist;
}

function dateToSortString(adate){
(adate.getMonth+1) + \"/\" + adate.getDate + \"/\" + adate.getFullYear;
}

function getMark(adate){
(marklist.Exists(dateToSortString(adate)))
marklist.Item(dateToSortString(adate));
}

function addMark(adate,note){
(!note) false;
try{
var d = Date(adate);
marklist.item(dateToSortString(d)) = note;
fillCalendar(date);
true;
}catch(e){
false;
}
}

function removeMark(adate){
try
{
marklist.Remove(dateToSortString(adate));
fillCalendar(date);
}catch(e){
}
}

function removeAllMark{
marklist.RemoveAll;
fillCalendar(date);
}

function sendEvent{
var oevent = createEventObject;
vlcg.fire(oevent);
}

function getStringValue{
activeDate.getFullYear + \"年\" + (activeDate.getMonth + 1) + \"月\" + activeDate.getDate + \"日\";
}

function getValue{
activeDate;
}

function Value(invalue){
try{
var tdate = Date(invalue);
activeDate.FullYear(tdate.getFullYear,tdate.getMonth,tdate.getDate);
date.FullYear(tdate.getFullYear,tdate.getMonth,tdate.getDate);
fillCalendar(date);
sendEvent;
}catch(e){
;
}
}
function fillCalendar(adate){
ynm.innerText = adate.getFullYear + \"年\" + (adate.getMonth + 1) + \"月\";
var tempdate = Date;
tempdate.FullYear(adate.getFullYear,adate.getMonth,1);
var first = true;
for (var i=0;i<tblbd.rows.length;i){
for (var j=0;j<tblbd.rows(i).cells.length;j){
var cell = tblbd.rows(i).cells(j);
cell.innerHTML = \"\";
cell.bgcolor = \"\";
cell.title = \"\";
cell.style.backgroundColor = \"\";

(tempdate.getDay j){
(!first) continue;
cell.innerText = tempdate.getDate;

(getMark(tempdate)){
cell.bgcolor = \"wheat\";
cell.style.backgroundColor = cell.bgcolor;
var tt = getMark(tempdate);
(tt.length<20)
cell.title = tt

cell.title = tt.substr(0,20) + \"...\";
}

(tempdate.getDate activeDate.getDate){
hightLightDate(cell);
}

tempdate.FullYear(tempdate.getFullYear,tempdate.getMonth,tempdate.getDate+1);
first = tempdate.getDate > 1;
}
}
}
}

function hightLightDate(object){
var tds = tblbd.all.tags(\"TD\");
for (var i=0;i<tds.length;i){
(tds(i) != object){
tds(i).style.backgroundColor = tds(i).bgcolor;
tds(i).style.color = \"\"
}{
tds(i).style.backgroundColor = \"navy\";
tds(i).style.color = \"white\";
}
}
}

function selectDate{
var i = parseInt(window.event.srcElement.innerText);
((!isNaN(i)) && (i<3000)){


hightLightDate(window.event.srcElement);
activeDate.FullYear(date.getFullYear,date.getMonth,i);
sendEvent;
}
}

function moveDate{
var k = window.event.keyCode;
switch(k){
37:
activeDate.FullYear(activeDate.getFullYear,activeDate.getMonth,activeDate.getDate-1);
;
38:
activeDate.FullYear(activeDate.getFullYear,activeDate.getMonth,activeDate.getDate-7);
;
39:
activeDate.FullYear(activeDate.getFullYear,activeDate.getMonth,activeDate.getDate+1);
;
40:
activeDate.FullYear(activeDate.getFullYear,activeDate.getMonth,activeDate.getDate+7);
;
}
date.FullYear(activeDate.getFullYear,activeDate.getMonth,activeDate.getDate);
fillCalendar(date);
sendEvent;
}

function ActiveDate{
var i = activeDate.getDate;
activeDate.FullYear(date.getFullYear,date.getMonth,i);
while ((date.getMonth != activeDate.getMonth) || (date.getFullYear != activeDate.getFullYear)){
activeDate.FullYear(date.getFullYear,date.getMonth,i--);
}
sendEvent;
}

function goNextMonth{
date.Month(date.getMonth+1,1);
ActiveDate;
fillCalendar(date);
}

function goNextYear{
date.FullYear(date.getFullYear+1,date.getMonth,1);
ActiveDate;
fillCalendar(date);
}

function goPriorYear{
date.FullYear(date.getFullYear-1,date.getMonth,1);
ActiveDate;
fillCalendar(date);
}

function goPriorMonth{
date.Month(date.getMonth-1,1);
ActiveDate;
fillCalendar(date);
}

//---------------------------------------------------------------------

var tbl = window.document.createElement(\"<TABLE style=\\\"border:solid 1px;width:100%;height:100%;font-size:9pt\\\" cellspacing=0>\");
var tblhd = window.document.createElement(\"THEAD\");
var tblbd = window.document.createElement(\"TBODY\");

var anchorPriorYear = window.document.createElement(\"A\");
anchorPriorYear.style.fontFamily = \"webdings\";
anchorPriorYear.style.cursor = \"hand\";
anchorPriorYear.innerText = \"7\";
anchorPriorYear.title = \"上年\";

var anchorPriorMonth = window.document.createElement(\"A\");
anchorPriorMonth.style.fontFamily = \"webdings\";
anchorPriorMonth.style.cursor = \"hand\";
anchorPriorMonth.innerText = \"3\";
anchorPriorMonth.title = \"上月\";

var anchorNextMonth = window.document.createElement(\"A\");
anchorNextMonth.style.fontFamily = \"webdings\";
anchorNextMonth.style.cursor = \"hand\";
anchorNextMonth.innerText = \"4\";
anchorNextMonth.title = \"下月\";

var anchorNextYear = window.document.createElement(\"A\");
anchorNextYear.style.fontFamily = \"webdings\";
anchorNextYear.style.cursor = \"hand\";
anchorNextYear.innerText = \"8\";
anchorNextYear.title = \"下年\";

var ynm = window.document.createElement(\"FONT\");
ynm.style.width = \"60%\";
ynm.style.fontWeight = \"bold\";

var cpt = window.document.createElement(\"CAPTION\");

tbl.appendChild(cpt);
tbl.appendChild(tblhd);
tbl.appendChild(tblbd);

function inithead{
cpt.style.backgroundColor = \"navy\";
cpt.style.color = \"white\";
cpt.style.textAlign = \"center\";
cpt.style.cursor = \"defalut\";
cpt.appendChild(anchorPriorYear);
cpt.appendChild(anchorPriorMonth);
cpt.appendChild(ynm);
cpt.appendChild(anchorNextMonth);
cpt.appendChild(anchorNextYear);
var row = tblhd.insertRow;
row.align = \"center\";
var weekStr = Array(\"日\",\"\",\" 2\",\" 3\",\" 4\",\" 5\",\" 6\");
for (var i=0;i<weekStr.length;i){
var cell = row.insertCell;
cell.innerText = weekStr[i];
cell.style.borderBottom = \"solid 1px\";
cell.style.cursor = \"default\";
cell.align = \"center\";
}
}

function initbody{
for (var i=0;i<6;i){
var row = tblbd.insertRow;


for (var j=0;j<7;j){
var cell = row.insertCell;
cell.innerHTML = \"\";
cell.style.cursor = \"default\";
cell.align = \"center\";
}
}
}

function init{
inithead;
initbody;
element.appendChild(tbl);
fillCalendar(date);
tblbd.attachEvent(\"onclick\",selectDate);
tblbd.attachEvent(\"onkeydown\",moveDate);
anchorPriorYear.attachEvent(\"onclick\",goPriorYear);
anchorPriorMonth.attachEvent(\"onclick\",goPriorMonth);
anchorNextMonth.attachEvent(\"onclick\",goNextMonth);
anchorNextYear.attachEvent(\"onclick\",goNextYear);
sendEvent;
}
</script>

延伸阅读

• 2011-7-26-- js实现日历控件,T-SQL实现日历控件
• 2011-6-20-- my97日期控件,my97日历控件
• 2010-12-9-- js日历控件,JS实现在Repeater控件中创建可隐藏区域的代码
• 2010-12-17-- 日历第三方控件,JSCal2: JavaScript日历控件(三)
• 2008-12-25-- ff2.0:日历Control控件在FF2.0 ie6下测试可用
• 2009-2-12-- 下拉控件:C#中实现键盘控制DateTimePicker日历控件下拉
• 2008-12-27-- cs控制台代码:一个用js实现控制台Control控件的代码
• 2009-2-12-- 动态创建控件:在JAVA中使用js动态创建控件的方法
• 2008-12-27-- js日历:推荐一个小巧的JS日历
• 2008-12-25-- js日历控件:js日历Control控件(可精确到分钟)