有没有办法在月视图中向Kendo Scheduler添加"X more events"样式消息？

Question

我正在使用带有Kendo UI版本的ASP.NET MVC:"2014.2.716".

有没有办法将Kendo Scheduler控件中的默认"..."更改为自定义消息,并说"13个更多事件"？

这是我到目前为止所尝试的.我知道我可以捕获数据绑定事件......

@(Html.Kendo().Scheduler<MyViewModel>()
        .Name("myScheduler")
        .Selectable(true)
        .EventTemplateId("event-template")
        .Events(e =>
        {
            e.DataBound("calDataBound");
        })
        .Views(views =>
        {
            views.DayView();
            views.WeekView();
            views.MonthView();
            views.AgendaView();
        })
       @* Other markup removed for brevity ... *@

...然后在javascript中使用jQuery来获取这些元素......

function calDataBound(e) {
        $(".k-more-events span").each(function (index, element ) 
        {

        });
}

...但我不知道的是我如何得到这个单元所代表的当天的事件数量？!

Answer 1

所以这对我有用......

function calDataBound(e) {

    var scheduler = this;
    var view = scheduler.view();
    var dataSourceData = scheduler.dataSource.data();

    // For every element that has the more events ellipses '...'
    view.table.find(".k-more-events span").each(function () {
        if ($(this) != null) {
            var element = $(this);
            if (element != null) {
                var slot = scheduler.slotByElement(element);
                if (slot != null) {
                    var slotStart = slot.startDate;
                    var slotEnd = slot.endDate;

                    var totalAppts = 0;
                    var visibleAppts = 0;

                    for (var i = 0; i < dataSourceData.length; i++) {
                        var appt = dataSourceData[i];
                        var apptStartDt = appt.start;
                        var apptEndDt = appt.end;

                        // Include only appointments that are in or overlap the entire day
                        if (slotStart < apptEndDt && slotEnd > apptStartDt) {
                            totalAppts += 1;

                            var selector = 'div[data-uid="' + appt.uid + '"]';
                            if ($(selector).length > 0) {
                                visibleAppts += $(selector).length;
                            }
                        }
                    }

                    var totalHidden = totalAppts - visibleAppts;
                    if (totalHidden > 0) {
                        element.text(totalHidden + ' more ...');
                    }
                }
            }
        }
    });
}

我还必须调整css,.k-more-events以便面板足够大以显示文本,例如

.k-more-events > span {
  margin-top: 0em;
  height: 20px;
}

div.k-more-events {
  font-size: 12px;
  height: 20px;
}