Skip to Content

sapui5 sap.ui.unified.Calendar how to remove the Special Date Color

Hello Everyone,

Im facing an issue in sap.ui.unified.Calendar. I want to remove the color of the special date onclick of any particular date. But im not able to achieve this. Can some one please

help me to fix this..

Here from the above screenshot, If i select on date 18th May, Green color should get removed and gray color should come like 1st to 4th May.

To give that color. I used Type in addSpecialDate() method. Below is my code..

var oCal1 = this.getView().byId("myCalendar");
oCal1.addSpecialDate(new sap.ui.unified.DateTypeRange({
startDate: new Date("Fri May 18 2018 00:00:00 GMT+0530 (India Standard Time)"),
type: sType,
tooltip: data.results[i].Tooltip

Now how can i remove the selected date color on click of that particular date? I tried to remove the Color by CSS too. But that fix also didnt helped me. Please help me to solve this issue.

Thank you in advance

color.png (17.6 kB)
Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

2 Answers

  • May 16, 2018 at 06:53 PM

    use the method removeSpecialDate()

    you need to get all the special dates....and compare the selected date against special date. if found then remove that specific special date.

    Sample code:

    First click on 'Show Special Days' and then try to select any special day...this will remove the color

    Add comment
    10|10000 characters needed characters exceeded

  • May 17, 2018 at 03:42 PM

    Hello Srikanth KV,

    Thank you for your response. I tried with your Solution but it is not working. Actually if you see the screenshot, You will come to know that the Color for the special date that got highlighting was written by using Custom CSS. So im not able to remove that background color for the date using sapui5 built in methods. So im trying with the below code..

    $('.sapUiCalItemSel')[0].setAttribute('style', 'background-color:lightgray !important');

    Here im getting the selected Date Item on click of particular special Date and im trying to set the color for date to lightgray. But this solution also not working effectively. But im thinking like i have to fix this issue using both CSS and JS.

    If possible Can you help me some other way to fix this issue?

    Thank you in advance

    Add comment
    10|10000 characters needed characters exceeded