Skip to Content

Archived discussions are read-only. Learn more about SAP Q&A

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!



Former Member

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:


background : red!important;


With Regards,

Ramesh Shrestha

0 View this answer in context
Not what you were looking for? View more on this topic or Ask a question