I'm trying to highlight specific dates in ion-datetime. But for some reason, it is not getting reflected in calendar

Issue

I have used ion-datetime for my Ionic-react project. I have added all the property that they have asked in documentation. Instead of coloured dates, I’m getting simple calendar.

          <IonDatetime
              color="custom"
              preferWheel="false"
              className="some-class"
              presentation="date-time"
              highlightedDates={[
                {
                  date: "2023-01-05",
                  textColor: "#800080",
                  backgroundColor: "#ffc0cb",
                },
                {
                  date: "2023-01-10",
                  textColor: "#09721b",
                  backgroundColor: "#c8e5d0",
                },
                {
                  date: "2023-03-20",
                  textColor: "var(--ion-color-secondary-contrast)",
                  backgroundColor: "var(--ion-color-secondary)",
                },
                {
                  date: "2023-03-23",
                  textColor: "rgb(68, 10, 184)",
                  backgroundColor: "rgb(211, 200, 229)",
                },
              ]}
              onClick={(e) => filterDate(e.target.value)}
            ></IonDatetime>

I have also tried removing my css making sure that it is not affecting it but got no result. Any help would be appreciated.

Solution

After trying so many ways to resolve this problem, Changing Ionic version from 6.0.0 to 7.0.0 really helped me.

In recent(29/03/2023) release of Ionic 7.0.0 They have resolved this issue.

Answered By – Kushal Rajyaguru

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0