Skip to Content
0

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

May 16 at 11:32 AM

55

avatar image

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)
10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

2 Answers

Srikanth KV May 16 at 06:53 PM
1

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: https://embed.plnkr.co/m5auRAqqC4NUGFAqGYlz/

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

Share
10 |10000 characters needed characters left characters exceeded
Pavan Tej May 17 at 03:42 PM
0

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

Show 1 Share
10 |10000 characters needed characters left characters exceeded

how is the background color set for specific dates?( using CSS what is the approach involved).

0