rich:calendar tooltip

[salman.riaz]

I am a new user to richfaces, I somehow managed to use calendar with datamodel, I am setting some item's tooltip but this tooltip is not being displayed on proper dates I set. I am using tooltipmode="batch".

[ilya_shaikovsky]

as you could see from our requirements doc and dev guide - we have no built-in tooltip in calendar component implemented yet.

[salman.riaz]

I saw the flexibility in DataModel for rich:calendar and implemented that, Please review the following code

package com.br.test.components;

import org.richfaces.model.CalendarDataModelItem;

public class DataModelItemImpl implements CalendarDataModelItem {
 private Object data;
 private String styleClass;
 private Object toolTip;
 private boolean enabled = true;

 public int getDay() {
 return 0;
 }

 /*
 * (non-Javadoc)
 *
 * @see org.richfaces.component.CalendarDataModelItem#getData()
 */
 public Object getData() {
 return data;
 }

 /*
 * (non-Javadoc)
 *
 * @see org.richfaces.component.CalendarDataModelItem#getStyleClass()
 */
 public String getStyleClass() {
 return styleClass;
 }

 /*
 * (non-Javadoc)
 *
 * @see org.richfaces.component.CalendarDataModelItem#getToolTip()
 */
 public Object getToolTip() {
 return toolTip;
 }

 /*
 * (non-Javadoc)
 *
 * @see org.richfaces.component.CalendarDataModelItem#hasToolTip()
 */
 public boolean hasToolTip() {
 return getToolTip() != null;
 }

 /*
 * (non-Javadoc)
 *
 * @see org.richfaces.component.CalendarDataModelItem#isEnabled()
 */
 public boolean isEnabled() {
 return enabled;
 }

 /**
 * @param data
 * the data to set
 */
 public void setData(Object data) {
 this.data = data;
 }

 /**
 * @param styleClass
 * the styleClass to set
 */
 public void setStyleClass(String styleClass) {
 this.styleClass = styleClass;
 }

 /**
 * @param toolTip
 * the toolTip to set
 */
 public void setToolTip(Object toolTip) {
 this.toolTip = toolTip;
 }

 /**
 * @param enabled
 * the enabled to set
 */
 public void setEnabled(boolean enabled) {
 this.enabled = enabled;
 }
}

Here is the session level managed bean with the name sTestBean

/**
 *
 */
package com.br.test.managedbean;

import java.text.DateFormat;
import java.util.Calendar;
import java.util.Date;
import java.util.HashMap;
import java.util.Locale;
import java.util.Map;

import org.richfaces.component.html.HtmlCalendar;
import org.richfaces.model.CalendarDataModel;
import org.richfaces.model.CalendarDataModelItem;

import com.br.test.components.DataModelItemImpl;

/**
 * @author SR
 *
 */
public class TestBean implements CalendarDataModel {

 private HtmlCalendar eventsCalendarControl = new HtmlCalendar();

 public HtmlCalendar getEventsCalendarControl() {
 return eventsCalendarControl;
 }

 public void setEventsCalendarControl(HtmlCalendar eventsCalendarControl) {
 this.eventsCalendarControl = eventsCalendarControl;
 }

 public TestBean() {
 }

 public CalendarDataModelItem[] getData(Date[] dates) {
 if (dates == null) {
 return null;
 }

 CalendarDataModelItem[] items = new CalendarDataModelItem[dates.length];
 for (int i = 0; i < dates.length; i++) {
 items = createDataModelItem(dates);
 }
 return items;
 }

 protected CalendarDataModelItem createDataModelItem(Date date) {
 DataModelItemImpl item = new DataModelItemImpl();
 Map data = new HashMap();
 DateFormat enFormatter = DateFormat.getDateInstance(DateFormat.MEDIUM,
 Locale.ENGLISH);
 DateFormat frFormatter = DateFormat.getDateInstance(DateFormat.MEDIUM,
 Locale.FRENCH);
 DateFormat deFormatter = DateFormat.getDateInstance(DateFormat.MEDIUM,
 Locale.GERMAN);
 data.put("enLabel", enFormatter.format(date));
 data.put("frLabel", frFormatter.format(date));
 data.put("deLabel", deFormatter.format(date));
 item.setData(data);

 Calendar calendar = Calendar.getInstance();
 calendar.setTime(date);

 if (calendar.get(Calendar.DAY_OF_MONTH) % 4 == 0) {
 item.setToolTip("Divisible By 4");
 } else {
 item.setToolTip("Not Divisible By 4");
 }
 return item;
 }

