Calendar tooltip functionality
shimonl97 Nov 22, 2009 6:11 AMHi all,
We manage to activate the "unimplemented" tooltip functionality for calendar cell.
Fix was based on the fact that all framework exists and the only piece missing is the JS implementation.
In our fixed we "patched" Calendar JavaScript by adding our JS and adding the missing parts.
Requirements:
Implement getToolTip() in CalendarDataModelItem interface
Add CSS styles: rich-calendar-cell-tooltip and rich-calendar-cell-tooltip-cnt
Add CSS styles: rich-calendar-cell-tooltip and rich-calendar-cell-tooltip-cnt
The JS script:
var ttPrefix = '<span'; var ttPrefixInner = ttPrefix+' class=\"rich-calendar-cell-tooltip\">'; var ttPrefixCnt = ttPrefix+' class=\"rich-calendar-cell-tooltip-cnt\">'; var ttSuffix = '</span>'; function showToolTip(obj, toolTip){ obj.innerHTML = obj.innerHTML +ttPrefixCnt+ ttPrefixInner + toolTip + ttSuffix+ttSuffix ; } function hideToolTip(obj){ var index = obj.innerHTML.toLowerCase().indexOf(ttPrefix.toLowerCase(),0); if(index>=0){ obj.innerHTML = obj.innerHTML.substr(0,index); } } if(typeof CalendarView !="undefined"){ Object.extend(Calendar.prototype, { eventCellOnMouseOver : function(e, obj) { var daydata = this.days[parseInt(obj.id .substr(this.DATE_ELEMENT_ID.length), 10)]; if (this.invokeEvent("datemouseover", obj, e, daydata.date) && daydata.enabled) { if (daydata._month == 0 && obj.id != this.selectedDateCellId && obj.id != this.todayCellId) { Element.addClassName(obj, 'rich-calendar-hover'); } if (daydata._month == 0 && obj.id != this.todayCellId) { var toolTip=daydata.toolTip; if(toolTip!=null){ showToolTip(obj,toolTip); } } } } }) Object.extend(Calendar.prototype, { eventCellOnMouseOut: function (e, obj) { var daydata = this.days[parseInt(obj.id.substr(this.DATE_ELEMENT_ID.length),10)]; if (this.invokeEvent("datemouseout", obj, e, daydata.date) && daydata.enabled) { if (daydata._month==0 && obj.id!=this.selectedDateCellId && obj.id!=this.todayCellId) Element.removeClassName(obj,'rich-calendar-hover'); } hideToolTip(obj); } }) }
The css can be defined according to specific requirements but must include:
.rich-calendar-cell-tooltip{ position: absolute; display: block; } .rich-calendar-cell-tooltip-cnt{ position: relative; display: block; }
Hope it will help.
of course if jboss team wants to integrate it in richfaces core they r more the welcome.
Will be happy to answer any question about the script.
Shimon and Alex