Author: nbelaevski Date: 2007-06-13 11:29:09 -0400 (Wed, 13 Jun 2007) New Revision: 1160 Added: trunk/sandbox/calendar/design/calendar-js/calendar-prototype.js Modified: trunk/sandbox/calendar/design/calendar-js/calendar-xhtml.html Log: Calendar prototype updated Added: trunk/sandbox/calendar/design/calendar-js/calendar-prototype.js =================================================================== --- trunk/sandbox/calendar/design/calendar-js/calendar-prototype.js (rev 0) +++ trunk/sandbox/calendar/design/calendar-js/calendar-prototype.js 2007-06-13 15:29:09 UTC (rev 1160) @@ -0,0 +1,220 @@ +if(!LOG){ + var LOG = {warn:function(){}}; +} + +if(!Richfaces) var Richfaces={}; + +Richfaces.evalMacro = function(template, object) +{ + var value=""; + try { with (object) value=eval(template) } catch (e) { LOG.warn("Exception: "+e.Message + "\n[" + template + "]"); } + return value; +} + +function isLeapYear(year) { + return new Date(year, 1, 29).getDate()==29; +} + +function daysInMonth(year,month) { + return 32 - new Date(year, month, 32).getDate(); +} + +function daysInMonthByDate(date) { + 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; + return value; +} + +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)) /1000/60/60/24)+1 ; + var weeknum = Math.round((daynum+7)/7); + if(fDay == 0) fDay = 7; + if(tfdow == 0) tfdow = 7; + var delta = Math.abs(fDay-tfdow); + if(delta == 0)return weeknum; + if(tfdow < fDay) delta = 7 - delta; + if(delta < mdifw) weeknum--; + return weeknum; +} + +Calendar = Class.create(); +Object.extend(Calendar.prototype, { + initialize: function(id,parameters) { + + // dayListTableId, weekNumberBarId, weekDayBarId - 3 tables ids', + // dayListMarkupArray - array [0..41] of day cell markup + // weekNumberMarkup - week number cell markup + // weekDayMarkup - week day cell markup + + // currentDate - date to show month (day not used) (mm/yyyy) + // selectedDate - selected date (mm/dd/yyyy) + // weekDayLabels - collection of week day labels keyed by week day numbers + // minDaysInFirstWeek - locale-specific constant defining number of days in the first week + // firstWeekDay - (0..6) locale-specific constant defining number of the first week day + + this.id = id; + this.dayListTableId = parameters.dayListTableId; + this.weekNumberBarId = parameters.weekNumberBarId; + this.weekDayBarId = parameters.weekDayBarId; + + this.weekNumberMarkup = parameters.weekNumberMarkup; + this.weekDayMarkup = parameters.weekDayMarkup; + this.dayListMarkupArray = parameters.dayListMarkupArray; + this.currentDate = parameters.currentDate; + this.todayDate = new Date(); /// May be not needed + this.selectedDate = parameters.SelectedDate; + this.weekDayLabels = parameters.weekDayLabels; + this.firstWeekDay = parameters.firstWeekDay; + this.minDaysInFirstWeek = parameters.minDaysInFirstWeek; + + this.daysData = {startDate:null, days:[]}; + + var htmlTextHeader = '<div id="div_'+parameters.dayListTableId+'"></div><table border="1" id="'+parameters.dayListTableId+'">\n'; + var htmlTextFooter = '</table>\n'; + + // days bar creation + var htmlTextWeekDayBar = '<tr id="'+parameters.weekDayBarId+'"><td></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+='</tr>\n'; + + // week & weekNumber creation + var htmlTextWeek=""; + var p=0; + + for (k=1;k<7;k++) + { + + var weekNumberHtml = this.weekNumberMarkup( {weekNumber: k} ); + + htmlTextWeek+='<tr><td id="'+parameters.weekNumberBarId+k+'">'+weekNumberHtml+'</td>'; + for (var i=0;i<7;i++) + { + htmlTextWeek+='<td style="vertical-align:top"></td>'; + } + htmlTextWeek+='</tr>'; + } + + // set content + var obj=document.getElementById(id); + obj.innerHTML = htmlTextHeader+htmlTextWeekDayBar+htmlTextWeek+htmlTextFooter; + }, + + load:function(daysData) { + // startDate, + // days:array[] + // { + // data + // enabled + // isEnabled function + // text1: 'Meeting...', + // text2: 'Meeting...' + // tooltip + // hasTooltip + // dayStyleClass + // } + + this.daysData = this.indexData(daysData); + this.update(); + }, + + indexData:function(daysData) { + var dateYear = y2k(daysData.startDate.getYear()); + var dateMonth = daysData.startDate.getMonth(); + + daysData.index = []; + daysData.index[dateYear+'-'+dateMonth] = 0; + var idx = daysInMonthByDate(daysData.startDate)-daysData.startDate.getDate()+1; + + while (daysData.days[idx]) + { + if (dateMonth==11) {dateYear++; dateMonth=0;} else dateMonth++; + daysData.index[dateYear+'-'+dateMonth] = idx; + idx+= (32 - new Date(dateYear, dateMonth, 32).getDate()); + } + return daysData; + }, + + update:function() { + + //this.currentDate = daysData.startDate; + var currentYear = y2k(this.currentDate.getYear()); + var currentMonth = this.currentDate.getMonth(); + + var dateDiv = document.getElementById("div_"+this.dayListTableId); + dateDiv.innerHTML = currentYear + "/" + (currentMonth+1); + + + var wd = getDay(this.currentDate, this.firstWeekDay); + var currentMonthDays = daysInMonthByDate(this.currentDate); + var previousMonthDays = daysInMonth(currentYear, currentMonth-1); + var wn = weekNumber(currentYear, currentMonth, this.minDaysInFirstWeek, this.firstWeekDay) /// fix it + + var p=0; + var days = []; + var dayCounter = previousMonthDays - wd + 1; + // previuos month days + if (wd>0) while (dayCounter<=previousMonthDays) {days.push({day:dayCounter++}); p++; } + dayCounter = 1; + + // current month days + if (this.daysData.index[currentYear+'-'+currentMonth]!=undefined) + { + var idx = this.daysData.index[currentYear+'-'+currentMonth]; + var firstDay = this.daysData.days[idx].day; + while (dayCounter<firstDay) { days.push({day:dayCounter++}); p++; } + + var len = this.daysData.days.length; + while (idx<len && dayCounter<=currentMonthDays) { days.push(this.daysData.days[idx]); idx++; dayCounter++; p++;} + + while (dayCounter<=currentMonthDays) { days.push({day:dayCounter++}); p++; } + + } else while (dayCounter<=currentMonthDays) { days.push({day:dayCounter++}); p++; } + dayCounter = 1; + + // next month days + var ld = 7-p%7; + while (dayCounter<=ld) { days.push({day:dayCounter++}); } + + // render + p=0; + for (var k=1;k<7;k++) + { + // + var obj = document.getElementById(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++] ) : ""; + } + } + }, + nextMonth: function() { + this.currentDate = new Date(y2k(this.currentDate.getYear()), this.currentDate.getMonth()+1,1); + this.update(); + }, + + prevMonth: function() { + this.currentDate = new Date(y2k(this.currentDate.getYear()), this.currentDate.getMonth()-1,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-13 15:21:35 UTC (rev 1159) +++ trunk/sandbox/calendar/design/calendar-js/calendar-xhtml.html 2007-06-13 15:29:09 UTC (rev 1160) @@ -8,126 +8,80 @@ <meta http-equiv="Content-Type" content="text/xhtml" /> <script src="prototype-1.5.1.js" type="text/javascript"></script> +<script src="calendar-prototype.js" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ -var DAYS = ["Mon","Tue","Wen","Thu","Fri","Sat","Sun"]; - -Calendar = Class.create(); -Object.extend(Calendar.prototype, { - initialize: function(id,parameters) { - // dayListTableId, weekNumberBarId, weekDayBarId � 3 tables ids', - // dayListMarkupArray � array [0..41] of day cell markup - // weekNumberMarkup � week number cell markup - // weekDayMarkup � week day cell markup - this.id = id; - this.dayListTableId = parameters.dayListTableId; - this.weekNumberBarId = parameters.weekNumberBarId; - this.weekDayBarId = parameters.weekDayBarId; - - this.weekNumberMarkup = parameters.weekNumberMarkup; - this.weekDayMarkup = parameters.weekDayMarkup; - this.dayListMarkupArray = parameters.dayListMarkupArray; - - var htmlTextHeader = '<table border="1" id="'+parameters.dayListTableId+'">\n'; - var htmlTextFooter = '</table>\n'; - - // days bar creation - var htmlTextWeekDayBar = '<tr id="'+parameters.weekDayBarId+'"><td></td>'; - for (var i=0;i<7;i++) - { - var weekDayParam = { - weekDay: DAYS[i] - }; - var weekDayHtml; - - with(weekDayParam) { - weekDayHtml = eval(this.weekDayMarkup); - }; - - htmlTextWeekDayBar+='<td id="'+parameters.weekDayBarId+i+'">'+weekDayHtml+'</td>'; - } - htmlTextWeekDayBar+='</tr>\n'; - - // week & weekNumber creation - var htmlTextWeek=""; - var p=0; - - for (k=1;k<7;k++) - { - var weekNumberParam = { - weekNumber: k - }; - var weekNumberHtml; - - with(weekNumberParam) { - weekNumberHtml = eval(this.weekNumberMarkup); - }; - - htmlTextWeek+='<tr><td id="'+parameters.weekNumberBarId+k+'">'+weekNumberHtml+'</td>'; - for (var i=0;i<7;i++) - { - htmlTextWeek+='<td></td>'; - } - htmlTextWeek+='</tr>'; - } - - // set content - var obj=document.getElementById(id); - obj.innerHTML = htmlTextHeader+htmlTextWeekDayBar+htmlTextWeek+htmlTextFooter; - }, - - load:function(daysData) { - //��� ������ ������ load(daysData), ������� ��������� ��� �������� - //daysData � array [0..41] of dayData instances, where dayData = { - // day: (1..42), - // text1: �Meeting�..�, - // text2: �Meeting�..� - //} - - var p=0; - for (var k=1;k<7;k++) - { - var obj = document.getElementById(this.weekNumberBarId+k).parentNode; - - for (var i=1;i<obj.childNodes.length;i++) - { - with (daysData[p]) { - obj.childNodes[i].innerHTML = eval(this.dayListMarkupArray[p]); - } - p++; - } - } - } -}); - function createCalendar() { //var cellMarkup = '\'<div style="width:50%; float:left; disply:inline; border-bottom:1px solid #e0e0e0;"> </div><div style="width:50%; float:left; disply:inline; border-bottom:1px solid #e0e0e0;">\'+day+\'</div><div style="width:50%;float:left; disply:inline; border-bottom:1px solid #e0e0e0;"></div><div style="width:50%; float:left; disply:inline; border-bottom:1px solid #e0e0e0;"></div><div style="width:100%; border-bottom:1px solid #e0e0e0;">\'+text1+\'</div><div style="width:100%">\'+text2+\'</div>\''; - var cellMarkup = '\'<table><tr><td>&nbsp;</td><td>\'+day+\'</td></tr><tr><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td colspan="2">\'+text1+\'</td></tr><tr><td colspan="2">\'+text2+\'</td></tr></table>\''; + //var cellMarkup = '\'<table><tr><td>&nbsp;</td><td>\'+ev("day")+\'</td></tr><tr><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td colspan="2">\'+ev("text1")+\'</td></tr><tr><td colspan="2">\'+ev("text2")+\'</td></tr></table>\''; + cellMarkup = function (obj) { + 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>'; + }; var m = new Array(); for (var i = 0; i < 42; i++) { m.push(cellMarkup); } - var weekDayMarkup = '"<i>"+weekDay+"</i>"'; - var weekNumberMarkup = '"<b style=\'padding: 10px;\'>"+weekNumber+"</b>"'; + weekDayMarkup = function (obj) { + return '<i>'+Richfaces.evalMacro('weekDay', obj)+'</i>'; + }; - window.testCalendar = new Calendar('calendar',{dayListTableId:'aaa',weekNumberBarId:'bbb',weekDayBarId:'ccc',dayListMarkupArray: m, weekDayMarkup: weekDayMarkup, weekNumberMarkup: weekNumberMarkup}); + weekNumberMarkup = function (obj) { + + return '<b style="padding: 10px;">'+Richfaces.evalMacro('weekNumber', obj)+'</b>'; + }; + + + window.testCalendar = new Calendar('calendar',{dayListTableId:'aaa',weekNumberBarId:'bbb',weekDayBarId:'ccc',dayListMarkupArray: m, weekDayMarkup: weekDayMarkup, weekNumberMarkup: weekNumberMarkup, currentDate: new Date(2007,6,1), selectedDate: new Date(2007,4,5), weekDayLabels:['Sun','Mon','Tue','Wen','Thu','Fri','Sat'], firstWeekDay: 1, minDaysInFirstWeek:4}); loadDataSet1(); } function loadDataSet1() { - var a = new Array(); - for (var i=0; i<42; i++) + // startDate, + // array[] + // { + // dayData + // enabled + // isEnabled function + // text1: 'Meeting...', + // text2: 'Meeting...' + // tooltip + // hasTooltip + // dayStyleClass + // } + var data_obj = {startDate:new Date(2007,5,10), days: []}; + for (var i=10; i<=daysInMonth(2007,5); i++) { - a.push({day:i,text1:"data set1 for day "+i,text2:"text2 for day "+i}); + data_obj.days.push({day: i, + text1: "data set 1 for day "+i, + 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, + text2: "<span style='color: green; font-size: 10px;'>just text</span>" + }); + } - window.testCalendar.load(a); + for (var i=1; i<=7; i++) + { + data_obj.days.push({day: i, + text1: "data set 1 for day "+i, + text2: "<span style='color: green; font-size: 10px;'>just text</span>" + }); + } + + window.testCalendar.load(data_obj); } function loadDataSet2() @@ -137,6 +91,10 @@ { a.push({day:i,text2:"data set 2 for day "+i,text1:"<span style='color: red; font-size: 20px;'>just text</span>"}); } + for (var i=0; i<42; i++) + { + a.push({day:i,text2:"data set 2 for day "+i,text1:"<span style='color: red; font-size: 20px;'>just text</span>"}); + } window.testCalendar.load(a); } @@ -156,6 +114,11 @@ eval('loadDataSet'+$F(Event.element(event))+'()'); } + +function changeMonth(v) { + if (v) window.testCalendar.nextMonth(); else window.testCalendar.prevMonth(); +} + //]]> </script> @@ -165,6 +128,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 /> <div id="calendar">Hello</div> </body> </html>