 public Object getToolTip(Date date) {
 Calendar calendar = Calendar.getInstance();
 calendar.setTime(date);

 if (calendar.get(Calendar.DAY_OF_MONTH) % 4 == 0) {
 return "Containts Activities";
 }
 return "No activity";
 }

 public Date getDateRangeBegin() {
 Calendar beginDate = Calendar.getInstance();
 beginDate.add(Calendar.MONDAY, -6);
 return beginDate.getTime();
 }

 public Date getDateRangeEnd() {
 Calendar endDate = Calendar.getInstance();
 endDate.add(Calendar.MONDAY, 6);
 return endDate.getTime();
 }
}

With the following JSF Page

<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<%@ taglib prefix="a4j" uri="http://richfaces.org/a4j"%>
<%@ taglib prefix="rich" uri="http://richfaces.org/rich"%>

<html>
<head>
<title></title>
</head>
<body>
<f:view>
 <rich:panel>
 <h:outputText value="Testing..."></h:outputText>
 <rich:calendar popup="false" binding="#{sTestBean.eventsCalendarControl}" dataModel="#{sTestBean}"
 datePattern="MMM d, yyyy" toolTipMode="batch">
 </rich:calendar>
 </rich:panel>
</f:view>
</body>
</html>

I can see the following output in html for calendar

