To customize icons and images in Calendar, you need to edit various JSP files and property files. The following sections describe various customizations that can be done in Calendar.
To change the order of the calendar toolbar icons, you need to modify the <calclient-dir>/ CalToolBarNormal.jsp file.
Figure 3–1 shows the default order of the Calendar Toolbar Icons.
Example 3–1 shows the default code used to display the Calendar Toolbar Icons in the order, New Event, New Task, Check Availability, Search for Calendar, Printable and Import/Export. The CalToolBarNormal.jsp file contains specific sections of code to display and perform actions each of the components in the tool bar. To change the order of the toolbar icons, you need to change the order in which they appear in the JSP file.
The code below is common to the CalToolBarNormal.jsp file.
<div class="Toolbar"> a name="toolbar"> </a> <script language="JavaScript" src="../uwc/js/define_images_cal.js"></script> <table border="0" cellspacing="0" cellpadding="0"> <tr>
The code for New Event icon starts here:
New Event <td nowrap> <a href="javascript:void(0)" accesskey="e" onMouseOver="over('newEvent')" onMouseOut="out('newEvent')" onClick="openWinAutoHeight ('<jato:text name="NewEventUrl" escape="false"/>','eventWin','scrollbars=yes, resizable=yes,width=700'); return false;"> <img name="newEvent" src="<%= getLocalizedLabel(session,"skinModel", "uwc-calclient-NewEventImage", "../uwc/images/LrlNewEvent_1_wo.gif") %>" width="24" height="24" align="absmiddle" border="0" title="<%= getLocalizedLabel(session, "uwc-calclient-toolbar-tooltip-NewEvent", "New Event") %>" alt="<%= getLocalizedLabel(session, "uwc-calclient-toolbar-tooltip-NewEvent", "New Event") %>"> </a> <a href="javascript:void(0)" title="<%= getLocalizedLabel(session,"uwc-calclient-toolbar-tooltip-NewEvent", "New Event") %>" class="ToolLbl" onClick="openWinAutoHeight('<jato:text name="NewEventUrl"scape="false"/>', 'eventWin','scrollbars=yes,resizable=yes,width=700'); return false;"> <%= getLocalizedLabel(session, "uwc-calclient-toolbar-NewEvent","New Event") %> </a> </td>
The code for New Task Event starts here:
New Task <td class="ToolbarItem" nowrap> <a href="javascript:void(0)" accesskey="t" onMouseOver="over('newTask')" onMouseOut="out('newTask')" onClick="openWinAutoHeight ('<jato:text name="NewTaskUrl" escape="false"/>','task','scrollbars=yes, resizable=yes,width=700'); return false;"> <img name="newTask" src="<%= getLocalizedLabel(session, "skinModel","uwc-calclient-NewTaskImage", "../uwc/images/LrlNewTask_1_wo.gif") %>" width="24" height="24" align="absmiddle" border="0" title="<%= getLocalizedLabel(session, "uwc-calclient-toolbar-tooltip-NewTask", "New Task") %>" alt="<%= getLocalizedLabel(session, "uwc-calclient-toolbar-tooltip-NewTask", "New Task") %>"> </a> <a href="javascript:void(0)" title="<%= getLocalizedLabel(session"uwc-calclient-toolbar-tooltip-NewTask", "New Task") %>" class="ToolLbl" onClick="openWinAutoHeight('<jato:text name="NewTaskUrl" escape="false"/>', 'task','scrollbars=yes,resizable=yes,width=700'); return false;"> <%= getLocalizedLabel(session, "uwc-calclient-toolbar-NewTask", "New Task") %> </a> </td>
The code for Check Availability icon starts here:
Check Availability <td class="ToolbarItem" nowrap> <a href="javascript: void(0)" accesskey="a" onMouseOver="over('checkAvail')" onMouseOut="out('checkAvail')" onClick="openWinAutoHeight ('<jato:text name="AvailabilityUrl" escape="false"/>''availability','scrollbars=yes, resizable=yes,width=800');return false;"> <img name="checkAvail" src="<%= getLocalizedLabel(session, "skinModel","uwc-calclient-CheckAvailabilityImage", "../uwc/images/LrlCheckAvail_1_wo.gif") %>" width="24" height="24" align="absmiddle" border="0" title="<%= getLocalizedLabel(session, "uwc-calclient-toolbar-tooltip-CheckAvailability", "Check Availability") %>" alt="<%= getLocalizedLabel(session,"uwc-calclient-toolbar-tooltip-CheckAvailability", "Check Availability") %>"> </a> <a href="javascript: void(0)" title="<%= getLocalizedLabel(session, "uwc-calclient-toolbar-tooltip-CheckAvailability", "Check Availability") %>" class="ToolLbl" onClick="openWinAutoHeight('<jato:text name="AvailabilityUrl" escape="false"/>' ,'availability','scrollbars=yes, resizable=yes,width=800'); return false;"> <%= getLocalizedLabel(session,"uwc-calclient-toolbar-CheckAvailability", "Check Availability") %> </a> </td>
The code for Search For Calendar icon starts here:
Search for Calendar <!-- Show SearchCalendar if and only if the parent view is not manage calendars --> <jato:content name="ShowSearchCalendars"> <td class="ToolbarItem" nowrap> <a href="javascript: void(0)" accesskey="s" onMouseOver="over('search')" onMouseOut="out('search')" onClick="openSearchForCalendarsPopup(); return false;"> <img name="search" src="<%= getLocalizedLabel(session, "skinModel", "uwc-common-SearchImage", "../uwc/images/LrlSearch_1_wo.gif") %>" width="24" height="24" align="absmiddle" border="0" title="<%= getLocalizedLabel(session, "uwc-calclient-toolbar-tooltip-SearchCalendar", "Search for Calendar") %>" alt="<%= getLocalizedLabel(session, "uwc-calclient-toolbar-tooltip-SearchCalendar", "Search for Calendar") %>"> </a> <a href="javascript: void(0)" title="<%= getLocalizedLabel(session, "uwc-calclient-toolbar-tooltip-SearchCalendar", "Search for Calendar") %>" class="ToolLbl" onClick="openSearchForCalendarsPopup(); return false;"> <%= getLocalizedLabel(session, "uwc-calclient-toolbar-SearchCalendar", "Search for Calendar") %> </a> </td> </jato:content>
The code for Printable icon starts here:
Printable <!-- Show Printable f and only if the parent view is not invitations --> <jato:content name="ShowPrintable"> <td class="ToolbarItem" nowrap> <a href="javascript: void(0)" onClick="openWinAutoHeight('<jato:text name="PrintUrl" escape="false"/>','print', 'menubar=yes, scrollbars=yes, resizable=yes, width=700, height=650'); return false;" accesskey="p" class="ToolLbl" onMouseOver="over('printable')" onMouseOut="out('printable')"> <img name="printable" src="<%= getLocalizedLabel(session, "skinModel", "uwc-common-PrintableImage", "../uwc/images/LrlPrintable_1_wo.gif") %>" width="24" height="24" align="absmiddle" border="0" title="<%= getLocalizedLabel(session, "uwc-calclient-toolbar-tooltip-Printable", "Display a Printable Page") %>" alt="<%= getLocalizedLabel(session, "uwc-calclient-toolbar-tooltip-Printable", "Display a Printable Page") %>"></a> <a href="javascript:void(0)" onClick="openWinAutoHeight('<jato:text name="PrintUrl" escape="false"/>', 'print', 'menubar=yes, scrollbars=yes, resizable=yes, width=700, height=650'); return false;" title="<%= getLocalizedLabel(session, "uwc-calclient-toolbar-tooltip-Printable", "Display a Printable Page") %>" class="ToolLbl"><%= getLocalizedLabel(session, "uwc-calclient-toolbar-Printable", "Printable") %></a></td> </jato:content>
The code for Import/Export icon starts here:
Import/Export <td class="ToolbarItem" nowrap> <a href="javascript: void(0)" accesskey="i" onMouseOver="over('importExport')" onMouseOut="out('importExport')" onClick="openWinAutoHeight('<jato:text name="ImportExportUrl" escape="false"/>','importexport',' scrollbars=yes, resizable=yes,width=700'); return false;"> <img name="importExport" src="<%= getLocalizedLabel(session, "skinModel","uwc-common-ImportExportImage", "../uwc/images/LrlImpExp_1_wo.gif") %>" width="24" height="24" align="absmiddle" border="0" title="<%= getLocalizedLabel(session, "uwc-calclient-toolbar-tooltip-ImportExport", "Import and Export Calendar") %>" alt="<%= getLocalizedLabel(session, "uwc-calclient-toolbar-tooltip-ImportExport", "Import and Export Calendar") %>"> </a> <a href="javascript: void(0)" title="<%= getLocalizedLabel(session,"uwc-calclient-toolbar-tooltip-ImportExport", "Import and Export Calendar") %>" class="ToolLbl" onClick="openWinAutoHeight('<jato:text name="ImportExportUrl" escape="false"/>', 'importexport','scrollbars=yes,resizable=yes,width=700'); return false;"> <%= getLocalizedLabel(session, "uwc-calclient-toolbar-ImportExport", "Import/Export") %> </a>
These instructions mark the end of the code.
</td> </tr> </table> </div>
In order to change the order of the icons, you need to move the sections specific to each icons around in the order you want them to appear. Please refer to Example 3–1, to change the order of the icons. For example to change the order of the icons from:
to:
perform the following steps:
Cut the section of code for New Task event and paste it above the instructions for New Event.
Cut the section of code for Printable and paste it after the instructions for New Event.
Cut the section of code for Search for Calendar and paste it after the instructions for Import/Export.
To customize the icons in Calendar views, you need to modify the themes.properties file located at <skin-dir>.
You can customize toolbars for all the main calendar views such as the following:
Day view
Week view
Month view
Year view
Events view
Invitations view
Tasks view
Manage calendar view
Table 3–1 shows the list of customizable icons: .
Table 3–1 Customizing Icons
Image |
Property name |
Description |
Value |
---|---|---|---|
Forward Icon |
uwc-calclient-Forward-Arrow-image |
Icon to view events or tasks in the next day, week, month, or year in a calendar |
forward.gif |
Backward Icon |
uwc-calclient-Back-Arrow-image |
Icon to view events or task in the previous day, week, month, or year in a calendar |
back.gif |
Select all Icon |
uwc-calclient-Select-All-image |
Icon to select all events or tasks on a page |
check_all.gif |
Unselect all Icon |
uwc-calclient-Deselect-All-image |
Icon to unselect all events or tasks on a page |
uncheck_all.gif |
Sort Down Non Selected Image |
uwc-common-Sort-Down-NonSelected-image |
Icon to sort down, in descending order, unselected events or tasks on a page |
sort_down_nonsel_che.gif |
Sort Down Selected Image |
uwc-common-Sort-Down-Selected-image |
Icon to sort down, in descending order, selected events or tasks on a page |
sort_down_sel.gif |
Sort Up Non Selected Image |
uwc-common-Sort-Up-NonSelected-image |
Icon to sort up, in ascending order, selected events or tasks on a page |
sort_up_nonsel.gif |
Sort Up Selected Image |
uwc-common-Sort-Up-Selected-image |
Icon to sort up, in ascending order, selected events or tasks on a page |
sort_up_sel.gif |
The property key names that define the location of the toolbar images are mentioned in Table 3–2
Table 3–2 Customizing the Calendar Toolbar Icons
Icon |
Property Name |
Description |
Value |
---|---|---|---|
New Event icon |
uwc-calclient-NewEventImage |
Icon to create a new event |
LrlNewEvent_1_wo.gif, |
New Task Icon |
uwc-calclient-NewTaskImage |
Icon to create a new task |
LrlNewTask_1_wo.gif |
Check Availability Icon |
uwc-calclient-CheckAvailabilityImage |
Icon to check availability of individuals before scheduling an event with them |
LrlCheckAvail_1_wo.gif |
Search Calendar Icon |
uwc-calclient-SearchImage |
Icon to search for a calendar |
LrlSearch_1_wo.gif |
Printable Icon |
uwc-calclient-PrintableImage |
Icon to print calendars, events, or tasks |
LrlPrintable_1_wo.gif |
Import/Export Icon |
uwc-calclient-ImportExportImage |
Icon to import and export calendar events and tasks between different calendars |
LrlImpExp_1_wo.gif |
The property key names that define the location of the task related informative icons mentioned in Table 3–3
You can customize informative icons or images such as the ones used for recurring, reminding, and public tasks for tasks and events.
Table 3–3 Customizing Task Related Informative Icons
Icon |
Property Name |
Description |
Value |
---|---|---|---|
Notify Image |
uwc-calclient-calclient-NotifyImage |
Icon that specifies that the creator of the event and the attendees will receive a notification before the event. The notification period can be specified by the creator of the event. |
LrlNotify_1.gif |
Recurring Image |
uwc-calclient-RecurringImage |
Icon that specifies that this is a recurring event |
LrlRecur_1.gif |
Public Image |
uwc-calclient-PublicImage |
Icon that specifies that this event is public and can be viewed by anyone visiting this calendar. |
LrlPrvPub_1.gif |
The Error Icon for Full Page Errors shows the customizable error icons for Full Page Errors
Table 3–4 Customizing Error Icon for Full Page Errors
Icon |
Property Name |
Description |
Value |
---|---|---|---|
Error Icon |
uwc-calclient-Error-Message-icon |
Icon that specifies that an error has occurred. |
Error_Large.gif |
Table 3–5 shows the customizable icons located in uwc/calclient/SearchCalendarData.jsp.
Table 3–5 Customizing Icons in Pop ups
Icon |
Property Name |
Description |
Value |
---|---|---|---|
Select All |
uwc-calclient-Select-All-image |
Icon to select all events or tasks on a page |
check_all.gif |
Unselect All |
uwc-calclient-Deselect-All-image |
Icon to unselect all events or tasks on a page |
uncheck_all.gif |
Subscribed Icon |
uwc-calclient-Subscribed-image |
Icon to subscribe to a specified calendar |
LrlSub_1.gif |
The file name including path is <calclient-dir> /CalSearchBarPagelet.jsp. Communications Express allows you to customize the Search for events label as shown in Search for Events
This is applicable for the following views:
Day view
Week view
Month view
Year view
Events manager
Besides these, you can change the text that appears besides the search events text box and also customize the overall layout.
To change the introductory text that is displayed adjacent to the search events text box, change the property uwc-calclient-toolbar-SearchForEvents in the resource bundle of <domain-dir>/en/i18n.properties.
Example 3–2 shows the code after modifying the resource bundle.
uwc-calclient-toolbar-SearchForEvents=<Customized Text> |