6 Replies Latest reply: May 23, 2012 3:43 AM by Sergey Tereshchenko RSS

Calendar tooltip functionality

Shimon Lifshitz Newbie

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

  • 1. Re: Calendar tooltip functionality
    Jay Balunas Master

    Hi Guys,

    Thanks for the effort and the source!

    Would it be possible for you to put this into a jira [ an existing one if it exists ]. Ideally as a patch for the current source, but if that is not possible just the updates above and any other information that would help us implement the changes.

    Can't guarantee when we'll get it into the code base, but having the information in a jira will certainly help us and other users that want to have the same functionality.

    Thanks,

  • 2. Re: Calendar tooltip functionality
    Shimon Lifshitz Newbie

    Never done it please give me some instrections or refernces

  • 3. Re: Calendar tooltip functionality
    Ilya Shaikovsky Master

    login to our jira

    https://jira.jboss.org/jira/browse/RF/

    with your jboss account. Then add your patch or code there(https://jira.jboss.org/jira/browse/RF-8157) as attachments.

    http://www.jboss.org/community/wiki/ContributingpatchtoRichFacesproject there is a description of patch creation in the end of the document.

  • 4. Re: Calendar tooltip functionality
    Ioana Iacob Newbie

    Nice, but it does not work properly (sometimes it does not disappear on mouseout, il 'flickers' on mousemove).. and it's quite a lot of  code..

     

    I used this:

     

    <rich:calendar value="#{bean.selectedDate}" dataModel="#{calendarDataModel}" 
                                     popup="false" showApplyButton="false" 
                                     cellWidth="50px" cellHeight="50px" 
                                     boundaryDatesMode="none" showWeeksBar="false" 
                                     id="organizer" 
                                     valueChangeListener="#{calendarDataModel.valueChanged}" 
                                     showFooter="false">
                                        <f:facet name="header">
                                                 <h:panelGroup>
                                                             <h:outputText value="#{bean.selectedDate}">
                                                                           <f:convertDateTime pattern="MMMM, yyyy" locale="#{UIConfigurationsBean.locale}" 
                                                                                                                           timeZone="#{UIConfigurationsBean.timeZone}" />
                                                             </h:outputText>
                                                   </h:panelGroup>                
              </f:facet>
                                        <a4j:outputPanel layout="block" styleClass="cell"  title="{toolTip}" >
                                                       <h:outputText value="{day}" />
                                        </a4j:outputPanel>
                           </rich:calendar>
    

     

    Tooltip is defined in the CalendarDataModelImpl, createDataModelItem method.

    Hope this helps.

     


    Hope this helps.

  • 5. Re: Calendar tooltip functionality
    Sergey Tereshchenko Newbie

    There is more simple solution, you can bind rich:toolTip with some of html components, which consistute rich:calendar.

    In my case I bind toolTip with native rich-faces image "CalendarPopupButton" in the calendar widget:pre

     

    <pre>

    </pre>

  • 6. Re: Calendar tooltip functionality
    Sergey Tereshchenko Newbie

    some issues with editing own post...

    continuation

    My solution:

     

    <rich:calendar
        value="#{backingBean.timePeriod}" id="${panelName}Calendar"
    </rich:calendar>

     

    <rich:toolTip id="${panelName}CalendarToolTip" value="Open Calendar"

         for="someForm:${panelName}CalendarPopupButton"  />

     

    Hope, it will be useful for someone.