Skip to Content
avatar image
Former Member

CSS Styling for SAPUI5 Elements

Hello Experts,

I have to modify the background color of appointments in sap.m.planningcalendar (Red Box on Screenshot):

I know how to modify css classes for SAPUI5 Controls (addStyleClass method). Unfortunately, these appointments are just SAPUI Elements (sap.ui.unified.CalendarAppointment to be precise). How can I modify the css of these?

I am fetching the data from the backend and I build these appointments in a loop by the following code (pData.results is the result array of a odata read operation). There are predefined types for this control ("Type06" in the code below) which decided what color the left border of the box actually has. But there seems to be no option to modifiy the background color.

iDataLength = pData.results.length;
while (iDataLength--) {
if (pData.results[iDataLength][sLineKey] === aLines[iLength].key) {
     var oAppointment = new sap.ui.unified.CalendarAppointment({
               startDate: pData.results[iDataLength].ValidFrom,
               endDate: pData.results[iDataLength].ValidTo,
               type: "Type06",
               title: this.fnGetToolTipText(pData.results[iDataLength], sLineKey)
          });
}
}

Thanks for help in advance!

Regards

Tobias

pastedImage_1.png (17.3 kB)
Add comment
10|10000 characters needed characters exceeded

  • Follow
  • Get RSS Feed

1 Answer

  • Best Answer
    Apr 09, 2016 at 03:13 PM

    Hi Tobias,

    You can directly add your new definition for style of standard classes. But this will impact all others with same class also.

    So better you add one class to planningcalender ui. Then define CSS class for combination of the parent class and child class( some common class that is available to the ui that you wanted to apply)

    We need to find out the common class which will be surely available in all the ui in which you are trying to apply.

    For Example:

    .planningcalenderClass.sapUiCalendarRowAppsIntHeadType05{

    background : red!important;

    }

    https://www.sitepoint.com/community/t/apply-css-rules-if-a-parent-has-a-specific-class/10980

    With Regards,

    Ramesh Shrestha

    Add comment
    10|10000 characters needed characters exceeded