I have an array of objects.
[
{
"date":"3 June 2020",
"event":"5"
},
{
"date":"13 June 2020",
"event":"3"
}
]
Now what I want is when the calendar gets renders, a span element will be appended just below the aria-label of date matches with this array, and the value of the span element is the respective event number. For example after the calendar aria-label of "3 June 2020", the new span element gets appended with value "5".
I inspected the react-calendar date box and here is the HTML code for the same.
<button class="react-calendar__tile react-calendar__month-view__days__day" type="button" style="flex-basis: 14.2857%; max-width: 14.2857%; overflow: hidden;"><abbr aria-label="2 June 2020">2</abbr></button>
what I want is it changes with this
<button class="react-calendar__tile react-calendar__month-view__days__day" type="button" style="flex-basis: 14.2857%; max-width: 14.2857%; overflow: hidden;"><abbr aria-label="2 June 2020">2</abbr><span>5</span></button>
How can I do this? I am using "React-Calendar" npm package for rendering the calendar.
