【问题标题】:Kendo Scheduler Remove Line that is in other monthKendo Scheduler 删除其他月份的行
【发布时间】:2017-08-03 14:12:02
【问题描述】:

当该行中的所有天都属于另一个月份时,我想删除调度程序(月视图)中的完整天行。

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

我不知道我们是否可以告诉 Kendo 只重新渲染事件,因为当我调整元素时,它正在解决问题。

【问题讨论】:

  • 完全属于另一个月而不是完全属于其他月份是什么意思,我不明白。是不是因为他们在那一天有活动所以他们不属于其他月份(这很奇怪)?
  • 25 到 31 属于其他月份......它不在当前月份......我们不想看到另一个月份的完整行。就是这样

标签: kendo-ui kendo-asp.net-mvc kendo-scheduler


【解决方案1】:

我想提出一个建议:

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

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

【讨论】:

  • 我今天会测试这个!在我们的案例中,事件永远不会重复发生或类似的事情,它是一个显示当天警报的特殊模板。
  • 哦,我见过你的道场,我会尝试使用你的代码,但不同。因为如果它们属于其他月份,我需要删除删除完整的行,或者如果它拥有当月的几天,则不要触摸它。但我对你的代码有一点想法;)
  • 是的,请务必这样做。我真的不明白你的要求的逻辑,所以我就这样吧。
【解决方案2】:

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

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

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

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2018-10-12
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-07-16
    • 1970-01-01
    • 2020-05-13
    相关资源
    最近更新 更多