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; }