CODEWITHSUNDEEP
javascriptjqueryasp.net-mvckendo-scheduler
Gavin Sutherland
Gavin Sutherland

Reputation: 1686

Is there a way to add an 'X more events' style message to the Kendo Scheduler in month view?

I'm using ASP.NET MVC with Kendo UI version: "2014.2.716".

Is there a way to change the default '...' in the Kendo Scheduler control to a custom message with say '13 more events'?

enter image description here

This is what I have tried so far. I know I can capture the data bound event ... 

@(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 ... *@

... then in javascript use jQuery to get these elements ...

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

        });
}

... but what I don't know is how would I get the number of events in the day represented by this cell?!

Upvotes: 1

Views: 1820

Answers (1)

Gavin Sutherland
Gavin Sutherland

Reputation: 1686

So this has worked for me ...

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 ...');
                    }
                }
            }
        }
    });
}

I also had to tweak the css for .k-more-events so that the panel was big enough to show the text e.g. 

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

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

Upvotes: 5

Related Questions