Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: documented JQuery JS inclusion change, documented Fluid JS inclusion change
Tip

This page exists to document how to use the Jasig Calendar Portlet in Liferay. It is initially written as instructions for use with Liferay Enterprise Edition 5.2 SP3 and the trunk of the calendar portlet. Arguably, this documentation should be moved into the liferay contrib directory in source control associated with this portlet so that it can be versioned with the portlet.

Configuring the portlet to not include its own copy of JQuery and JQuery UI JavaScript

In Liferay, a version of JQuery and JQuery UI is already present and it doesn't work well for the portlet to include its own copy of these libraries. Fortunately, the portlet has a configuration parameter in portlet.xml to stop including its own copy of JQuery and JQuery UI.

Code Block
xml
xml

<!-- 
 Set includeJQuery to true to explicitly import jQuery and
 jQuery UI javascript libraries within the portlet.  When true,
 this setting will also cause the portlet to use jQuery's 
 noConflict feature in extreme mode.
                
 This setting should be set to "true" for uPortal 3.1 and above,
 and false for earlier uPortal versions or for Liferay.
 -->
 <preference>
   <name>includeJQuery</name>
   <value>false</value>
 </preference>

This portlet preference is set to "true" in the default portlet.xml. You need to change the setting to "false".

Modifying the JSPs to include Fluid

Unfortunately, the inclusion of Fluid Infusion is gated by the same preference as inclusion of JQuery and JQuery UI. While Liferay provides viable versions of JQuery and JQuery UI, it does not by default provide Fluid Infusion, so in Liferay the portlet needs to include this.

In each of the three JSP pages calendarMobileView.jsp, calendarNarrowView.jsp, and calendarWideView.jsp, change this:

Code Block
xml
xml

<c:if test="${includeJQuery}">
    <script type="text/javascript" src="<rs:resourceURL value="/rs/jquery/1.3.2/jquery-1.3.2.min.js"/>"></script>
    <script type="text/javascript" src="<rs:resourceURL value="/rs/jqueryui/1.7.2/jquery-ui-1.7.2.min.js"/>"></script>
    <script type="text/javascript" src="<rs:resourceURL value="/rs/fluid/1.1.2/js/fluid-all-1.1.2.min.js"/>"></script>
</c:if>

to this:

Code Block
xml
xml

<c:if test="${includeJQuery}">
    <script type="text/javascript" src="<rs:resourceURL value="/rs/jquery/1.3.2/jquery-1.3.2.min.js"/>"></script>
    <script type="text/javascript" src="<rs:resourceURL value="/rs/jqueryui/1.7.2/jquery-ui-1.7.2.min.js"/>"></script>
</c:if>

<script type="text/javascript" src="<rs:resourceURL value="/rs/fluid/1.1.2/js/fluid-all-1.1.2.min.js"/>"></script>

Fixing CSS so that the date selector UI does not escape its container

...