Configuring Siebel Open UI > Customizing Calendars and Schedulers > Customizing Calendars >

Using Fields to Customize Event Styles for the Calendar

Siebel Open UI comes predefined to use the Status field in the Action business component to supply the event style, by default. You can modify it to use any bounded, single-value field that resides in the Action business component.

To use fields to customize event styles for the calendar

1. Identify the applet that you must modify:
   1. In the client, navigate to the calendar page that displays the style that you must modify.
   2. Click the Help menu, and then click About View.
   3. Copy the applet name that the dialog box displays to the clipboard.
2. Identify the field that must supply the event style:
   1. Open Siebel Tools.

      For more information, see Using Siebel Tools.

   2. In the Object Explorer, click Business Component.
   3. In the Business Components list, locate the Action business component.
   4. In the Object Explorer, expand the Business Component tree, and then click Field.
   5. In the Fields list, identify a bounded, single-value field.

      Siebel Open UI will use this field to supply the values that it displays in the Legend in the calendar in the client.

3. Modify the applet:
   1. In the Object Explorer, click Applet.
   2. Click in the Applets list, click the Query menu, and then click New Query.
   3. Paste the applet name that you copied in Step 1 into the Name property, and then press the Enter key.

      To modify styles for:

      • All calendar applets. You can add user properties to the HI Calendar Base Applet. Siebel Open UI uses this applet to set styles for all applets.
      • One specific applet. You can add user properties to an individual applet. User properties that you define on an individual applet override the styles that the HI Calendar Base Applet specifies.
   4. In the Object Explorer, expand the Applet tree, and then click Applet User Prop.
   5. In the Applet User Props list, add the following applet user property.

      Property	Value
      Name	CSS Event Style
      Value	Enter the name of the field that you identified in Step 2.

   6. In the Applet User Props list, add the following applet user property.

      Property	Value
      Name	CSS Event Style LOV
      Value	Enter the LOV type that the field that you identified in Step 2 uses.

      Siebel Open UI will use the values that this list of values contains to populate the CSS Class tags in the HTML, and then to render the event and legend styles. It uses the EventStyle property that contains the language independent code. It uses the set of language independent codes that this field contains to define the range of possible values. The CSS Event Style LOV user property allows you to define a single set of styles that Siebel Open UI can use for all languages in a multilingual environment.

      If the CSS Event Style user property does not exist, or if the CSS Event Style LOV user property does not exist, then Siebel Open UI uses the following default values:

      • Status for the field.
      • EVENT_STATUS for the list of values.
4. Compile your modifications.
5. Restart the Siebel application.
6. In the client, navigate to the Administration - Data screen, and then click List of Values.
7. Query the List of Values list for all of the unique language independent codes that exist for this list of values type.

   For example, query the Type field for TODO_TYPE.

8. Use a style sheet editor to open the theme-calendar.css file.
9. For each value that you find in Step 7, create the following two styles.

   Style	Description
   .fc-event-skin.calendar-EventStyle-LOVName	Siebel Open UI uses this style for the event.
   #color_square_LOVName	Siebel Open UI uses this style for the square that it displays on the legend.

   When Siebel Open UI creates the HTML to render the Calendar, it specifies these styles in the CLASS tag for the event and for the legend. It specifies the strings for the language independent code for the field with spaces removed. For example:

   ? .fc-event-skin.calendar-EventStyle-Completed and #color_square_Completed

   ? .fc-event-skin.calendar-EventStyle-NotStarted and #color_square_NotStarted

   ? .fc-event-skin.calendar-EventStyle-InProgress and #color_square_InProgress

   For an example of customizing a style sheet, see Customizing Event Styles for the Calendar.

10. Save the theme-calendar.css file.
11. Clear the browser cache.
12. Navigate to the Calendar view.
13. Make sure Siebel Open UI displays the correct styles.