TimelineView setting number of days/timeslots

6 posts, 0 answers
  1. Chad
    Chad avatar
    13 posts
    Member since:
    Aug 2012

    Posted 21 Jul 2015 Link to this post

     In the webforms control I was able to set the Timeline to a specific day then set how many days I wanted to see after that day. I did this by setting the NumberOfSlots property. I have not been able to find this property in the MVC Scheduler. How do I get this same behavior with the MVC Scheduler control. 

     thanks for the help. 

  2. eo
    eo avatar
    27 posts
    Member since:
    Jul 2015

    Posted 22 Jul 2015 in reply to Chad Link to this post

    Hello Chad,

    To set a specific day and length to a Timeline you can create a new custom view that inherits from the Timeline class by calling kendo.Class.extend. Here is an example of a Timeline with a 3-day and a 12-day range that you can use for guidance. 

  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Chad
    Chad avatar
    13 posts
    Member since:
    Aug 2012

    Posted 22 Jul 2015 Link to this post

    thanks. that got me going in the right direction. the only issue I'm having now is the title is not working. Its coming up at the full declared name. My code is below. No sure how to fix it other than creating a hack to look for the class and change the name in the html anchor link.

     var TimelineViewFiveDays = kendo.ui.TimelineView.extend({
            options: {
                name: "TimelineViewFiveDays",
                title: "5 Days",
                selectedDateFormat: "{0:D} - {1:D}",
                selectedShortDateFormat: "{0:d} - {1:d}",
                majorTick: 1440,
                minorTickCount: 1
            },
            name: "timelineviewfivedays",
            title: "5 Days",
            calculateDateRange: function () {
                //create a range of dates to be shown within the view
                var selectedDate = this.options.date;
                var start = selectedDate;
                var dates = [];
                var idx;

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

                this._render(dates);
                hideTimeRow();
                $('#hdfSetting').val('3')
            }
        });

        var TimelineViewSevenDays = kendo.ui.TimelineView.extend({
            options: {
                name: "TimelineViewSevenDays",
                title: "7 Days",
                selectedDateFormat: "{0:D} - {1:D}",
                selectedShortDateFormat: "{0:d} - {1:d}",
                majorTick: 1440,
                minorTickCount: 1
            },
            name: "timelineviewsevendays",
            calculateDateRange: function () {
                //create a range of dates to be shown within the view
                var selectedDate = this.options.date;
                var start = selectedDate;
                var dates = [];
                var idx;

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

                this._render(dates);
                hideTimeRow();
                $('#hdfSetting').val('4')
            }
        });

        var TimelineViewThirtyDays = kendo.ui.TimelineView.extend({
            options: {
                name: "TimelineViewThirtyDays",
                title: "30 Days",
                selectedDateFormat: "{0:D} - {1:D}",
                selectedShortDateFormat: "{0:d} - {1:d}",
                majorTick: 1440,
                minorTickCount: 1
            },
            name: "timelineviewthirtydays",
            calculateDateRange: function () {
                //create a range of dates to be shown within the view
                var selectedDate = this.options.date;
                var start = selectedDate;
                var dates = [];
                var idx;

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

                this._render(dates);
                hideTimeRow();
                $('#hdfSetting').val('5')
            }
        });

     

    @(Html.Kendo().Scheduler<Avianis.Models.Scheduler.AppointmentViewModel>()
            .Name("scheduler")
            .Date(new DateTime(DateTime.Now.Year, DateTime.Now.Month, DateTime.Now.Day))
            .Height(600)
            .AutoBind(false)
            .Snap(true)
            .Events(e =>
            {
                e.Change("scheduler_change");
                e.Navigate("scheduler_navigate");
            })
            .Views(views =>
            {   
                views.TimelineView(timeline => timeline
                    .Title("Day")
                    .EventHeight(50)
                    .Selected(true)
                    .MajorTick(60)
                    .MinorTickCount(1)                
                );
                views.CustomView("TimelineViewFiveDays");
                views.CustomView("TimelineViewSevenDays");
                views.CustomView("TimelineViewThirtyDays");
                views.MonthView(timeline => timeline.EventHeight(50));
            })
            .Group(group => group.Resources("Aircraft").Orientation(SchedulerGroupOrientation.Vertical))
            .Resources(resource => resource.Add(m => m.ResourceID)
                         .Title("Aircraft")
                         .Name("Aircraft")
                         .DataTextField("text")
                         .DataValueField("id")
                         .DataSource(source => source
                             .Read("GetResources", "Calendar"))
            )
            .Editable(editable => editable
                .Update(false)
                .Create(false)
                .Destroy(false)
                .Move(false)
                .Resize(false)
            )
            .EventTemplate(
                        "<div class='#= CssClass # app'>" +
                            "<input type='hidden' id='hdfType' value='#= TypeID #' />" +
                            "<input type='hidden' id='hdfLegId' value='#= FlightLegID #' />" +
                            "<input type='hidden' id='hdfTripId' value='#= TripID #' />" +
                            "<input type='hidden' id='hdfEventId' value='#= UserEventID #' />" +
                            "<input type='hidden' id='hdfJobCardId' value='#= JobCardID #'  />" +
                            "<input type='hidden' id='hdfDiscrepId' value='#= DiscrepancyID #' />" +
                            "#= title #" +
                            "<div id='info' class='appInfo'>" +
                                "#= description #" +
                            "</div>" +
                        "</div>"
            )
            .DataSource(dataSource => dataSource            
                .SignalR()
                .Transport(tr => tr
                    .Promise("hubStart")
                    .Hub("calendarHub")
                    //.Client(c => c.Read("LoadAircraft"))
                    .Server(s => s.Read("LoadAircraft"))
                )
                .ServerFiltering(false)
                .Schema(schema => schema
                    .Model(model =>
                    {
                        model.Id(m => m.ID);
                        model.Field(m => m.ID).Editable(false);
                        model.Field("start", typeof(DateTime)).From("Start");
                        model.Field("end", typeof(DateTime)).From("End");
                        model.Field("title", typeof(string)).From("Subject");
                        model.Field("description", typeof(string)).From("Description");
                        //model.Field("recurrenceID", typeof(int)).From("RecurrenceID");
                        //model.Field("recurrenceRule", typeof(string)).From("RecurrenceRule");
                        //model.Field("recurrenceException", typeof(string)).From("RecurrenceException");
                        model.Field("isAllDay", typeof(bool)).From("IsAllDay");
                        //model.Field("startTimezone", typeof(string)).From("StartTimezone");
                        //model.Field("endTimezone", typeof(string)).From("EndTimezone");
                        model.Field("ownerId", typeof(string)).From("OwnerId");
                    }))
                )
        )

     

  5. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 24 Jul 2015 Link to this post

    Hi Robert,


    When I set the "title" option of the view on our side using the following approach it's shown correctly:

    views.CustomView("kendo.ui.SchedulerTimelineYearView", view => view.Title("CUSTOM TITLE"));

    Please check the example below which shows the above solution in previous example:


    Regards,
    Vladimir Iliev
    Telerik
    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
  6. Chad
    Chad avatar
    13 posts
    Member since:
    Aug 2012

    Posted 24 Jul 2015 Link to this post

    thanks, that helps a lot. The only other question regarding custom views is how to load them programmatically on page load. For instance, I save the last view the user was on so that when they come back it will show that view. I have a setting in a hidden field with the Custom View name in it. I'm trying to load the custom view on page load like this. 

    var scheduler = $("#scheduler").data("kendoScheduler");
    scheduler.view($('#hdfCustomView').val())​ and scheduler.view($('#hdfCustomView').val())
    scheduler.view(scheduler.view().name);

    it is not working and when I try to do it in the console it gives the following errors.  Error: There is no such view. or TypeError: Cannot read property 'children' of null

    thanks in advance.

  7. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 27 Jul 2015 Link to this post

    Hi,

    Possible solution is to add custom field to the custom view which to contain the exact class name. This way when you save the view name for later loading you can check for this field and if exist you can save it instead of the name of the view. If it's still not clear how to proceed you can check the example below:

    var SchedulerTimelineYearView = SchedulerTimelineView.extend({
      customViewType: "kendo.ui.SchedulerTimelineYearView",
      nextDate: function() {
        var start = this.startDate();
        return new Date(start.getFullYear() + 1, 0, 1);
      },

    //saving the view name:
    var scheduler = $("[data-role=scheduler]").getKendoScheduler();
    var view = scheduler.view();
    var oldViewName = view.customViewType ? view.customViewType : view.name;
     
     
    //loading the view name
    scheduler = $("[data-role=scheduler]").getKendoScheduler();
    scheduler.view(oldViewName);

    Regards,
    Vladimir Iliev
    Telerik
    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
Back to Top
UI for ASP.NET MVC is VS 2017 Ready