| 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. |
Fixing CSS so that the date selector UI does not escape its container
There's a problem with the CSS inherited by the portlet when used in Liferay, such that this CSS is evident:
| Code Block |
|---|
.ui-datepicker-inline {
border: 0 none;
display: block;
float: left;
}
|
The problem here is that float.
Adding this to the calendar.css of the Calendar Portlet overrides that float and corrects the problem.
| Code Block |
|---|
/* Liferay-specific fix for calendar jQuery widget escaping its container */
.upcal-miniview .ui-datepicker-inline, .upcal-fullview .ui-datepicker-inline { float: none }
|
Configuring the portlet to not include its own copy of JQuery and JQuery UI JavaScript
...
| Code Block | ||||
|---|---|---|---|---|
| ||||
<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
There's a problem with the CSS inherited by the portlet when used in Liferay, such that this CSS is evident:
| Code Block |
|---|
.ui-datepicker-inline { border: 0 none; display: block; float: left; } |
The problem here is that float.
Adding this to the calendar.css of the Calendar Portlet overrides that float and corrects the problem.
| Code Block |
|---|
/* Liferay-specific fix for calendar jQuery widget escaping its container */
.upcal-miniview .ui-datepicker-inline, .upcal-fullview .ui-datepicker-inline { float: none }
|
...
Including Fluid CSS
TODO: Document this