10:29 a.m.
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> </td><td>\'+day+\'</td></tr><tr><td> </td><td> </td></tr><tr><td
colspan="2">\'+text1+\'</td></tr><tr><td
colspan="2">\'+text2+\'</td></tr></table>\'';
+ //var cellMarkup =
'\'<table><tr><td> </td><td>\'+ev("day")+\'</td></tr><tr><td> </td><td> </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> </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();
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>