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