Wijmo 5 - Wijmo Calendar itemFormatter issue
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.grapecity.com/wijmo/5.latest/styles/wijmo.min.css">
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.input.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<div class="container">
<h1>Wijmo Calendar itemFormatter issue</h1>
<p>
This jsFiddle uses the Calendar's <a href="https://www.grapecity.com/wijmo/api/classes/wijmo_input.calendar.html#itemformatter">itemFormatter</a> property to apply a yellow background to "today". But the yellow background is incorrectly applied to the <i>same cell in every month</i>, not just "today's" month.
</p>
<p>
To see the issue, shuttle forward or back a month and note that one of the dates has a yellow background.
</p>
<p>
See related <a href="https://www.grapecity.com/forums/wijmo/issue-with-calendar-itemfo_1">Wijmo Forum Post</a>.
</p>
<div id="theCalendar"></div>
</div>
CSS
.wj-calendar {
max-width: 300px;
}
.wj-control {
margin-bottom: 6px;
}
body {
margin-bottom: 24pt;
}
JavaScript
onload = function() {
// create Calendar control
var calendar = new wijmo.input.Calendar('#theCalendar', {
value: new Date(2020, 3, 1),
itemFormatter: (date, element) => {
const givenDay = moment(date);
const today = moment();
// reset the styling of Wijmo's td.wj-day-today cell
if (givenDay.isSame(today, 'day')) {
element.style.backgroundColor = 'yellow';
}
else {
element.style.backgroundColor = 'inherit';
}
}
});
}