This chapter provides several examples for customizing the calendar service in Oracle Communications Convergence.
To perform any Convergence customization, you should have expert knowledge in dojo and knowledge of UI customization. For more information on general Convergence customization, see "Technical Overview".
Nearly all customization examples require the same setup and preparation.
You start by verifying that the c11n_Home directory exists. If it does not exist, create it.
See "Customization Directory Structure" for more information.
Next, you verify that customization is enabled in Convergence. If customization is disabled, enable it.
See "Enabling Customization in the Convergence Server" for more information.
When you have completed your customization, you must restart the GlassFish server for Convergence.
See Convergence System Administrator’s Guide for more information.
Currently, a long title on an event or task is truncated and appended with ellipses. This Convergence customization example describes how to display the complete title in the calendar list views (agenda/invitations/tasks) for events and tasks with long titles.
Verify that the c11n_Home directory exists. If c11n_Home does not exist, create it.
Verify that customization is enabled in Convergence. If customization is disabled, enable it.
In c11n_Home, verify that the following directories exist. If they do not exist, create them:
/c11n_Home/allDomain/layout/css/calendar/
In c11n_Home, verify that config.js exists. If it does not exist, create it.
Modify config.js so that it enables JavaScript customization (jsEnabled: true) across all domains (module: "allDomain").
dojo.provide("c11n.config");
c11n.config = {
// allDomain configuration
allDomain: {
module: "allDomain", // module name
themeEnabled: false, // true if theme is customized
i18nEnabled: false, // true if i18n is customized
jsEnabled: true // true if js is customized
// the last entry must not end with comma
}
}
In the c11n_Home/allDomain/layout/css/calendar, create or modify ListView.css with the following code:
.CalendarListItemTask-Title h3 {
white-space: normal;
word-break: break-all;
height: auto;
}
.CalendarListItemEvent h3 {
height: auto;
}
.CalendarListItemEvent-Title h3 {
white-space: normal;
word-break: break-all;
}
In c11n_Home/allDomain/js, create or modify customize.js (the domain specific customization) to include the following code:
dojo.provide("c11n.allDomain.js.customize");
// Load Customized CSS File Helper
var loadCustomizedCssFile = function(url, id) {
if (!id){
id = url.replace(/\.\./gm, "").replace(/\//gm,
"_").replace(/\./gm, "_");
}
var link = window.document.getElementById(id);
if (! link) {
link = window.document.createElement("link");
link.setAttribute("id", id);
link.setAttribute("type", "text/css");
link.setAttribute("rel", "stylesheet");
var head = window.document.getElementsByTagName("head")[0];
head.appendChild(link);
}
link.setAttribute("href", url + "?" + djConfig.cacheBust);
}
loadCustomizedCssFile("../c11n/allDomain/layout/css/calendar/ListView.css")
Restart the GlassFish server and clear the browser cache to see the change.
Convergence dynamically generates time-zone options based on time-zone data downloaded through a WCAP call to the Oracle Communications Calendar Server defined in the cal.host Convergence configuration option. In this way the time-zone settings are kept in-sync between Convergence and Calendar Server.
Calendar Server time zone data is stored in the Calendar Server timezones.ics configuration file. See your Calendar Server documentation for more information.
The following example demonstrates how to modify calendar time zones when Convergence is integrated with Calendar Server 7:
Adding a new calendar time zone for Saskatchewan in Canada
Modifying the existing "America Los Angeles" time zone to display as the more generic "America Pacific Time".
Verify that the c11n_Home directory exists. If c11n_Home does not exist, create it.
Verify that customization is enabled in Convergence. If customization is disabled, enable it.
In c11n_Home, verify that the following directories exist. If they do not exist, create them:
/c11n_Home/allDomain/nls/
In c11n_Home, verify that config.js exists. If it does not exist, create it.
Modify config.js so that it enables i18n customization (i18nEnalbed: true) across all domains (module: "allDomain"). This allows for Calendar Server TZID string to City Name translations.
dojo.provide("c11n.config");
c11n.config = {
// allDomain configuration
allDomain: {
module: "allDomain", // module name
themeEnabled: false, // true if theme is customized
i18nEnabled: true, // true if i18n is customized
jsEnabled: false // true if js is customized
// the last entry must not end with comma
}
}
For instructions on adding and modifying new WCAP time zones in Calendar Server 7, see the Calendar Server documentation.
In c11n_Home/allDomain/nls, create the Javascript file (resources.js) file which maps and displays TZID to city name. For example, Saskatchewan is the value displayed in the UI for the Saskatchewan TZID. Similarly, Pacific Time displays in the UI when the TZID is Los_Angeles:
options_city_Saskatchewan: "Saskatchewan", options_city_Los_Angeles: "Pacific Time", last: "" }
Note:
TZIDs defined in the timezones.ics file that have no corresponding options_city_* translation string are ignored and not displayed as an option. Similarly, to change the name of a TZID (for example Los Angeles to Pacific Time), and you do not specify the change in resources.js, the original name (in this case, Los Angeles) displays in the UI.Restart the GlassFish server and clear the browser cache to see the change.
The following example demonstrates how to modify calendar time zones when Convergence is integrated with Calendar Server 6.3:
Adding a new calendar time zone for Saskatchewan in Canada
Modifying the existing "America Los Angeles" time zone to display as the more generic "America Pacific Time".
Verify that the c11n_Home directory exists. If c11n_Home does not exist, create it.
Verify that customization is enabled in Convergence. If customization is disabled, enable it.
In c11n_Home, verify that the following directories exist. If they do not exist, create them:
/c11n_Home/allDomain/nsl/
In c11n_Home, verify that config.js exists. If it does not exist, create it.
Modify config.js so that it enables i18n customization (i18nEnalbed: true) across all domains (module: "allDomain"). This allows for Calendar Server TZID string to City Name translations.
dojo.provide("c11n.config");
c11n.config = {
// allDomain configuration
allDomain: {
module: "allDomain", // module name
themeEnabled: false, // true if theme is customized
i18nEnabled: true, // true if i18n is customized
jsEnabled: false // true if js is customized
// the last entry must not end with comma
}
}
Add the new time zone to the Calendar Server timezones.ics configuration file.
BEGIN:VTIMEZONE TZID:America/Saskatchewan X-S1CS-TZID-ALIAS:Canada Central Standard Time BEGIN:STANDARD DTSTART:19970101T000000 TZOFFSETFROM:-0600 TZOFFSETTO:-0600 TZNAME:CST END:STANDARD END:VTIMEZONE
Note:
The following two lines were moved from the existing TZID:America/Costa_Rica time zone definition as they were more appropriate in the newly added TZID:America/Saskatchewan time zone:X-S1CS-TZID-ALIAS:Canada Central Standard TimeTZNAME:CSTRestart the Calendar server so it provides the new timezones.ics configuration data to Convergence.
In c11n_Home/allDomain/nls, create the Javascript file (resources.js) file which maps and displays TZID to city name. For example, Saskatchewan is the value displayed in the UI for the Saskatchewan TZID. Similarly, Pacific Time displays in the UI when the TZID is Los_Angeles:
options_city_Saskatchewan: "Saskatchewan", options_city_Los_Angeles: "Pacific Time", last: "" }
Note:
TZIDs defined in the timezones.ics file that have no corresponding options_city_* translation string are ignored and not displayed as an option. Similarly, to change the name of a TZID (for example Los Angeles to Pacific Time), and you do not specify the change in resources.js, the original name (in this case, Los Angeles) displays in the UI.Restart the GlassFish server and clear the browser cache to see the change.
This example describes how to differentiate calendar events with text colors or background colors to represent different event categories. For example, you can designate specific text colors or background colors in an event to indicate when an event is a business meeting, a conference call, or a vacation category. This example assumes that users only have one calendar.
Verify that the c11n_Home directory exists. If c11n_Home does not exist, create it.
Verify that customization is enabled in Convergence. If customization is disabled, enable it.
In c11n_Home, verify that the following directories exist. If they do not exist, create them:
/c11n_Home/allDomain/js/widget/calendar/
In c11n_Home, verify that config.js exists. If it does not exist, create it.
Modify config.js so that it enables JavaScript customization (jsEnabled: true) across all domains (module: "allDomain").
dojo.provide("c11n.config");
c11n.config = {
// allDomain configuration
allDomain: {
module: "allDomain", // module name
themeEnabled: false, // true if theme is customized
i18nEnabled: false, // true if i18n is customized
jsEnabled: true // true if js is customized
// the last entry must not end with comma
}
}
In c11n_Home/allDomain/js, create or modify customize.js (the domain specific customization) to include the following code:
dojo.provide("c11n.allDomain.js.customize");
dojo.require("c11n.allDomain.js.widget.calendar.Event");
Modify customize.js and uncomment the following:
var loadCustomizedCssFile = function(url, id) {
if (!id){
id = url.replace(/../gm, "").replace(///gm, "_").replace(/./gm, "_");
}
var link = window.document.getElementById(id);
if (! link) {
link = window.document.createElement("link");
link.setAttribute("id", id);
link.setAttribute("type", "text/css");
link.setAttribute("rel", "stylesheet");
var head = window.document.getElementsByTagName("head")[0];
head.appendChild(link);
}
link.setAttribute("href", url + "?" + djConfig.cacheBust);
}
loadCustomizedCssFile("../c11n/allDomain/layout/css/c11n.css")
In c11n_Home/allDomain/js/widget/calendar, create the Javascript file (Event.js) that specifies the color values for types of events. In this example, red text events are designated as business events, blue text events are designated as vacation events, and purple text events are designated as conference calls:
dojo.provide("c11n.allDomain.js.widget.calendar.Event");
dojo.require("iwc.widget.calendar.Event");
dojo.declare("iwc.widget.calendar.Event", iwc.widget.calendar.Event, {
categoryColor: {
"business": "redCategory",
"vacation": "blueCategory",
"conference call": "purpleCategory"
},
initDisplay: function() {
this.inherited(arguments);
var s = this.calendarService;
try {
// category can be string or array, depending on save to server or get from server
var category = s.getValue(this.item, "CATEGORIES");
if (dojo.isArray(category)) category = category[0];
category = category.toLowerCase();
var color = this.categoryColor[category];
if (color) {
dojo.addClass(this.domNode, color);
}
} catch(e) {};
},
last: ""
});
In c11n_Home/allDomain/layout/css, modify c11n.css by adding the following code to define each category with text color.
.redCategory {
color: red;
}
Modify c11n.css by adding the following code to define each category with background color.
.redCategory {
background-color: #e72d20;
}
.CalendarViewerContainer .CalendarEvent.redCategory .CalendarEvent-container
{
background-image: url("../../../../layout/images/calendar/eventBoxTRRed.png");
}
.CalendarViewerContainer .CalendarEvent.redCategory .CalendarEvent-header
{
background-image: url("../../../../layout/images/calendar/eventBoxTLRed.png");
background-color: #e72d20;
}
.CalendarViewerContainer .CalendarEvent.redCategory .CalendarEvent-body
{
background-color: #e75248;
border-color: #e72d20;
}
.CalendarViewerContainer .CalendarEvent.redCategory .CalendarEvent-footer
{
background-image: url("../../../../layout/images/calendar/eventBoxBLRed.png");
}
.CalendarViewerContainer .CalendarEvent.redCategory .CalendarEvent-footer .CalendarEvent-footerText
{
background-image: url("../../../../layout/images/calendar/eventBoxBarRed.png");
}
A list of Convergence background colors exists in Convergence_Domain/docroot/iwc_static/layout/images/calendar.
Restart the GlassFish server and clear the browser cache to see the change.
The following example disables the event balloon user input from also being saved as an event description. With this customization, the event title is added per user input but a blank event description displays.
Verify that the c11n_Home directory exists. If c11n_Home does not exist, create it.
Verify that customization is enabled in Convergence. If customization is disabled, enable it.
In c11n_Home, verify that the following directories exist. If they do not exist, create them:
/c11n_Home/allDomain/js/widget/calendar/
In c11n_Home, verify that config.js exists. If it does not exist, create it.
Modify config.js so that it enables JavaScript customization (jsEnabled: true) across all domains (module: "allDomain").
dojo.provide("c11n.config");
c11n.config = {
// allDomain configuration
allDomain: {
module: "allDomain", // module name
themeEnabled: false, // true if theme is customized
i18nEnabled: false, // true if i18n is customized
jsEnabled: true // true if js is customized
// the last entry must not end with comma
}
}
In c11n_Home/allDomain/js, create or modify customize.js (the domain specific customization) to include the following code:
dojo.provide("c11n.allDomain.js.customize");
// Disable event balloon user input from being saved as event description
dojo.require("c11n.allDomain.js.widget.calendar.QuickEventBalloon");
In c11n_Home/allDomain/js/widget/calendar, create QuickEventBalloon.js, which disables event balloon user input from being saved as event description:
dojo.provide("c11n.allDomain.js.widget.calendar.QuickEventBalloon");
dojo.require("iwc.widget.calendar.QuickEventBalloon");
dojo.declare("iwc.widget.calendar.QuickEventBalloon", iwc.widget.calendar.QuickEventBalloon, {
doSave: function() {
this.evtObject.desc = "";
this.inherited(arguments);
},
_edit: function() {
if(this.evtObject != null) {
this.evtObject.desc = "";
}
this.inherited(arguments);
},
last: ""
});
Restart the GlassFish server and clear the browser cache to see the change.
If you click or drag within a Calendar view, an event balloon displays. If quick parsing is enabled when a user enters "1PM Lunch at The Counter" in the text box of the event balloon, an event titled "Lunch" with location "The Counter" at 1PM for a duration of one hour is created. If, however, quick parsing is disabled, an event with title "1PM Lunch at the Counter" is created at the clicked time. The following example disables quick parsing.
Verify that the c11n_Home directory exists. If c11n_Home does not exist, create it.
Verify that customization is enabled in Convergence. If customization is disabled, enable it.
In c11n_Home, verify that the following directories exist. If they do not exist, create them:
/c11n_Home/allDomain/js/widget/calendar/
In c11n_Home, verify that config.js exists. If it does not exist, create it.
Modify config.js so that it enables JavaScript customization (jsEnabled: true) across all domains (module: "allDomain").
dojo.provide("c11n.config");
c11n.config = {
// allDomain configuration
allDomain: {
module: "allDomain", // module name
themeEnabled: false, // true if theme is customized
i18nEnabled: false, // true if i18n is customized
jsEnabled: true // true if js is customized
// the last entry must not end with comma
}
}
In c11n_Home/allDomain/js, create or modify customize.js (the domain specific customization) to include the following code:
dojo.provide("c11n.allDomain.js.customize");
// Disable quick parsing in calendar
dojo.require("c11n.allDomain.js.calendar.QuickEventBalloon");
In c11n_Home/allDomain/js/widget/calendar, create the JavaScript file (QuickEventBalloon.js) that disables quick parsing feature in calendar:
dojo.provide("c11n.allDomain.js.calendar.QuickEventBalloon");
dojo.require("iwc.widget.calendar.QuickEventBalloon");
dojo.declare("iwc.widget.calendar.QuickEventBalloon", iwc.widget.calendar.QuickEventBalloon, {
quickParsingEnabled: false ,
last: ""
});
Restart the GlassFish server and clear the browser cache to see the change.
To remove the Attachment button in the New Task tab:
Verify that the c11n_Home directory exists. If c11n_Home does not exist, create it.
Verify that customization is enabled in Convergence. If customization is disabled, enable it.
In c11n_Home, verify that the following directories exist. If they do not exist, create them:
/c11n_Home/allDomain/js/widget/
In c11n_Home, verify that config.js exists. If it does not exist, create it.
Modify config.js so that it enables JavaScript customization (jsEnabled: true) across all domains (module: "allDomain").
dojo.provide("c11n.config");
c11n.config = {
// allDomain configuration
allDomain: {
module: "allDomain", // module name
themeEnabled: false, // true if theme is customized
i18nEnabled: false, // true if i18n is customized
jsEnabled: true // true if js is customized
// the last entry must not end with comma
}
}
In c11n_Home/allDomain/js, create or modify customize.js (the domain specific customization) to include the following code:
dojo.provide("c11n.allDomain.js.customize");
// Remove the Attachment Button in a New Task Tab
dojo.require("c11n.allDomain.js.widget.calendar.TaskDetail");
In c11n_Home/allDomain/js/widget/calendar, create the JavaScript file (TaskDetail.js) that removes the Attachment button from the New Task tab
dojo.provide("c11n.allDomain.js.widget.calendar.TaskDetail");
dojo.require("iwc.widget.calendar.TaskDetail");
dojo.declare("iwc.widget.calendar.TaskDetail", iwc.widget.calendar.TaskDetail, {
postCreate: function () {
this.inherited(arguments);
dojo.style(this.attachButton.domNode, "display", "none");
},
last: ""
});
Restart the GlassFish server and clear the browser cache to see the change.
To remove the reservation option in the New Event tab:
Verify that the c11n_Home directory exists. If c11n_Home does not exist, create it.
Verify that customization is enabled in Convergence. If customization is disabled, enable it.
In c11n_Home, verify that the following directories exist. If they do not exist, create them:
/c11n_Home/allDomain/js/widget/
In c11n_Home, verify that config.js exists. If it does not exist, create it.
Modify config.js so that it enables JavaScript customization (jsEnabled: true) across all domains (module: "allDomain").
dojo.provide("c11n.config");
c11n.config = {
// allDomain configuration
allDomain: {
module: "allDomain", // module name
themeEnabled: false, // true if theme is customized
i18nEnabled: false, // true if i18n is customized
jsEnabled: true // true if js is customized
// the last entry must not end with comma
}
}
In c11n_Home/allDomain/js, create or modify customize.js (the domain specific customization) to include the following code:
dojo.provide("c11n.allDomain.js.customize");
// Remove Reservations from the New Event Tab
dojo.require("c11n.allDomain.js.widget.calendar.CreateEvent");
In c11n_Home/allDomain/js/widget/calendar, create the JavaScript file (CreateEvent.js) that removes the Reservations button and label from the New Event tab.
dojo.provide("c11n.allDomain.js.widget.calendar.CreateEvent");
dojo.require("iwc.widget.calendar.CreateEvent");
dojo.declare("iwc.widget.calendar.CreateEvent", iwc.widget.calendar.CreateEvent, {
postCreate: function () {
this.inherited(arguments);
dojo.style(this.reservationNode.domNode, "display", "none");
// Remove the "Reservations" Label
var reservationParent = this.reservationNode.domNode.parentNode;
reservationParent.removeChild(dojo.query("h3",reservationParent)[1]);
},
last: ""
});
Restart the GlassFish server and clear the browser cache to see the change.
The following example removes the SMS Option in the Calendar Notifications Options tab and from the New Event Reminder dialog.
Verify that the c11n_Home directory exists. If c11n_Home does not exist, create it.
Verify that customization is enabled in Convergence. If customization is disabled, enable it.
In c11n_Home, verify that the following directories exist. If they do not exist, create them:
/c11n_Home/allDomain/js/widget/
In c11n_Home, verify that config.js exists. If it does not exist, create it.
Modify config.js so that it enables JavaScript customization (jsEnabled: true) across all domains (module: "allDomain").
dojo.provide("c11n.config");
c11n.config = {
// allDomain configuration
allDomain: {
module: "allDomain", // module name
themeEnabled: false, // true if theme is customized
i18nEnabled: false, // true if i18n is customized
jsEnabled: true // true if js is customized
// the last entry must not end with comma
}
}
In c11n_Home/allDomain/js, create or modify customize.js (the domain specific customization) to include the following code:
dojo.provide("c11n.allDomain.js.customize");
// Remove the SMS Option from the possible Calendar Notifications
dojo.require("c11n.allDomain.js.widget.calendar.option.Notification");
dojo.require("c11n.allDomain.js.widget.calendar.NotificationDialog");
In c11n_Home/allDomain/js/widget/calendar/option, create the JavaScript file (Notification.js) that removes SMS notification in Calendar Options.
dojo.provide("c11n.allDomain.js.widget.calendar.option.Notification");
dojo.require("iwc.widget.calendar.option.Notification");
dojo.declare("iwc.widget.calendar.option.Notification", iwc.widget.calendar.option.Notification, {
buildRendering: function() {
this.inherited(arguments);
dojo.style(this.notificationSMS.domNode.parentNode, "display", "none");
},
last: ""
});
In c11n_Home/allDomain/js/widget/calendar, create the JavaScript file (NotificationDialog.js) that removes SMS notification from the Notification dialog box.
dojo.provide("c11n.allDomain.js.widget.calendar.NotificationDialog");
dojo.require("iwc.widget.calendar.NotificationDialog");
dojo.declare("iwc.widget.calendar.NotificationDialog", iwc.widget.calendar.NotificationDialog, {
buildRendering: function() {
this.inherited(arguments);
this.methodSelector.removeOption("sms");
this.methodSelectorAbs.removeOption("sms");
},
last: ""
});
Restart the GlassFish server and clear the browser cache to see the change.