ionic 2 calendar cssClass not working - calendar

Question

I'm using https://github.com/HsuanXyz/ion2-calendar to generate a calendar in ionic. I can't make color changes to dates using dateconfig's cssClass.
Below is the code i'm using
` daysConfig() {
let _daysConfig = [
{
date:new Date(2018,0,1),
subTitle:'New Year\'s',
marked:false,
cssClass: 'my-cal'
},
{
date:new Date(2017,1,14),
subTitle:'Valentine\'s',
disable:true
},
{
date:new Date(2017,3,1),
subTitle:'April Fools',
marked:true
},
{
date:new Date(2017,3,7),
subTitle:'World Health',
marked:true
},
{
date:new Date(2017,4,31),
subTitle:'No-Smoking',
marked:true
},
{
date:new Date(2017,5,1),
subTitle:'Children\'s',
marked:true
}
];
_daysConfig.push(...this.days);
this.calendarCtrl.openCalendar({
from: new Date(2017,0,1),
to : new Date(2018,11.1),
daysConfig:_daysConfig
})
.then( (res:any) => { console.log(res) })
.catch( () => {} )
}`
css Class
.my-cal {
color: yellow
}

Answer 1

After a long RnD of almost 5 hour could solve this issue.
Please find the below solution in ionic
Define the below class in global.scss
.my-cal {
background-color: red !important;
}
and remember not to define this class anywhere else.
now use this in you days config as below:
let _daysConfig: DayConfig[] = [];
for (let i = 0; i < 31; i++) {
_daysConfig.push({
date: new Date(2020, 4, i + 1),
marked: false,
subTitle: `$${i + 1}`,
cssClass: 'my-cal'
})
}
Hope it will help someone :)

Answer 2

I just encountered the same problem, and I solved it by adding the follow style in the .scss file:
button.days-btn.my-cal {
p, small {
color: yellow;
text-decoration: underline;
font-weight: bold;
}
}

Answer 3

The cssClass is only added to the button that the <p> element containing the text is in.
So to properly change the color, you'll have to reference the <p> element first and assign the color to that.
Example
.ts
cssClass: 'my-cal'
.scss
.my-cal {
p {
color: green;
}
}

Answer 4

One of the solutions would be to add this code to your global scss/css style
ion-calendar { .my-cal{ background-color: #6E6B6B !important; p{ color: white !important; } }}
Later add "my-cal" class to wanted day.