Kendo Scheduler Remove Line that is in other month - kendo-ui

Question

I would like to remove a complete line of days in the scheduler (Month View) when all the days in the line belong to an other month.
ex1:
In this exemple i want to remove the first line (25 to 31) because they belong to the other month completly, but we want to keep the (1 to 4) in the last line.
ex:2
In this exemple i want to remove the last line (5 to 11) because they belong to the other month completly, but we want to keep the (29-31) in the first line.
I didn't find anything to help me achieve this task. Anyone know if there is a way to do it?
EDIT
Based on #himawan_r answer's, i did this to remove the line.
$(".k-scheduler-table tr").each(function (index, element) {
if (index === 0) return;
var shouldBeHidden = true;
$(this).find("td").each(function (i, elm) {
if (!$(elm).hasClass("k-other-month")) {
shouldBeHidden = false;
}
});
if (shouldBeHidden) {
$(this).hide();
}
});
now the problem is that Kendo render the events on the wrong cell, and sometime it's overflowing on 2 cell.
I don't know if we can tell Kendo to rerender only the events, because when i rezise the element, it's fixing the issues.

Answer 1

I would like to give a suggestion by utilizing :
Make use of scheduler dataBound event to hide the date and event (not work yet on recurring event)
In the scheduler edit function add conditional to to prevent the popup to appear if they click on date that is hidden
take a look at this dojo
Brief explanation (check this part of the code)
dataBound: function(e) {
//since if we hide the <td> the current month date will be be shifted to the left,
//instead hide all the date <span> on all k-other-month <td> or more specific,
//however you mentioned about completely belong to other month, maybe you could create more specific selector
$("td.k-other-month span").hide();
//we cant hide the event using $("td.k-other-month div").hide() since the event element not inside the td
//you can hide it this way, however
//in this example the event is recurring thus i cant find any event that is outside of this month scheduler create multiple event based on recurring rule
//if there is only common event i think this code will work
var data = e.sender.dataSource.data();
var currentMonth = e.sender.view()._firstDayOfMonth.getMonth();
for(var i = 0; i< data.length ; i++){
if(data[i].start.getMonth() !== currentMonth){
$("div.k-scheduler-content div[data-uid='"+ data[i].uuid +"']").hide();
}
}
}
and
edit: function(e) {
//here i add conditional to prevent the edit/new event popup to appear if it is outside of current month
//you can create your own logic if needed
if(e.event.end.getMonth() !== e.sender.view()._firstDayOfMonth.getMonth()){
e.preventDefault();
}
},
then you can apply your requirement from there i guess.

Answer 2

you can hide those dates using CSS
.k-other-month {
background-color: white !important;
position: relative;
z-index: 1;
}
.k-other-month .k-nav-day {
color:white !important;
}