带日期标注的日历控件

核心提示：控件名称：Calendar with Date Mark版本：1.0类型：HTML Component运行需求：IE 5（推荐IE5.5或更高版本）、MSxml、asp或asp.net（后台）费用：免费支持：不提供支持源 代 码：XML Scriptlet<public:attach event="on

控件名称：Calendar with Date Mark
版　　本：1.0
类　　型：HTML Component
运行需求：IE 5（推荐IE5.5或更高版本）、MSxml、asp或asp.net（后台）
费　　用：免费
支　　持：不提供支持
源 代 码：XML Scriptlet
------------------------------------------------------------------------
<public:attach event="oncontentready" onevent="init()"/>
<public:PRoperty name="value" get="getValue" put="setValue"/>
<public:property name="stringValue" get="getStringValue" />
<public:property name="mark" get="getCurrentMark" put="setCurrentMark" />
<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(带时间标注的日历控件)
//
//　Version　　　　: 1.0
//
//　Request　　　　: Microsoft IE 5 or up
//
//　Author　　　　 : JoJo
//
//　Last Realse　　: 5/9/2001
//
//　Copyright　　　: Think Space Soft Tec
//
//　Contact　　　　: thinkspace@163.net
//----------------------------------------------------------------

var date = new Date();
var activeDate = new Date();

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

function WriteXMLToDictionary(xmldoc,dict,rewrite){
　var xnodelist = xmldoc.documentElement.selectNodes("Mark");
　if (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);
　　if (xdate.text && xnote.text){
　　　dict.item(xdate.text) = xnote.text;
　　}
　}
}

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

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

function WriteDictionaryToXML(dict,xmldoc){
　xmldoc.loadXML("<MarkList/>");
　var keys = (new VBArray(dict.Keys())).toArray();
　for (var i=0;i<keys.length;i++){
　　try{
　　　var d = new Date(keys[i]);
　　}catch(e){
　　　continue;
　　}
　　if (!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 = new ActiveXObject("Microsoft.FreeThreadedXMLDOM");
　xmldoc.async = false;
　xmldoc.load(url);
　//alert(xmldoc.xml);
　WriteXMLToDictionary(xmldoc,marklist,rewrite);
　refresh();
　sendEvent();
}

function refresh(){
　fillCalendar(date);
}

function getCurrentMark(){
　if(!getMark(activeDate)) return "";
　return getMark(activeDate);
}

function setCurrentMark(markvalue){
　addMark(activeDate,markvalue);
}

function getMarkList(){
　return marklist;
}

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

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

function addMark(adate,note){
　if (!note) return false;
　try{
　　var d = new Date(adate);
　　marklist.item(dateToSortString(d)) = note;
　　fillCalendar(date);
　　return true;
　}catch(e){
　　return 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(){
　return activeDate.getFullYear() + "年" + (activeDate.getMonth() + 1) + "月" + activeDate.getDate() + "日";
}

function getValue(){
　return activeDate;
}

function setValue(invalue){
　try{
　　var tdate = new Date(invalue);
　　activeDate.setFullYear(tdate.getFullYear(),tdate.getMonth(),tdate.getDate());
　　date.setFullYear(tdate.getFullYear(),tdate.getMonth(),tdate.getDate());
　　fillCalendar(date);
　　sendEvent();
　}catch(e){
　　return;
　}
}
function fillCalendar(adate){
　ynm.innerText = adate.getFullYear() + "年" + (adate.getMonth() + 1) + "月";
　var tempdate = new Date();
　tempdate.setFullYear(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 = "";
　　　
　　　if (tempdate.getDay() == j){
　　　　if (!first) continue;
　　　　cell.innerText = tempdate.getDate();

　　　　if (getMark(tempdate)){
　　　　　cell.bgcolor = "wheat";
　　　　　cell.style.backgroundColor = cell.bgcolor;
　　　　　var tt = getMark(tempdate);
　　　　　if (tt.length<20)
　　　　　　cell.title = tt
　　　　　else
　　　　　　cell.title = tt.substr(0,20) + "...";
　　　　}
　　　　
　　　　if (tempdate.getDate() == activeDate.getDate()){
　　　　　hightLightDate(cell);
　　　　}
　　　　
　　　　tempdate.setFullYear(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++){
　　if (tds(i) != object){
　　　tds(i).style.backgroundColor = tds(i).bgcolor;
　　　tds(i).style.color = ""
　　}else{
　　　tds(i).style.backgroundColor = "navy";
　　　tds(i).style.color = "white";
　　}
　}
}

function selectDate(){
　var i = parseInt(window.event.srcElement.innerText);
　if ((!isNaN(i)) && (i<3000)){
　　hightLightDate(window.event.srcElement);
　　activeDate.setFullYear(date.getFullYear(),date.getMonth(),i);
　　sendEvent();
　}
}

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

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

function goNextMonth(){
　date.setMonth(date.getMonth()+1,1);
　setActiveDate();
　fillCalendar(date);
}

function goNextYear(){
　date.setFullYear(date.getFullYear()+1,date.getMonth(),1);
　setActiveDate();
　fillCalendar(date);
}

function goPriorYear(){
　date.setFullYear(date.getFullYear()-1,date.getMonth(),1);
　setActiveDate();
　fillCalendar(date);
}

function goPriorMonth(){
　date.setMonth(date.getMonth()-1,1);
　setActiveDate();
　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 = new Array("日","一","二","三","四","五","六");
　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>