display default date with different background color

[rajneshkis13]

hi
i want to display default date with different background color
i was pass "defaultDates" in "CalendarModalOptions" to display default date

const options: CalendarModalOptions = {
pickMode: 'multi',
title: '',
monthFormat:'MMMM yyyy',
weekStart:1,
defaultDates:["2019-04-18", "2019-04-19","2019-04-20", "2019-04-21"],
};

i want 2019-04-18 background color green
i want 2019-04-19 background color red
i want 2019-04-18 background color red
i want 2019-04-19 background color green

check attachment screen shots i want same design of calendar
is it possible to make ? let me know

[shubham5500]

you can change the default date color by pushing the days to daysConfig and passing dayConfig: { marked: true}
and then you can change the color with .marked class css and also you can pass with the 'cssClass' key

daysConfig.push({
date: new Date(item),
marked: true
});

DayConfig {
date: Date;
marked?: boolean;
disable?: boolean;
title?: string;
subTitle?: string;
cssClass?: string;
}

here's the interface of daysConfig

[bigcountry350]

Hi,
I'm having this issue too. I pass a custom CSS class to days config, but it does nothing.

For example:
in my calendarview.page.scss I created the following class:

.marked{
color:#f53d3d; //Red Color
}

Then in my calendarview.ts file I configure the days as:

this.dconfig.push({
  cssClass: "marked",
  date: new Date(2019,7,27),
  subTitle: "2",
  marked: true  

})

however, the marked highlight color is still the default. I can't get the marked color to change... The days config is working because I'm able to highlight the day as well as set a subtitle.

[shubham5500]

@bigcountry350 try writing the scss at the global level i.e in style.scss file it might work and also use diffrent cssClass name for it

[jorgedkoala]

Hello, i've been having this problem also, it's been solved by applying to the background-color `property on the global css the !important modifier

.selectedDay{
background-color: yellow !important;
}