Custom View Grouping all-day events in one Event Count

[Carlos]

Hi!

I'm using a kendo Scheduler in cshtml.

@(Html.Kendo().Scheduler<TaskViewModel>()
            .Name("scheduler")
            .Views(views =>
            {
                views.DayView();
                views.CustomView("CustomDateRangeView ");
            })
            .DataSource(d => d
                .Read("Read", "Home")
                .Create("Create", "Home")
                .Destroy("Destroy", "Home")
                .Update("Update", "Home")
            )

    )

In this scheduler I'm using a custom view defined below. This works fine but I want to group only the all-day events in one Event Count like this example: Create Custom month View with Event Count in Show More Button

I tried to create the method _positionEvent in the custom view but it didn't work...

I couldn't find any information about it, only examples but nothing explained. 

//extend the base MultiDayView
var CustomDateRangeView = kendo.ui.MultiDayView.extend({
    init: function (element, options) {
        kendo.ui.MultiDayView.fn.init.call(this, element, options); //call the base init method
        if (options.swipe) {
            this._bindSwipe(); //bind the swipe event
        }
    },
    options: { //set default values of the options
        numberOfDays: 7,
        swipe: false
    },
    calculateDateRange: function () {
        var selectedDate = this.options.date,
            numberOfDays = Math.abs(this.options.numberOfDays),
            start = getMonday(selectedDate),
            idx, length,
            dates = [];

        for (idx = 0, length = numberOfDays; idx < length; idx++) {
            dates.push(start);
            start = kendo.date.nextDay(start);
        }
        this._render(dates);
    },
    nextDate: function () {
        return kendo.date.nextDay(this.endDate());
    },
    previousDate: function () {
        var daysToSubstract = -Math.abs(this.options.numberOfDays); //get the negative value of numberOfDays
        var startDate = kendo.date.addDays(this.startDate(), daysToSubstract); //substract the dates
        return startDate;
    },
    _bindSwipe: function () { //bind the swipe event
        var that = this;
        var scheduler = that.element.closest("[data-role=scheduler]").data("kendoScheduler"); //get reference to the scheduler
        that.content.kendoTouch({ //initialize Kendo Touch on the View's content
            enableSwipe: true,
            swipe: function (e) {
                var action,
                date;

                if (e.direction === "left") {
                    action = "next";
                    date = that.nextDate();
                } else if (e.direction === "right") {
                    action = "previous";
                    date = that.previousDate();
                }

                //navigate with the scheduler
                if (!scheduler.trigger("navigate", { view: scheduler._selectedViewName, action: action, date: date })) {
                    scheduler.date(date);
                }
            }
        });
    }
});

function getMonday(d) {
    d = new Date(d);
    var day = d.getDay(),
        diff = d.getDate() - day + (day == 0 ? -6 : 1); // adjust when day is sunday
    return new Date(d.setDate(diff));
}

 

Thanks!

[Vladimir Iliev]

Hi Carlos,

Please note that custom solutions falls outside the scope of this support service. For such custom solutions you can check our professional services. 

Another option is to post your question to Kendo UI group at StackOverflow.

Regards,
Vladimir Iliev
Telerik by Progress

[Carlos]

Ok, thank you! 

 

I will keep trying!