带日期标注的日历控件

1<public:attach event="oncontentready" onevent="init()"></public:attach>

1<public:property get="getValue" name="value" put="setValue"></public:property>

1<public:property get="getStringValue" name="stringValue"></public:property>

1<public:property get="getCurrentMark" name="mark" put="setCurrentMark"></public:property>

1<public:property get="getMarkList" name="markList"></public:property>

1<public:method name="refresh"></public:method>

1<public:method name="addMark"></public:method>

1<public:method name="removeMark"></public:method>

1<public:method name="removeAllMark"></public:method>

1<public:method name="loadMark"></public:method>

1<public:method name="saveMark"></public:method>

1<public:event id="vlcg" name="onvaluechange"></public:event>

  1<script language="JScript">   
  2  
  3//----------------------------------------------------------------   
  4// HTML Component : Calendar with date mark(带时间标注的日历控件)   
  5//   
  6// Version : 1.0   
  7//   
  8// Request : Microsoft IE 5 or up   
  9//   
 10// Author : JoJo   
 11//   
 12// Last Realse : 5/9/2001   
 13//   
 14// Copyright : Think Space Soft Tec   
 15//   
 16// Contact : [email protected]   
 17//----------------------------------------------------------------   
 18  
 19var date = new Date();   
 20var activeDate = new Date();   
 21  
 22var marklist = new ActiveXObject("Scripting.Dictionary");   
 23  
 24function WriteXMLToDictionary(xmldoc,dict,rewrite){   
 25var xnodelist = xmldoc.documentElement.selectNodes("Mark");   
 26if (rewrite) dict.RemoveAll();   
 27for (var i=0;i<xnodelist.length;i++){   
 28var xnode = xnodelist.item(i);   
 29var xdate = xnode.selectSingleNode("MarkDate");   
 30var xnote = xnode.selectSingleNode("Note");   
 31//alert(xdate.text + "," + xnote.text);   
 32if (xdate.text && xnote.text){   
 33dict.item(xdate.text) = xnote.text;   
 34}   
 35}   
 36}   
 37  
 38function postxml(xmldoc,url){   
 39var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");   
 40xmlhttp.Open("POST",url,false);   
 41xmlhttp.Send(xmldoc);   
 42var xdoc = new ActiveXObject("Microsoft.XMLDom");   
 43xdoc.async = false;   
 44xdoc.loadXML(xmlhttp.responseText);   
 45return !!xdoc.documentElement.text;   
 46}   
 47  
 48function saveMark(url){   
 49var xmldoc = new ActiveXObject("Microsoft.XMLDom");   
 50WriteDictionaryToXML(marklist,xmldoc);   
 51if(postxml(xmldoc,url)){   
 52refresh();   
 53sendEvent();   
 54return true;   
 55}   
 56return false;   
 57}   
 58  
 59function WriteDictionaryToXML(dict,xmldoc){   
 60xmldoc.loadXML("<MarkList/>");   
 61var keys = (new VBArray(dict.Keys())).toArray();   
 62for (var i=0;i<keys.length;i++){   
 63try{   
 64var d = new Date(keys[i]);   
 65}catch(e){   
 66continue;   
 67}   
 68if (!dict.item(keys[i])) continue;   
 69var xmark = xmldoc.createElement("Mark");   
 70var xmarkdate = xmldoc.createElement("MarkDate");   
 71xmarkdate.text = dateToSortString(d);   
 72var xnote = xmldoc.createElement("Note");   
 73xnote.text = dict.item(keys[i]);   
 74xmark.appendChild(xmarkdate);   
 75xmark.appendChild(xnote);   
 76xmldoc.documentElement.appendChild(xmark);   
 77}   
 78}   
 79  
 80function loadMark(url,rewrite){   
 81var xmldoc = new ActiveXObject("Microsoft.FreeThreadedXMLDOM");   
 82xmldoc.async = false;   
 83xmldoc.load(url);   
 84//alert(xmldoc.xml);   
 85WriteXMLToDictionary(xmldoc,marklist,rewrite);   
 86refresh();   
 87sendEvent();   
 88}   
 89  
 90function refresh(){   
 91fillCalendar(date);   
 92}   
 93  
 94function getCurrentMark(){   
 95if(!getMark(activeDate)) return "";   
 96return getMark(activeDate);   
 97}   
 98  
 99function setCurrentMark(markvalue){   
100addMark(activeDate,markvalue);   
101}   
102  
103function getMarkList(){   
104return marklist;   
105}   
106  
107function dateToSortString(adate){   
108return (adate.getMonth()+1) + "/" + adate.getDate() + "/" + adate.getFullYear();   
109}   
110  
111function getMark(adate){   
112if (marklist.Exists(dateToSortString(adate)))   
113return marklist.Item(dateToSortString(adate));   
114}   
115  
116function addMark(adate,note){   
117if (!note) return false;   
118try{   
119var d = new Date(adate);   
120marklist.item(dateToSortString(d)) = note;   
121fillCalendar(date);   
122return true;   
123}catch(e){   
124return false;   
125}   
126}   
127  
128function removeMark(adate){   
129try   
130{   
131marklist.Remove(dateToSortString(adate));   
132fillCalendar(date);   
133}catch(e){   
134}   
135}   
136  
137function removeAllMark(){   
138marklist.RemoveAll();   
139fillCalendar(date);   
140}   
141  
142function sendEvent(){   
143var oevent = createEventObject();   
144vlcg.fire(oevent);   
145}   
146  
147function getStringValue(){   
148return activeDate.getFullYear() + "年" + (activeDate.getMonth() + 1) + "月" + activeDate.getDate() + "日";   
149}   
150  
151function getValue(){   
152return activeDate;   
153}   
154  
155function setValue(invalue){   
156try{   
157var tdate = new Date(invalue);   
158activeDate.setFullYear(tdate.getFullYear(),tdate.getMonth(),tdate.getDate());   
159date.setFullYear(tdate.getFullYear(),tdate.getMonth(),tdate.getDate());   
160fillCalendar(date);   
161sendEvent();   
162}catch(e){   
163return;   
164}   
165}   
166function fillCalendar(adate){   
167ynm.innerText = adate.getFullYear() + "年" + (adate.getMonth() + 1) + "月";   
168var tempdate = new Date();   
169tempdate.setFullYear(adate.getFullYear(),adate.getMonth(),1);   
170var first = true;   
171for (var i=0;i<tblbd.rows.length;i++){   
172for (var j=0;j<tblbd.rows(i).cells.length;j++){   
173var cell = tblbd.rows(i).cells(j);   
174cell.innerHTML = "&nbsp;";   
175cell.bgcolor = "";   
176cell.title = "";   
177cell.style.backgroundColor = "";   
178  
179if (tempdate.getDay() == j){   
180if (!first) continue;   
181cell.innerText = tempdate.getDate();   
182  
183if (getMark(tempdate)){   
184cell.bgcolor = "wheat";   
185cell.style.backgroundColor = cell.bgcolor;   
186var tt = getMark(tempdate);   
187if (tt.length<20)   
188cell.title = tt   
189else   
190cell.title = tt.substr(0,20) + "...";   
191}   
192  
193if (tempdate.getDate() == activeDate.getDate()){   
194hightLightDate(cell);   
195}   
196  
197tempdate.setFullYear(tempdate.getFullYear(),tempdate.getMonth(),tempdate.getDate()+1);   
198first = tempdate.getDate() > 1;   
199}   
200}   
201}   
202}   
203  
204function hightLightDate(object){   
205var tds = tblbd.all.tags("TD");   
206for (var i=0;i<tds.length;i++){   
207if (tds(i) != object){   
208tds(i).style.backgroundColor = tds(i).bgcolor;   
209tds(i).style.color = ""   
210}else{   
211tds(i).style.backgroundColor = "navy";   
212tds(i).style.color = "white";   
213}   
214}   
215}   
216  
217function selectDate(){   
218var i = parseInt(window.event.srcElement.innerText);   
219if ((!isNaN(i)) && (i<3000)){   
220hightLightDate(window.event.srcElement);   
221activeDate.setFullYear(date.getFullYear(),date.getMonth(),i);   
222sendEvent();   
223}   
224}   
225  
226function moveDate(){   
227var k = window.event.keyCode;   
228switch(k){   
229case 37:   
230activeDate.setFullYear(activeDate.getFullYear(),activeDate.getMonth(),activeDate.getDate()-1);   
231break;   
232case 38:   
233activeDate.setFullYear(activeDate.getFullYear(),activeDate.getMonth(),activeDate.getDate()-7);   
234break;   
235case 39:   
236activeDate.setFullYear(activeDate.getFullYear(),activeDate.getMonth(),activeDate.getDate()+1);   
237break;   
238case 40:   
239activeDate.setFullYear(activeDate.getFullYear(),activeDate.getMonth(),activeDate.getDate()+7);   
240break;   
241}   
242date.setFullYear(activeDate.getFullYear(),activeDate.getMonth(),activeDate.getDate());   
243fillCalendar(date);   
244sendEvent();   
245}   
246  
247function setActiveDate(){   
248var i = activeDate.getDate();   
249activeDate.setFullYear(date.getFullYear(),date.getMonth(),i);   
250while ((date.getMonth() != activeDate.getMonth()) || (date.getFullYear() != activeDate.getFullYear())){   
251activeDate.setFullYear(date.getFullYear(),date.getMonth(),i--);   
252}   
253sendEvent();   
254}   
255  
256function goNextMonth(){   
257date.setMonth(date.getMonth()+1,1);   
258setActiveDate();   
259fillCalendar(date);   
260}   
261  
262function goNextYear(){   
263date.setFullYear(date.getFullYear()+1,date.getMonth(),1);   
264setActiveDate();   
265fillCalendar(date);   
266}   
267  
268function goPriorYear(){   
269date.setFullYear(date.getFullYear()-1,date.getMonth(),1);   
270setActiveDate();   
271fillCalendar(date);   
272}   
273  
274function goPriorMonth(){   
275date.setMonth(date.getMonth()-1,1);   
276setActiveDate();   
277fillCalendar(date);   
278}   
279  
280//---------------------------------------------------------------------   
281  
282var tbl = window.document.createElement("<TABLE style=\"border:solid 1px;width:100%;height:100%;font-size:9pt\" cellspacing=0>");   
283var tblhd = window.document.createElement("THEAD");   
284var tblbd = window.document.createElement("TBODY");   
285  
286var anchorPriorYear = window.document.createElement("A");   
287anchorPriorYear.style.fontFamily = "webdings";   
288anchorPriorYear.style.cursor = "hand";   
289anchorPriorYear.innerText = "7";   
290anchorPriorYear.title = "上一年";   
291  
292var anchorPriorMonth = window.document.createElement("A");   
293anchorPriorMonth.style.fontFamily = "webdings";   
294anchorPriorMonth.style.cursor = "hand";   
295anchorPriorMonth.innerText = "3";   
296anchorPriorMonth.title = "上一月";   
297  
298var anchorNextMonth = window.document.createElement("A");   
299anchorNextMonth.style.fontFamily = "webdings";   
300anchorNextMonth.style.cursor = "hand";   
301anchorNextMonth.innerText = "4";   
302anchorNextMonth.title = "下一月";   
303  
304var anchorNextYear = window.document.createElement("A");   
305anchorNextYear.style.fontFamily = "webdings";   
306anchorNextYear.style.cursor = "hand";   
307anchorNextYear.innerText = "8";   
308anchorNextYear.title = "下一年";   
309  
310var ynm = window.document.createElement("FONT");   
311ynm.style.width = "60%";   
312ynm.style.fontWeight = "bold";   
313  
314var cpt = window.document.createElement("CAPTION");   
315  
316tbl.appendChild(cpt);   
317tbl.appendChild(tblhd);   
318tbl.appendChild(tblbd);   
319  
320function inithead(){   
321cpt.style.backgroundColor = "navy";   
322cpt.style.color = "white";   
323cpt.style.textAlign = "center";   
324cpt.style.cursor = "defalut";   
325cpt.appendChild(anchorPriorYear);   
326cpt.appendChild(anchorPriorMonth);   
327cpt.appendChild(ynm);   
328cpt.appendChild(anchorNextMonth);   
329cpt.appendChild(anchorNextYear);   
330var row = tblhd.insertRow();   
331row.align = "center";   
332var weekStr = new Array("日","一","二","三","四","五","六");   
333for (var i=0;i<weekStr.length;i++){   
334var cell = row.insertCell();   
335cell.innerText = weekStr[i];   
336cell.style.borderBottom = "solid 1px";   
337cell.style.cursor = "default";   
338cell.align = "center";   
339}   
340}   
341  
342function initbody(){   
343for (var i=0;i<6;i++){   
344var row = tblbd.insertRow();   
345for (var j=0;j<7;j++){   
346var cell = row.insertCell();   
347cell.innerHTML = "&nbsp;";   
348cell.style.cursor = "default";   
349cell.align = "center";   
350}   
351}   
352}   
353  
354function init(){   
355inithead();   
356initbody();   
357element.appendChild(tbl);   
358fillCalendar(date);   
359tblbd.attachEvent("onclick",selectDate);   
360tblbd.attachEvent("onkeydown",moveDate);   
361anchorPriorYear.attachEvent("onclick",goPriorYear);   
362anchorPriorMonth.attachEvent("onclick",goPriorMonth);   
363anchorNextMonth.attachEvent("onclick",goNextMonth);   
364anchorNextYear.attachEvent("onclick",goNextYear);   
365sendEvent();   
366}   
367</script>