Skip to Content
Apr 07, 2016 at 02:10 PM

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!




pastedImage_1.png (17.3 kB)