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

Customizing Event Styles for the Calendar

Style sheet attributes determine the color, transparency, font, and other styles for each status. You can modify these styles. You can use any single value field that resides in the Action business component to determine the style that Siebel Open UI uses to render events in the calendar. Siebel Open UI uses the value that the Status field contains to determine how the client displays an event in the calendar, by default. For example:

• Done
• Not Started
• Planned
• Success

To customize event styles for the calendar

1. Use an editor to open the theme-calendar.css file.
2. Locate the code that specifies the style that you must modify.

   For example:

   #color_square_LOVName {color: #d3ffd7!important;}
   .fc-event-skin.calendar-EventStyle-LOVName {
   {custom_attributes}

   where:

   • LOVName identifies the event status that you must modify, such as Done or Not Started.
   • custom_attributes specify the style properties you can modify, such as the background color or font type.
3. Modify the code, as necessary.

   For example:

   #color_square_Done {color: #d3ffd7!important;}
   .fc-event-skin.calendar-EventStyle-Done {
     background: #d3ffd7;
     border-color:#A8FFAF;
   }

   In this example, Siebel Open UI modifies the style for each Done appointment. It also modifies the style for the Done entry in the legend that it displays in the upper-left corner of the calendar.

   If Siebel Open UI cannot find a matching style for a LOVName, then it displays events in the default text color, which is typically black on white.

4. Save your modifications, clear the browser cache, and then verify that Siebel Open UI displays the style you defined for the Done status.

   For more information, see Clearing the Browser Cache.