Calendar control with date callout

Control Name: Calendar with Date Mark
Version: 1.0
Type: HTML Component
Operational Requirements: IE 5 (Recommended IE5.5 or later), MSXML, ASP, or asp.net (background)
Fee: Free
Support: No support available
Source code: 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 (Calendar control with time annotations)
//
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 () + "year" + (Activedate.getmonth () + 1) + "month" + activedate.getdate () + "Day";
}

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 () + "year" + (Adate.getmonth () + 1) + "month";
var tempdate = new Date ();
Tempdate.setfullyear (Adate.getfullyear (), Adate.getmonth (), 1);
var-i = 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);
The 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 = "Last year";

var anchorpriormonth = window.document.createElement ("A");
anchorPriorMonth.style.fontFamily = "Webdings";
AnchorPriorMonth.style.cursor = "Hand";
Anchorpriormonth.innertext = "3";
Anchorpriormonth.title = "Last month";

var anchornextmonth = window.document.createElement ("A");
anchorNextMonth.style.fontFamily = "Webdings";
AnchorNextMonth.style.cursor = "Hand";
Anchornextmonth.innertext = "4";
Anchornextmonth.title = "next month";

var anchornextyear = window.document.createElement ("A");
anchorNextYear.style.fontFamily = "Webdings";
AnchorNextYear.style.cursor = "Hand";
Anchornextyear.innertext = "8";
Anchornextyear.title = "next year";

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 ("Day", "one", "two", "three", "four", "five", "six");
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>