CSS Styling for SAPUI5 Elements

[former_member204167]

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

[RameshShrestha · Accepted solution]

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

[former_member204167 · Accepted solution]

Thanks for your help. Problem solved.