Question

如果该行中的所有日期都属于另一个月，我想在调度程序（月视图）中删除完整的天数。

EX1：

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

ex：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个单元格上溢出。

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

Answer 1

我想通过以下方式提出建议：

利用调度程序dataBound事件来隐藏日期和事件（暂时不会再发生事件）
在调度程序编辑功能中添加条件以防止弹出窗口在点击隐藏日期时出现

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

然后你可以从那里申请你的要求。

Answer 2

您可以使用CSS隐藏这些日期

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

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

Kendo Scheduler删除其他月份的Line

2 个答案: