This is a migrated thread and some comments may be shown as answers.

TimelineView setting number of days/timeslots

5 Answers 293 Views
Scheduler
This is a migrated thread and some comments may be shown as answers.
Chad
Top achievements
Rank 2
Chad asked on 22 Jul 2015, 04:56 AM

 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. 

5 Answers, 1 is accepted

Sort by
0
eo
Top achievements
Rank 1
answered on 22 Jul 2015, 04:36 PM

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. 

0
Chad
Top achievements
Rank 2
answered on 22 Jul 2015, 05:40 PM

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");
                }))
            )
    )

 

0
Vladimir Iliev
Telerik team
answered on 24 Jul 2015, 07:50 AM
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
0
Chad
Top achievements
Rank 2
answered on 24 Jul 2015, 04:52 PM

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.

0
Vladimir Iliev
Telerik team
answered on 27 Jul 2015, 10:06 AM
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
Tags
Scheduler
Asked by
Chad
Top achievements
Rank 2
Answers by
eo
Top achievements
Rank 1
Chad
Top achievements
Rank 2
Vladimir Iliev
Telerik team
Share this question
or