6 Replies Latest reply on May 23, 2012 3:43 AM by pro4nist

    Calendar tooltip functionality

      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
          jbalunas

          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

            Never done it please give me some instrections or refernces

            • 3. Re: Calendar tooltip functionality
              ilya_shaikovsky

              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
                iimirela

                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
                  pro4nist

                  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
                    pro4nist

                    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.