Using Custom Views

[Sage]

I'm using a scheduler in cshtml:

@(Html.Kendo().Scheduler<TaskViewModel>()
            .Name("scheduler")
            .Views(views => { views.CustomView("ThreeDayView"); })
            .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 in making the scheduler only show 3 days at a time. However the next day and previous day functionality doesn't work.  I'm assuming I have to overwrite the previousday and nextday functionality, but am not sure how.  What I expect to happen is for the view to advance 1 day at a time (i.e. April 16 - 18 moves to April 17 - 19).

Also I am wanting to add custom edit functionality.  So when a task / event is clicked on, I want to do something other then opening the edit window (i.e set some variable) I think this is done with overwriting the editable function in the below jscript, but again am not sure how.  Any help and/or examples are greatly appreciated 

var ThreeDayView = kendo.ui.MultiDayView.extend({

            options: {

                selectedDateFormat: "{0:D} - {1:D}"

            },

            name: "ThreeDayView",

            calculateDateRange: function () {

                //create a range of dates to be shown within the view

 

                var selectedDate = this.options.date,

                    start = kendo.date.dayOfWeek(selectedDate, this.calendarInfo().firstDay, -1),

                    idx, length,

                    dates = [];

 

                for (idx = 0, length = 3; idx < length; idx++) {

                    dates.push(start);

                    start = kendo.date.nextDay(start);

                }

 

                this._render(dates);

            }

        });


[Rosen]

Hello Sage,

In order the custom view to behave as you have described, the nextDate method should be overridden to return the next to the start date. Also with the current implementation the view always starts at the first day of the week, which does not comply to the behavior you are looking for:

var ThreeDayView = kendo.ui.MultiDayView.extend({
    nextDate: function () {
        return kendo.date.nextDay(this.startDate());
    },
    options: {
        selectedDateFormat: "{0:D} - {1:D}"
    },
    name: "ThreeDayView",
    calculateDateRange: function () {
        //create a range of dates to be shown within the view

        var //selectedDate = this.options.date,
           // start = kendo.date.dayOfWeek(selectedDate, this.calendarInfo().firstDay, -1),
           start = this.options.date,
            idx, length,
            dates = [];

        for (idx = 0, length = 3; idx < length; idx++) {
            dates.push(start);
            start = kendo.date.nextDay(start);
        }

        this._render(dates);
    }
});

Regarding the edit functionality. It will be easier to use the scheduler edit event to prevent the popup from showing and to add the custom logic.

@(Html.Kendo().Scheduler<TaskViewModel>()
            .Name("scheduler")
            .Events(events => events.Edit("edit"))
 )

<script type="text/javascript">
    function edit(e) {
        e.preventDefault();
        // do something here;
    }
</script>

 

Regards,
Rosen
Telerik

 

 

[Sage]

Perfect, thank you so much. This is exactly what I was looking for. 

One question though, in the edit function after e.preventDefault, and I do my other stuff, the event I clicked on is being removed from the scheduler.  How do I ensure this does not happen?

[Rosen]

Hello Sage,

I'm afraid that I'm not sure what may cause such behavior for the provided details. Here is a test page which tries to replicate the described scenario, however such behavior is not observed. Thus, please modify the test page as the issue to appear and send it back to us for further investigation.

Regards,
Rosen
Telerik

 

 

[K.Ramadan]

Hello,

can anyone please tell me where should i write this :

var ThreeDayView = kendo.ui.MultiDayView.extend({
    nextDate: function () {
        return kendo.date.nextDay(this.startDate());
    },
    options: {
        selectedDateFormat: "{0:D} - {1:D}"
    },
    name: "ThreeDayView",
    calculateDateRange: function () {
        //create a range of dates to be shown within the view

        var //selectedDate = this.options.date,
           // start = kendo.date.dayOfWeek(selectedDate, this.calendarInfo().firstDay, -1),
           start = this.options.date,
            idx, length,
            dates = [];

        for (idx = 0, length = 3; idx < length; idx++) {
            dates.push(start);
            start = kendo.date.nextDay(start);
        }

        this._render(dates);
    }
});

 

I wrote it in the Bound() of the Scheduler and in the document.ready() but in both cases when i click on the ThreeDayView, the Console of the Browser shows this :

Uncaught Error: There is no such view
    at init._initializeView (kendo.all.js:117463)
    at init._renderView (kendo.all.js:117414)
    at init._selectView (kendo.all.js:117379)
    at init.view (kendo.all.js:117404)
    at HTMLButtonElement.<anonymous> (kendo.all.js:117751)
    at HTMLDivElement.dispatch (jquery.min.js:3)
    at HTMLDivElement.r.handle (jquery.min.js:3)

 

Thanks in Advance 

Karam Ramadan

[Neli]

Hello,

You could place the implementation for the ThreeDayView in a script tag. Below you will find an example:

 

<script>
     var ThreeDayView = kendo.ui.MultiDayView.extend({
        nextDate: function () {
          return kendo.date.nextDay(this.startDate());
        },
        options: {
          selectedDateFormat: "{0:D} - {1:D}"
        },
        name: "ThreeDayView",
        calculateDateRange: function () {          
          var start = this.options.date,
            idx, length,
            dates = [];

          for (idx = 0, length = 3; idx < length; idx++) {
            dates.push(start);
            start = kendo.date.nextDay(start);
          }

          this._render(dates);
        }
      });
</script>

@(Html.Kendo().Scheduler<SchedulerBasicMVC.Models.ScheduleViewModel>()
    .Name("scheduler")
            .Date(DateTime.Now)           
            .Views(views =>
            {
                views.DayView();                
                views.CustomView("ThreeDayView", view => view.Title("Three Day View").Selected(true));
            })            
            .DataSource(d => d
                .....
                )
            )
)

You could find a runnable sample for implementing custom view in Scheduler in UI for ASP.NET MVC projects on the following link. In the example, the AgendaView is extended, but you could see where the implementation is placed:

- https://docs.telerik.com/aspnet-mvc/html-helpers/scheduling/scheduler/how-to/custom-view

For convenience, here is a link to the Index.cshtml page of the project.

I hope this helps.

Regards,
Neli
Progress Telerik