Author: pyaschenko Date: 2007-06-20 10:59:14 -0400 (Wed, 20 Jun 2007) New Revision: 1237 Modified: trunk/sandbox/calendar/design/calendar-js/calendar-prototype.js trunk/sandbox/calendar/design/calendar-js/calendar-xhtml.html Log: "today" and "selected date" selection added. Some improvements and optimisation Modified: trunk/sandbox/calendar/design/calendar-js/calendar-prototype.js =================================================================== --- trunk/sandbox/calendar/design/calendar-js/calendar-prototype.js 2007-06-20 14:18:54 UTC (rev 1236) +++ trunk/sandbox/calendar/design/calendar-js/calendar-prototype.js 2007-06-20 14:59:14 UTC (rev 1237) @@ -14,7 +14,7 @@ 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) ) + while (!element[attribute] || (flag ? element[attribute].startsWith(value)==0 : element[attribute]!=value) ) { element = element.parentNode; } @@ -81,37 +81,32 @@ // 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.params = parameters; + this.currentDate = this.params.currentDate; + this.selectedDate = this.params.selectedDate; + + this.todayDate = new Date(); - 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.selectedDateElement; - this.firstWeekendDayNumber = 6-this.firstWeekDay; - this.secondWeekendDayNumber = (this.firstWeekDay>0 ? 7-this.firstWeekDay : 0); + this.firstWeekendDayNumber = 6-this.params.firstWeekDay; + this.secondWeekendDayNumber = (this.params.firstWeekDay>0 ? 7-this.params.firstWeekDay : 0); this.daysData = {startDate:null, days:[]}; + this.days = []; - 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'; + var htmlTextHeader = '<div id="div_'+this.params.dayListTableId+'"></div><table cellspacing="0" border="1" frame="void" rules="all" id="'+this.params.dayListTableId+'">\n'; + var htmlTextFooter = '</table><div id="div_'+this.params.dayListTableId+'_selected_date"></div>\n'; // days bar creation - var htmlTextWeekDayBar = '<tr id="'+parameters.weekDayBarId+'"><td style="border-top:0px"></td>'; - var weekDayCounter = this.firstWeekDay; + var htmlTextWeekDayBar = '<tr id="'+this.params.weekDayBarId+'"><td style="border-top:0px"></td>'; + var weekDayCounter = this.params.firstWeekDay; for (var i=0;i<7;i++) { - var weekDayHtml = this.weekDayMarkup( {weekDay: this.weekDayLabels[weekDayCounter]} ); + var weekDayHtml = this.params.weekDayMarkup( {weekDay: this.params.weekDayLabels[weekDayCounter]} ); if (weekDayCounter==6) weekDayCounter=0; else weekDayCounter++; - htmlTextWeekDayBar+='<td id="'+parameters.weekDayBarId+i+'" class="'+(i==this.firstWeekendDayNumber || i==this.secondWeekendDayNumber ? "Weekendclass" : "Dayclass")+'">'+weekDayHtml+'</td>'; + htmlTextWeekDayBar+='<td id="'+this.params.weekDayBarId+i+'" class="'+(i==this.firstWeekendDayNumber || i==this.secondWeekendDayNumber ? "Weekendclass" : "Dayclass")+'">'+weekDayHtml+'</td>'; } htmlTextWeekDayBar+='</tr>\n'; @@ -122,12 +117,12 @@ for (k=1;k<7;k++) { - var weekNumberHtml = this.weekNumberMarkup( {weekNumber: k} ); + var weekNumberHtml = this.params.weekNumberMarkup( {weekNumber: k} ); - htmlTextWeek+='<tr><td id="'+parameters.weekNumberBarId+k+'">'+weekNumberHtml+'</td>'; + htmlTextWeek+='<tr><td id="'+this.params.weekNumberBarId+k+'">'+weekNumberHtml+'</td>'; for (var i=0;i<7;i++) { - htmlTextWeek+='<td id="'+this.dayListTableId+'_cell'+(p++)+'" style="vertical-align:top" class="'+(i==this.firstWeekendDayNumber || i==this.secondWeekendDayNumber ? "Weekenddayclass" : "Commondayclass")+'"></td>'; + htmlTextWeek+='<td id="'+this.params.dayListTableId+'_cell'+(p++)+'" style="vertical-align:top"></td>'; } htmlTextWeek+='</tr>'; } @@ -140,6 +135,10 @@ obj.innerHTML }, + isWeekend: function(weekday) { + return (weekday == this.firstWeekendDayNumber || weekday == this.secondWeekendDayNumber); + }, + prepareEvents: function() { this.eventCellOnClick = this.eventCellOnClick.bindAsEventListener(this); this.eventCellOnMouseOver = this.eventCellOnMouseOver.bindAsEventListener(this); @@ -152,31 +151,49 @@ 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); + Event.stopObserving(obj, "click", this.eventCellOnClick, false); + Event.stopObserving(obj, "mouseover", this.eventCellOnMouseOver, false); + Event.stopObserving(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(); + var idstr = this.params.dayListTableId+'_cell'; + var obj = Event.findElementByAttr(e, "TD", "id", idstr, true); + if (obj) + { + var daydata = this.days[parseInt(obj.id.substr(idstr.length))]; + if (daydata._month==0) + { + this.selectedDate=new Date(this.currentDate); + this.selectedDate.setDate(obj.data); + if (this.selectedDateElement) Element.removeClassName(this.selectedDateElement, "Selecteddayclass"); + this.selectedDateElement = obj; + Element.addClassName(obj, "Selecteddayclass"); + + $('div_'+this.params.dayListTableId+'_selected_date').innerHTML=obj.data+"/"+(this.currentDate.getMonth()+1)+"/"+this.currentDate.getFullYear(); + } else { + if (daydata._month==-1) this.prevMonth(); else this.nextMonth(); + } + } }, eventCellOnMouseOver: function (e) { - var obj = Event.findElementByAttr(e, "TD", "id", this.dayListTableId+'_cell',true); + var idstr = this.params.dayListTableId+'_cell'; + var obj = Event.findElementByAttr(e, "TD", "id", idstr, true); if (obj) { - if (Element.hasClassName(obj,"Commondayclass")) Element.replaceClassName(obj,"Commondayclass", "Hovereddayclass"); - else if (Element.hasClassName(obj,"Weekenddayclass")) Element.replaceClassName(obj,"Weekenddayclass", "Hoveredweekclass"); + var daydata = this.days[parseInt(obj.id.substr(idstr.length))]; + if (daydata._month==0 && Element.hasClassName(obj,daydata._className)) Element.replaceClassName(obj,daydata._className, daydata._hoverClassName); } }, eventCellOnMouseOut: function (e) { - var obj = Event.findElementByAttr(e, "TD", "id", this.dayListTableId+'_cell',true); + var idstr = this.params.dayListTableId+'_cell'; + var obj = Event.findElementByAttr(e, "TD", "id", idstr, true); if (obj) { - if (Element.hasClassName(obj,"Hovereddayclass")) Element.replaceClassName(obj, "Hovereddayclass", "Commondayclass"); - else if (Element.hasClassName(obj,"Hoveredweekclass")) Element.replaceClassName(obj, "Hoveredweekclass", "Weekenddayclass"); + var daydata = this.days[parseInt(obj.id.substr(idstr.length))]; + if (daydata._month==0 && Element.hasClassName(obj,daydata._hoverClassName)) Element.replaceClassName(obj,daydata._hoverClassName, daydata._className); } }, @@ -216,25 +233,31 @@ }, update:function() { + this.todayDate = new Date(); - //this.currentDate = daysData.startDate; var currentYear = this.currentDate.getFullYear(); var currentMonth = this.currentDate.getMonth(); + + var todayflag = (currentYear == this.todayDate.getFullYear() && currentMonth == this.todayDate.getMonth()); + var todaydate = this.todayDate.getDate(); + + var selectedflag = (currentYear == this.selectedDate.getFullYear() && currentMonth == this.selectedDate.getMonth()) + var selecteddate = this.selectedDate.getDate(); - var dateDiv = $("div_"+this.dayListTableId); + var dateDiv = $("div_"+this.params.dayListTableId); dateDiv.innerHTML = currentYear + "/" + (currentMonth+1); - var wd = getDay(this.currentDate, this.firstWeekDay); + var wd = getDay(this.currentDate, this.params.firstWeekDay); var currentMonthDays = daysInMonthByDate(this.currentDate); var previousMonthDays = daysInMonth(currentYear, currentMonth-1); - var wn = weekNumber(currentYear, currentMonth, this.minDaysInFirstWeek, this.firstWeekDay) /// fix it + var wn = weekNumber(currentYear, currentMonth, this.params.minDaysInFirstWeek, this.params.firstWeekDay) /// fix it var p=0; - var days = []; + this.days = []; var dayCounter = previousMonthDays - wd + 1; // previuos month days - if (wd>0) while (dayCounter<=previousMonthDays) {days.push({day:dayCounter++}); p++; } + if (wd>0) while (dayCounter<=previousMonthDays) {this.days.push({day:dayCounter, _isWeekend: this.isWeekend(p), _month:-1, _className:"Disableddayclass"}); dayCounter++; p++; } dayCounter = 1; // current month days @@ -242,39 +265,78 @@ { var idx = this.daysData.index[currentYear+'-'+currentMonth]; var firstDay = this.daysData.days[idx].day; - while (dayCounter<firstDay) { days.push({day:dayCounter++}); p++; } + while (dayCounter<firstDay) + { + if (this.isWeekend(p%7)) + this.days.push({day:dayCounter, _isWeekend: true, _month:0, _className:"Weekenddayclass", _hoverClassName:"Hoveredweekclass"}); + else + this.days.push({day:dayCounter, _isWeekend: false, _month:0, _className:"Commondayclass", _hoverClassName:"Hovereddayclass"}); + + 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++; } + var obj; + var flag; + while (idx<len && dayCounter<=currentMonthDays) + { + flag = this.isWeekend(p%7); + obj = this.daysData.days[idx]; + obj._isWeekend = flag; + obj._month = 0; + if (flag) {obj._className = "Weekenddayclass"; obj._hoverClassName = "Hoveredweekclass";} + else {obj._className = "Commondayclass"; obj._hoverClassName = "Hovereddayclass";} + this.days.push(obj); + idx++; + dayCounter++; + p++; + } + } + while (dayCounter<=currentMonthDays) + { + if (this.isWeekend(p%7)) + this.days.push({day:dayCounter, _isWeekend: true, _month:0, _className:"Weekenddayclass", _hoverClassName:"Hoveredweekclass"}); + else + this.days.push({day:dayCounter, _isWeekend: false, _month:0, _className:"Commondayclass", _hoverClassName:"Hovereddayclass"}); + dayCounter++; + p++; + } dayCounter = 1; // next month days var ld = 7-p%7; - if (ld!=7) while (dayCounter<=ld) { days.push({day:dayCounter++}); } + if (ld!=7) while (dayCounter<=ld) { this.days.push({day:dayCounter++, _isWeekend: this.isWeekend(p%7), _month:1, _className:"Disableddayclass"}); } // render p=0; + var element; + var dataobj; + this.selectedDayElement=null; for (var k=1;k<7;k++) { // - var obj = $(this.weekNumberBarId+k).parentNode; + var obj = $(this.params.weekNumberBarId+k).parentNode; - obj.childNodes[0].innerHTML = (days[p]) ? this.weekNumberMarkup( {weekNumber: wn++} ) : ""; - - for (var i=1;i<obj.childNodes.length;i++) + element = obj.firstChild; + element.innerHTML = (this.days[p]) ? this.params.weekNumberMarkup( {weekNumber: wn++} ) : ""; + + while (element=element.nextSibling) { - this.stopCellEvents(obj.childNodes[i]); + // TODO fix start/stop event's calls + this.stopCellEvents(element); - if (days[p]) { - this.setCellEvents(obj.childNodes[i]); - obj.childNodes[i].data=days[p].day; - obj.childNodes[i].innerHTML = this.dayListMarkupArray[p]( days[p++] ); + if (this.days[p]) { + dataobj = this.days[p]; + element.data=dataobj.day; + element.innerHTML = this.params.dayListMarkupArray[p]( dataobj ); + element.className = dataobj._className + (todayflag /*&& dataobj._month==0 */&& dataobj.day==todaydate ? " Todayclass" : ""); + if (selectedflag && dataobj._month==0 && dataobj.day==selecteddate) { this.selectedDateElement = element; element.className+=" Selecteddayclass"; } + this.setCellEvents(element); + p++; } else { - obj.childNodes[i].innerHTML = ""; + //element.data=""; + element.innerHTML = ""; } } } @@ -292,9 +354,20 @@ 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(); + var nowyear = now.getFullYear(); + var nowmonth = now.getMonth(); + var nowdate = now.getDate(); + var updateflag = false; + + if (nowdate!=this.todayDate.getDate()) {updateflag=true; this.todayDate = now;} + + if (nowyear != this.currentDate.getFullYear() || nowmonth != this.currentDate.getMonth() ) + { + updateflag = true; + this.currentDate = new Date(nowyear, nowmonth, 1); + } + + if (updateflag) 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-20 14:18:54 UTC (rev 1236) +++ trunk/sandbox/calendar/design/calendar-js/calendar-xhtml.html 2007-06-20 14:59:14 UTC (rev 1237) @@ -31,6 +31,13 @@ .Disableddayclass { color:gray; } +.Todayclass { + background-color: #f0f0f0; +} +.Selecteddayclass { + background-color: #f08080; +} + </style> <script src="prototype-1.5.1.js" type="text/javascript"></script> @@ -154,9 +161,11 @@ </head> <body onload="createCalendar();"> +<!-- <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><button onclick="today()">Today</button><br /> <div id="calendar">Hello</div> </body>