Author: pyaschenko Date: 2007-06-18 11:08:07 -0400 (Mon, 18 Jun 2007) New Revision: 1209 Modified: trunk/sandbox/calendar/design/calendar-js/calendar-prototype.js trunk/sandbox/calendar/design/calendar-js/calendar-xhtml.html Log: Today button added. OnDate selection added. Some style classes added(draft). Modified: trunk/sandbox/calendar/design/calendar-js/calendar-prototype.js =================================================================== --- trunk/sandbox/calendar/design/calendar-js/calendar-prototype.js 2007-06-18 12:45:26 UTC (rev 1208) +++ trunk/sandbox/calendar/design/calendar-js/calendar-prototype.js 2007-06-18 15:08:07 UTC (rev 1209) @@ -11,6 +11,27 @@ return value; } +Object.extend(Event, { + findElementByAttr : function(event, tagName, attribute, value, flag) { + var element = Event.findElement(event, tagName); + while (!element[attribute] || (flag ? element[attribute].slice(0, value.length)!=value : element[attribute]!=value) ) + { + element = element.parentNode; + } + return element; + } +}); + +Object.extend(Element, { + replaceClassName : function (element, whichClassName, toClassName) { + if (!(element = $(element))) return; + var e = Element.classNames(element); + e.remove(whichClassName); + e.add(toClassName); + return element; + } +}); + function isLeapYear(year) { return new Date(year, 1, 29).getDate()==29; } @@ -23,8 +44,6 @@ return 32 - new Date(date.getYear(), date.getMonth(), 32).getDate(); } -function y2k(number) { return (number < 1000) ? number + 1900 : number; } - function getDay(date, firstWeekDay ) { var value = date.getDay() - firstWeekDay; if (value < 0) value = 7 + value; @@ -32,11 +51,10 @@ } function weekNumber(year, month, mdifw, fdow) { - year = y2k(year); var tfdow = fdow; var firstDay = new Date(year,0,1); var fDay = firstDay.getDay(); - var daynum = ((Date.UTC(y2k(year),month,1,0,0,0) - Date.UTC(y2k(year),0,1,0,0,0)) /86400000)+1 ; + var daynum = ((Date.UTC(year,month,1,0,0,0) - Date.UTC(year,0,1,0,0,0)) /86400000)+1 ; var weeknum = Math.round((daynum+7)/7); if(fDay == 0) fDay = 7; if(tfdow == 0) tfdow = 7; @@ -77,20 +95,23 @@ this.firstWeekDay = parameters.firstWeekDay; this.minDaysInFirstWeek = parameters.minDaysInFirstWeek; + this.firstWeekendDayNumber = 6-this.firstWeekDay; + this.secondWeekendDayNumber = (this.firstWeekDay>0 ? 7-this.firstWeekDay : 0); + this.daysData = {startDate:null, days:[]}; - var htmlTextHeader = '<div id="div_'+parameters.dayListTableId+'"></div><table border="1" id="'+parameters.dayListTableId+'">\n'; - var htmlTextFooter = '</table>\n'; + var htmlTextHeader = '<div id="div_'+parameters.dayListTableId+'"></div><table cellspacing="0" border="1" frame="void" rules="all" id="'+parameters.dayListTableId+'">\n'; + var htmlTextFooter = '</table><div id="div_'+parameters.dayListTableId+'_selected_date"></div>\n'; // days bar creation - var htmlTextWeekDayBar = '<tr id="'+parameters.weekDayBarId+'"><td></td>'; + var htmlTextWeekDayBar = '<tr id="'+parameters.weekDayBarId+'"><td style="border-top:0px"></td>'; var weekDayCounter = this.firstWeekDay; for (var i=0;i<7;i++) { var weekDayHtml = this.weekDayMarkup( {weekDay: this.weekDayLabels[weekDayCounter]} ); if (weekDayCounter==6) weekDayCounter=0; else weekDayCounter++; - htmlTextWeekDayBar+='<td id="'+parameters.weekDayBarId+i+'">'+weekDayHtml+'</td>'; + htmlTextWeekDayBar+='<td id="'+parameters.weekDayBarId+i+'" class="'+(i==this.firstWeekendDayNumber || i==this.secondWeekendDayNumber ? "Weekendclass" : "Dayclass")+'">'+weekDayHtml+'</td>'; } htmlTextWeekDayBar+='</tr>\n'; @@ -106,16 +127,59 @@ htmlTextWeek+='<tr><td id="'+parameters.weekNumberBarId+k+'">'+weekNumberHtml+'</td>'; for (var i=0;i<7;i++) { - htmlTextWeek+='<td style="vertical-align:top"></td>'; + htmlTextWeek+='<td id="'+this.dayListTableId+'_cell'+(p++)+'" style="vertical-align:top" class="'+(i==this.firstWeekendDayNumber || i==this.secondWeekendDayNumber ? "Weekenddayclass" : "Commondayclass")+'"></td>'; } htmlTextWeek+='</tr>'; } // set content - var obj=document.getElementById(id); + var obj=$(id); obj.innerHTML = htmlTextHeader+htmlTextWeekDayBar+htmlTextWeek+htmlTextFooter; + + this.prepareEvents(); + obj.innerHTML }, + + prepareEvents: function() { + this.eventCellOnClick = this.eventCellOnClick.bindAsEventListener(this); + this.eventCellOnMouseOver = this.eventCellOnMouseOver.bindAsEventListener(this); + this.eventCellOnMouseOut = this.eventCellOnMouseOut.bindAsEventListener(this); + }, + + setCellEvents: function(obj) { + Event.observe(obj, "click", this.eventCellOnClick, false); + Event.observe(obj, "mouseover", this.eventCellOnMouseOver, false); + Event.observe(obj, "mouseout", this.eventCellOnMouseOut, false); + }, + stopCellEvents: function(obj) { + Event.observe(obj, "click", this.eventCellOnClick, false); + Event.observe(obj, "mouseover", this.eventCellOnMouseOver, false); + Event.observe(obj, "mouseout", this.eventCellOnMouseOut, false); + }, + + eventCellOnClick: function (e) { + var obj = Event.findElementByAttr(e, "TD", "id", this.dayListTableId+'_cell',true); + $('div_'+this.dayListTableId+'_selected_date').innerHTML=obj.data+"/"+(this.currentDate.getMonth()+1)+"/"+this.currentDate.getFullYear(); + }, + eventCellOnMouseOver: function (e) { + var obj = Event.findElementByAttr(e, "TD", "id", this.dayListTableId+'_cell',true); + if (obj) + { + if (Element.hasClassName(obj,"Commondayclass")) Element.replaceClassName(obj,"Commondayclass", "Hovereddayclass"); + else if (Element.hasClassName(obj,"Weekenddayclass")) Element.replaceClassName(obj,"Weekenddayclass", "Hoveredweekclass"); + } + }, + + eventCellOnMouseOut: function (e) { + var obj = Event.findElementByAttr(e, "TD", "id", this.dayListTableId+'_cell',true); + if (obj) + { + if (Element.hasClassName(obj,"Hovereddayclass")) Element.replaceClassName(obj, "Hovereddayclass", "Commondayclass"); + else if (Element.hasClassName(obj,"Hoveredweekclass")) Element.replaceClassName(obj, "Hoveredweekclass", "Weekenddayclass"); + } + }, + load:function(daysData) { // startDate, // days:array[] @@ -135,7 +199,7 @@ }, indexData:function(daysData) { - var dateYear = y2k(daysData.startDate.getYear()); + var dateYear = daysData.startDate.getFullYear(); var dateMonth = daysData.startDate.getMonth(); daysData.index = []; @@ -154,10 +218,10 @@ update:function() { //this.currentDate = daysData.startDate; - var currentYear = y2k(this.currentDate.getYear()); + var currentYear = this.currentDate.getFullYear(); var currentMonth = this.currentDate.getMonth(); - var dateDiv = document.getElementById("div_"+this.dayListTableId); + var dateDiv = $("div_"+this.dayListTableId); dateDiv.innerHTML = currentYear + "/" + (currentMonth+1); @@ -197,24 +261,40 @@ for (var k=1;k<7;k++) { // - var obj = document.getElementById(this.weekNumberBarId+k).parentNode; + var obj = $(this.weekNumberBarId+k).parentNode; obj.childNodes[0].innerHTML = (days[p]) ? this.weekNumberMarkup( {weekNumber: wn++} ) : ""; for (var i=1;i<obj.childNodes.length;i++) { - obj.childNodes[i].innerHTML = (days[p]) ? this.dayListMarkupArray[p]( days[p++] ) : ""; + this.stopCellEvents(obj.childNodes[i]); + + if (days[p]) { + this.setCellEvents(obj.childNodes[i]); + obj.childNodes[i].data=days[p].day; + obj.childNodes[i].innerHTML = this.dayListMarkupArray[p]( days[p++] ); + } else { + obj.childNodes[i].innerHTML = ""; + } } } }, + nextMonth: function() { - this.currentDate = new Date(y2k(this.currentDate.getYear()), this.currentDate.getMonth()+1,1); + this.currentDate = new Date(this.currentDate.getFullYear(), this.currentDate.getMonth()+1,1); this.update(); }, prevMonth: function() { - this.currentDate = new Date(y2k(this.currentDate.getYear()), this.currentDate.getMonth()-1,1); + this.currentDate = new Date(this.currentDate.getFullYear(), this.currentDate.getMonth()-1,1); this.update(); + }, + + today: function() { + var now = new Date(); + if (now.getDate()!=this.todayDate.getDate()) this.todayDate = now; + this.currentDate = new Date(now.getFullYear(), now.getMonth(),1); + this.update(); } }); \ No newline at end of file Modified: trunk/sandbox/calendar/design/calendar-js/calendar-xhtml.html =================================================================== --- trunk/sandbox/calendar/design/calendar-js/calendar-xhtml.html 2007-06-18 12:45:26 UTC (rev 1208) +++ trunk/sandbox/calendar/design/calendar-js/calendar-xhtml.html 2007-06-18 15:08:07 UTC (rev 1209) @@ -5,8 +5,34 @@ <html xmlns="http://www.w3.org/1999/xhtml"> <head> -<meta http-equiv="Content-Type" content="text/xhtml" /> +<meta http-equiv="Content-Type" content="text/xhtml" /> +<style type="text/css"> +.Dayclass { + color: #000000; + font-weight:bold; +} +.Weekendclass { + color:#800000; + font-weight:bold; +} +.Commondayclass { + color: #000080; +} +.Hovereddayclass { + color:red; +} +.Weekenddayclass { + color:#800000; +} +.Hoveredweekclass { + color:red; +} +.Disableddayclass { + color:gray; +} +</style> + <script src="prototype-1.5.1.js" type="text/javascript"></script> <script src="calendar-prototype.js" type="text/javascript"></script> <script type="text/javascript"> @@ -20,7 +46,7 @@ m1 = Richfaces.evalMacro('day',obj); m2 = Richfaces.evalMacro('text1',obj); m3 = Richfaces.evalMacro('text2',obj); - return '<table><tr><td>&nbsp;</td><td>'+m1+'</td></tr><tr><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td colspan="2">'+m2+'</td></tr><tr><td colspan="2">'+m3+'</td></tr></table>'; + return '<table><tr><td></td><td>'+m1+'</td></tr><tr><td></td><td></td></tr><tr><td colspan="2">'+m2+'</td></tr><tr><td colspan="2">'+m3+'</td></tr></table>'; }; var m = new Array(); @@ -61,14 +87,14 @@ for (var i=10; i<=daysInMonth(2007,5); i++) { data_obj.days.push({day: i, - text1: "data set 1 for day "+i, + text1: "<small><small>data set 1 for day "+i+"</small></small>", text2: "<span style='color: green; font-size: 10px;'>just text</span>" }); } for (var i=1; i<=daysInMonth(2007,6); i++) { data_obj.days.push({day: i, - text1: "data set 1 for day "+i, + text1: "<small><small>data set 1 for day "+i+"</small></small>", text2: "<span style='color: green; font-size: 10px;'>just text</span>" }); } @@ -76,7 +102,7 @@ for (var i=1; i<=7; i++) { data_obj.days.push({day: i, - text1: "data set 1 for day "+i, + text1: "<small><small>data set 1 for day "+i+"</small></small>", text2: "<span style='color: green; font-size: 10px;'>just text</span>" }); } @@ -118,6 +144,9 @@ function changeMonth(v) { if (v) window.testCalendar.nextMonth(); else window.testCalendar.prevMonth(); } +function today() { + window.testCalendar.today(); +} //]]> </script> @@ -128,7 +157,7 @@ <input type="radio" name="dataSet" value="1" id="set1" onchange="selectDataSet(event)" onclick="selectDataSet(event)" checked="checked" /><label for="set1">Set 1</label><br /> <input type="radio" name="dataSet" value="2" id="set2" onchange="selectDataSet(event)" onclick="selectDataSet(event)" /><label for="set2">Set 2</label><br /> <input type="radio" name="dataSet" value="3" id="set3" onchange="selectDataSet(event)" onclick="selectDataSet(event)" /><label for="set3">Set 3</label><br /> -<button onclick="changeMonth(false)">prev month</button><button onclick="changeMonth(true)">next month</button><br /> +<button onclick="changeMonth(false)">prev month</button><button onclick="changeMonth(true)">next month</button><button onclick="today()">Today</button><br /> <div id="calendar">Hello</div> </body> </html>