帶日期標注的日歷控件

<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        : [email protected]
//----------------------------------------------------------------

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 = "&nbsp;";
      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 = "&nbsp;";
      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>