Scheduler month view - apply class to certain days

[Kevin]

I have a scheduler set to month view, and I wanted to shade certain dates regardless of if there is an event on that day or not.  I have the dates that need to be shaded ahead of time.

I created a class called previewDay which changes the background color, and I added code to the databound function that does this without issue, until I add 3 events

function kendoDateOnly(input) {
    if (input == null) {
        return "";
    }
    return kendo.parseDate(kendo.toString(input, 'd')).toLocaleDateString("en-US");
}
function preview_dataBound(e) {
    var scheduler = $("#event-preview-scheduler").data("kendoScheduler");
    var slots = $('.k-scheduler-content td');
    for (var i = 0; i < slots.length; i += 1) {
        var currentSlot = $(slots[i]); // Get current slotvar slotData = scheduler.slotByElement(currentSlot); // Get slot datavar startDate = kendoDateOnly(slotData.startDate); // Convert start date to M/d/yyyy formatif (_eventDates.includes(startDate)) {
            currentSlot.addClass('previewDay'); // Add the previewDay class
        } else {
            currentSlot.removeClass('previewDay'); // Remove the previewDay class (probably don't need to do this)
            currentSlot.addClass("k-other-month"); // Add the k-other-month class to gray out the other days
        }
    }
}

In my example, I need to shade July 3rd, July 4th, and July 5th.

I have an array called _eventDates which is ["7/3/2022", "7/4/2022", "7/5/2022"]

And with no events - this works exactly as expected

When I add 1-2 events, this continues to work

When I add a 3rd event, July 6th is shaded.  It does not matter what combination I use when I use 2, it always shades correctly, once I add that 3rd, it throws it off.

In this particular case, all 3 events on each day have the same information

Start: 07/03/2022 00:00
End: 07/03/2022 01:00

Though when I pull the slotData

Which makes sense as it is a month view, so they'll expand to fill the day

However, in all cases, the slotData has a startDate of Tue Jul 05, and that is what I'm matching on

If I throw a console.log of the startDate before I add the class

console.log(startDate);
currentSlot.addClass('previewDay');

I get this

(it's weird I get 7/3 twice?)

But 7/6/2022 is never there

And finally, here is the html for that row with the extra day shaded

<tr style="height: 186px;">
<td class="previewDay"><span class="k-link k-nav-day">03</span></td>
<td class="previewDay"><span class="k-link k-nav-day">04</span></td>
<td class="previewDay"><span class="k-link k-nav-day">05</span></td>
<td class="previewDay"><span class="k-link k-nav-day">06</span></td>
<td class="k-other-month"><span class="k-link k-nav-day">07</span></td>
<td class="k-other-month"><span class="k-link k-nav-day">08</span></td>
<td class="k-other-month"><span class="k-link k-nav-day">09</span></td>
</tr>

Can someone please help me out with what is going wrong here?

 

[Martin]

Hello, Kevin,

Could you please take a look at this How-To article and let me know if it is similar to what you are looking for? 

Regards,
Martin
Progress Telerik