Custom View Grouping all-day events in one Event Count

3 posts, 0 answers
  1. Carlos
    Carlos avatar
    13 posts
    Member since:
    Apr 2015

    Posted 05 Oct 2016 Link to this post


    I'm using a kendo Scheduler in cshtml.

                .Views(views =>
                    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) {
  , 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 =,
                numberOfDays = Math.abs(this.options.numberOfDays),
                start = getMonday(selectedDate),
                idx, length,
                dates = [];
            for (idx = 0, length = numberOfDays; idx < length; idx++) {
                start =;
        nextDate: function () {
        previousDate: function () {
            var daysToSubstract = -Math.abs(this.options.numberOfDays); //get the negative value of numberOfDays
            var 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,
                    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 })) {
    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));



  2. Vladimir Iliev
    Vladimir Iliev avatar
    2190 posts

    Posted 07 Oct 2016 Link to this post

    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.

    Vladimir Iliev
    Telerik by Progress
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. Carlos
    Carlos avatar
    13 posts
    Member since:
    Apr 2015

    Posted 11 Oct 2016 Link to this post

    Ok, thank you! 


    I will keep trying!

Back to Top