<script type="text/javascript">
new Calendar('j_id_jsp_1979456039_3', {dayListTableId: 'j_id_jsp_1979456039_3Day',
weekNumberBarId: 'j_id_jsp_1979456039_3WeekNum',
weekDayBarId: 'j_id_jsp_1979456039_3WeekDay',
currentDate: new Date(2008,4,5),
selectedDate: null,
datePattern: 'MMM d, yyyy',
jointPoint: 'bottom-left',
direction: 'bottom-right',
toolTipMode:'batch',
boundaryDatesMode:'inactive',
popup: false,
enableManualInput: false,
showInput: true,
disabled: false,
ajaxSingle: true,
verticalOffset:0,
horizontalOffset: 0,
style:'z-index: 3; ',
firstWeekDay: 0,
minDaysInFirstWeek: 1,
todayControlMode:'select',
showHeader:true,
showFooter:true,
showWeeksBar:true,
showWeekDaysBar:true,
showApplyButton:false,
labels:{apply:'Apply', today:'Today', clean:'Clean', ok:'OK', cancel:'Cancel', close:'x'},
'monthLabels': ['January','February','March','April','May','June','July','August','September','October','November','December'] ,
'monthLabelsShort': ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'] ,
'weekDayLabels': ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'] ,
'weekDayLabelsShort': ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'] }).load({'startDate':new Date(2008,4,1),'days':[{'data':{'deLabel':'01.05.2008','frLabel':'1 mai 2008','enLabel':'May 1, 2008'} ,'day':0,'enabled':true,'styleClass':null,'toolTip':'Not Divisible By 4'} ,{'data':{'deLabel':'02.05.2008','frLabel':'2 mai 2008','enLabel':'May 2, 2008'} ,'day':0,'enabled':true,'styleClass':null,'toolTip':'Not Divisible By 4'} ,{'data':{'deLabel':'03.05.2008','frLabel':'3 mai 2008','enLabel':'May 3, 2008'} ,'day':0,'enabled':true,'styleClass':null,'toolTip':'Not Divisible By 4'} ,{'data':{'deLabel':'04.05.2008','frLabel':'4 mai 2008','enLabel':'May 4, 2008'} ,'day':0,'enabled':true,'styleClass':null,'toolTip':'Divisible By 4'} ,{'data':{'deLabel':'05.05.2008','frLabel':'5 mai 2008','enLabel':'May 5, 2008'} ,'day':0,'enabled':true,'styleClass':null,'toolTip':'Not Divisible By 4'} ,{'data':{'deLabel':'06.05.2008','frLabel':'6 mai 2008','enLabel':'May 6, 2008'} ,'day':0,'enabled':true,'styleClass':null,'toolTip':'Not Divisible By 4'} ,{'data':{'deLabel':'07.05.2008','frLabel':'7 mai 2008','enLabel':'May 7, 2008'} ,'day':0,'enabled':true,'styleClass':null,'toolTip':'Not Divisible By 4'} ,{'data':{'deLabel':'08.05.2008','frLabel':'8 mai 2008','enLabel':'May 8, 2008'} ,'day':0,'enabled':true,'styleClass':null,'toolTip':'Divisible By 4'} ,{'data':{'deLabel':'09.05.2008','frLabel':'9 mai 2008','enLabel':'May 9, 2008'} ,'day':0,'enabled':true,'styleClass':null,'toolTip':'Not Divisible By 4'} ,{'data':{'deLabel':'10.05.2008','frLabel':'10 mai 2008','enLabel':'May 10, 2008'} ,'day':0,'enabled':true,'styleClass':null,'toolTip':'Not Divisible By 4'} ,{'data':{'deLabel':'11.05.2008','frLabel':'11 mai 2008','enLabel':'May 11, 2008'} ,'day':0,'enabled':true,'styleClass':null,'toolTip':'Not Divisible By 4'} ,{'data':{'deLabel':'12.05.2008','frLabel':'12 mai 2008','enLabel':'May 12, 2008'} ,'day':0,'enabled':true,'styleClass':null,'toolTip':'Divisible By 4'} ,{'data':{'deLabel':'13.05.2008','frLabel':'13 mai 2008','enLabel':'May 13, 2008'} ,'day':0,'enabled':true,'styleClass':null,'toolTip':'Not Divisible By 4'} ,{'data':{'deLabel':'14.05.2008','frLabel':'14 mai 2008','enLabel':'May 14, 2008'} ,'day':0,'enabled':true,'styleClass':null,'toolTip':'Not Divisible By 4'} ,{'data':{'deLabel':'15.05.2008','frLabel':'15 mai 2008','enLabel':'May 15, 2008'} ,'day':0,'enabled':true,'styleClass':null,'toolTip':'Not Divisible By 4'} ,{'data':{'deLabel':'16.05.2008','frLabel':'16 mai 2008','enLabel':'May 16, 2008'} ,'day':0,'enabled':true,'styleClass':null,'toolTip':'Divisible By 4'} ,{'data':{'deLabel':'17.05.2008','frLabel':'17 mai 2008','enLabel':'May 17, 2008'} ,'day':0,'enabled':true,'styleClass':null,'toolTip':'Not Divisible By 4'} ,{'data':{'deLabel':'18.05.2008','frLabel':'18 mai 2008','enLabel':'May 18, 2008'} ,'day':0,'enabled':true,'styleClass':null,'toolTip':'Not Divisible By 4'} ,{'data':{'deLabel':'19.05.2008','frLabel':'19 mai 2008','enLabel':'May 19, 2008'} ,'day':0,'enabled':true,'styleClass':null,'toolTip':'Not Divisible By 4'} ,{'data':{'deLabel':'20.05.2008','frLabel':'20 mai 2008','enLabel':'May 20, 2008'} ,'day':0,'enabled':true,'styleClass':null,'toolTip':'Divisible By 4'} ,{'data':{'deLabel':'21.05.2008','frLabel':'21 mai 2008','enLabel':'May 21, 2008'} ,'day':0,'enabled':true,'styleClass':null,'toolTip':'Not Divisible By 4'} ,{'data':{'deLabel':'22.05.2008','frLabel':'22 mai 2008','enLabel':'May 22, 2008'} ,'day':0,'enabled':true,'styleClass':null,'toolTip':'Not Divisible By 4'} ,{'data':{'deLabel':'23.05.2008','frLabel':'23 mai 2008','enLabel':'May 23, 2008'} ,'day':0,'enabled':true,'styleClass':null,'toolTip':'Not Divisible By 4'} ,{'data':{'deLabel':'24.05.2008','frLabel':'24 mai 2008','enLabel':'May 24, 2008'} ,'day':0,'enabled':true,'styleClass':null,'toolTip':'Divisible By 4'} ,{'data':{'deLabel':'25.05.2008','frLabel':'25 mai 2008','enLabel':'May 25, 2008'} ,'day':0,'enabled':true,'styleClass':null,'toolTip':'Not Divisible By 4'} ,{'data':{'deLabel':'26.05.2008','frLabel':'26 mai 2008','enLabel':'May 26, 2008'} ,'day':0,'enabled':true,'styleClass':null,'toolTip':'Not Divisible By 4'} ,{'data':{'deLabel':'27.05.2008','frLabel':'27 mai 2008','enLabel':'May 27, 2008'} ,'day':0,'enabled':true,'styleClass':null,'toolTip':'Not Divisible By 4'} ,{'data':{'deLabel':'28.05.2008','frLabel':'28 mai 2008','enLabel':'May 28, 2008'} ,'day':0,'enabled':true,'styleClass':null,'toolTip':'Divisible By 4'} ,{'data':{'deLabel':'29.05.2008','frLabel':'29 mai 2008','enLabel':'May 29, 2008'} ,'day':0,'enabled':true,'styleClass':null,'toolTip':'Not Divisible By 4'} ,{'data':{'deLabel':'30.05.2008','frLabel':'30 mai 2008','enLabel':'May 30, 2008'} ,'day':0,'enabled':true,'styleClass':null,'toolTip':'Not Divisible By 4'} ,{'data':{'deLabel':'31.05.2008','frLabel':'31 mai 2008','enLabel':'May 31, 2008'} ,'day':0,'enabled':true,'styleClass':null,'toolTip':'Not Divisible By 4'} ] } );
</script>

Here you can see that the source of that jsf page rendered contains the tooltip text which I have put on the mentioned criteria dates but the rendered calendar doesn't show the baloon tooltip with the proper text. Actually the problem is it is (the tooltip) not being shown.
I think I am missing something like showTooltip="true" but I didn't see any such flag or property.

[salman.riaz]

I also read somewhere that toolTipMode="batch" will load all the tooltip data at once while loading the calendar for the very first time. Similarly there are two other modes like "single" and "none".
What I understand is, If I use "single" mode then every time I mouseover a date in calendar then using ajax it will call [public Object getToolTip(Date date)] method from DataModel class I made. But this solution is also not working.
There must be some work around for such senario as I have implemented the different style sheets on some selected dates using cust datamodel but this tooltip issue is still pending.

[shadukan]

I can acknowledge the same behaviour.I think the problem is that toolTip isn't supported.I
have tried various ways to do that but still nothing came up riaz. The question is why then the expose toolTip in the tag or the API.?

[shadukan]

Moreover i would like to add that the problem maybe is because there is no way to ensure
unique id in toolTips inside the calendar organizer.What i tried is just to add inside the
h:panelGrid where i display the info also one rich:toolTip and add an onmouse over action
with rich:component('toolTips')}.show()....and there i got the error that there is now id for such element inside the jsf tree view with such and id.?Any workaround discovered?!!I also
tried the added oninputmouseover event but nothing also happend...

[nbelaevski]

Hello,

Sorry, these attributes are not implemented. They will be removed from documentation: https://jira.jboss.org/jira/browse/RF-6277

[shimonl97]

Just to make sure, does toolTip works in any way in calendar?
The methods in Java calendar model are still exist in version 3.3.X
Is there any plan to activate it?

[ilya_shaikovsky]

shimonl97, probably for 4.x only. we plan stabilization activities only for 3.3.x

[shimonl97]

Hi 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

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