Kendo Scheduler删除其他月份的Line

Posted 2021-04-05

我希望在行中的所有日期属于另一个月时，在调度程序（月视图）中删除完整的天数。

EX1：

在这个例子中，我想删除第一行（25到31），因为它们完全属于另一个月，但我们希望将（1到4）保留在最后一行。

例如：2

在这个例子中，我想删除最后一行（5到11），因为它们完全属于另一个月，但我们希望将（29-31）保留在第一行。

我没有找到任何东西来帮助我完成这项任务。有人知道有没有办法做到这一点？

编辑

根据@himawan_r的答案，我这样做是为了删除该行。

    $(".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();
        }
    });

现在问题是Kendo在错误的单元格上渲染事件，有时它在2个单元格上溢出。

我不知道我们是否可以告诉剑道只重新报道事件，因为当我重新调整元素时，它正在修复问题。

答案

我想通过以下方式给出一个建议：

1. 利用调度程序dataBound事件来隐藏日期和事件（在重复事件中还没有工作）
2. 在调度程序编辑功能中添加条件以防止弹出窗口在单击隐藏的日期时出现

看看这个dojo

简要说明（检查这部分代码）

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();
    }
  }
}

和

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();
  }
},

那么你可以从那里应用你的要求。

另一答案

你无法使用CSS隐藏这些日期

.k-other-month {
    background-color: white !important; 
    position: relative;
    z-index: 1;
}

.k-other-month .k-nav-day {
    color:white !important;
}