I have problems having the scheduler widget initialize correctly.
When it shows up, I have to go forward one day and then backward one day to have it render as it should.
Why?
Because of problems with posting images on this forum, I had to create a stack overflow posting, if you are interested in screenshots of the rendition, look here.
The source code for index.html comes here (it is probably looking better on stack overflow):
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script src="js/jquery.min.js"></script>
<script src="js/kendo.web.js"></script>
<script src="js/kendo.mobile.js"></script>
<script>
var app = new kendo.mobile.Application(document.body,
{
skin: 'flat'
});
window.kendoMobileApplication = app;
$(function()
{
init_scheduler();
change_view("#vHome");
});
function change_view(view)
{
app.navigate(view);
}
function init_scheduler()
{
$("#wScheduler").kendoScheduler({
date: new Date("2013/6/13"),
startTime: new Date("2013/6/13 07:00 AM"),
height: 600,
views: [
"day",
{ type: "workWeek", selected: true },
"week",
"month",
"agenda"
],
timezone: "Etc/UTC",
dataSource: {
batch: true,
transport: {
read: {
url: "http://demos.kendoui.com/service/tasks",
dataType: "jsonp"
},
update: {
url: "http://demos.kendoui.com/service/tasks/update",
dataType: "jsonp"
},
create: {
url: "http://demos.kendoui.com/service/tasks/create",
dataType: "jsonp"
},
destroy: {
url: "http://demos.kendoui.com/service/tasks/destroy",
dataType: "jsonp"
},
parameterMap: function(options, operation)
{
if (operation !== "read" && options.models)
{
return { models: kendo.stringify(options.models) };
}
}
},
schema: {
model: {
id: "taskId",
fields: {
taskId: { from: "TaskID", type: "number" },
title: { from: "Title", defaultValue: "No title", validation: { required: true } },
start: { type: "date", from: "Start" },
end: { type: "date", from: "End" },
startTimezone: { from: "StartTimezone" },
endTimezone: { from: "EndTimezone" },
description: { from: "Description" },
recurrenceId: { from: "RecurrenceID" },
recurrenceRule: { from: "RecurrenceRule" },
recurrenceException: { from: "RecurrenceException" },
ownerId: { from: "OwnerID", defaultValue: 1 },
isAllDay: { type: "boolean", from: "IsAllDay" }
}
}
},
filter: {
logic: "or",
filters: [
{ field: "ownerId", operator: "eq", value: 1 },
{ field: "ownerId", operator: "eq", value: 2 }
]
}
},
resources: [
{
field: "ownerId",
title: "Owner",
dataSource: [
{ text: "Alex", value: 1, color: "#f8a398" },
{ text: "Bob", value: 2, color: "#51a0ed" },
{ text: "Charlie", value: 3, color: "#56ca85" }
]
}
]
});
}
function on_goto_scheduler_clicked()
{
change_view('#vCalendar');
}
</script>
<link href="css/kendo.mobile.flat.css" rel="stylesheet" />
<link href="css/kendo.common.css" rel="stylesheet" />
<link href="css/kendo.default.css" rel="stylesheet" />
<style>
[href*=index], #back-button
{
visibility: hidden;
}
</style>
</head>
<body>
<div data-role="view" id="vHome">
<div class="margin-box">
<span data-role="button" data-click="on_goto_scheduler_clicked">show scheduler</span>
</div>
</div>
<div data-role="view" id="vCalendar">
<div id="wScheduler"></div>
</div>
</body>
</html>
When it shows up, I have to go forward one day and then backward one day to have it render as it should.
Why?
Because of problems with posting images on this forum, I had to create a stack overflow posting, if you are interested in screenshots of the rendition, look here.
The source code for index.html comes here (it is probably looking better on stack overflow):
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script src="js/jquery.min.js"></script>
<script src="js/kendo.web.js"></script>
<script src="js/kendo.mobile.js"></script>
<script>
var app = new kendo.mobile.Application(document.body,
{
skin: 'flat'
});
window.kendoMobileApplication = app;
$(function()
{
init_scheduler();
change_view("#vHome");
});
function change_view(view)
{
app.navigate(view);
}
function init_scheduler()
{
$("#wScheduler").kendoScheduler({
date: new Date("2013/6/13"),
startTime: new Date("2013/6/13 07:00 AM"),
height: 600,
views: [
"day",
{ type: "workWeek", selected: true },
"week",
"month",
"agenda"
],
timezone: "Etc/UTC",
dataSource: {
batch: true,
transport: {
read: {
url: "http://demos.kendoui.com/service/tasks",
dataType: "jsonp"
},
update: {
url: "http://demos.kendoui.com/service/tasks/update",
dataType: "jsonp"
},
create: {
url: "http://demos.kendoui.com/service/tasks/create",
dataType: "jsonp"
},
destroy: {
url: "http://demos.kendoui.com/service/tasks/destroy",
dataType: "jsonp"
},
parameterMap: function(options, operation)
{
if (operation !== "read" && options.models)
{
return { models: kendo.stringify(options.models) };
}
}
},
schema: {
model: {
id: "taskId",
fields: {
taskId: { from: "TaskID", type: "number" },
title: { from: "Title", defaultValue: "No title", validation: { required: true } },
start: { type: "date", from: "Start" },
end: { type: "date", from: "End" },
startTimezone: { from: "StartTimezone" },
endTimezone: { from: "EndTimezone" },
description: { from: "Description" },
recurrenceId: { from: "RecurrenceID" },
recurrenceRule: { from: "RecurrenceRule" },
recurrenceException: { from: "RecurrenceException" },
ownerId: { from: "OwnerID", defaultValue: 1 },
isAllDay: { type: "boolean", from: "IsAllDay" }
}
}
},
filter: {
logic: "or",
filters: [
{ field: "ownerId", operator: "eq", value: 1 },
{ field: "ownerId", operator: "eq", value: 2 }
]
}
},
resources: [
{
field: "ownerId",
title: "Owner",
dataSource: [
{ text: "Alex", value: 1, color: "#f8a398" },
{ text: "Bob", value: 2, color: "#51a0ed" },
{ text: "Charlie", value: 3, color: "#56ca85" }
]
}
]
});
}
function on_goto_scheduler_clicked()
{
change_view('#vCalendar');
}
</script>
<link href="css/kendo.mobile.flat.css" rel="stylesheet" />
<link href="css/kendo.common.css" rel="stylesheet" />
<link href="css/kendo.default.css" rel="stylesheet" />
<style>
[href*=index], #back-button
{
visibility: hidden;
}
</style>
</head>
<body>
<div data-role="view" id="vHome">
<div class="margin-box">
<span data-role="button" data-click="on_goto_scheduler_clicked">show scheduler</span>
</div>
</div>
<div data-role="view" id="vCalendar">
<div id="wScheduler"></div>
</div>
</body>
</html>
3 Answers, 1 is accepted
0
Hi,
The behavior you have described is caused by the fact that the scheduler widget is not visible during its initialization and it size cannot be adjusted correctly. Therefore, you will need to manually refresh the widget when the view is displayed.
Regards,
Rosen
Telerik
The behavior you have described is caused by the fact that the scheduler widget is not visible during its initialization and it size cannot be adjusted correctly. Therefore, you will need to manually refresh the widget when the view is displayed.
<div data-role="view" id="vCalendar" data-show="refreshScheduler"> <div id="wScheduler"></div> </div><script> function refreshScheduler() { $("#wScheduler").data("kendoScheduler").resize(); }</script>Regards,
Rosen
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
100%
Top achievements
Rank 1
Rank 1
answered on 27 Jan 2014, 04:09 PM
I tried this:
<div data-role="view" id="vCalendar" data-layout="drawer-layout" data-title="Kalender" >
<div id="wScheduler" data-init="init_scheduler" data-show="refreshScheduler"></div>
</div>
but the events do not trigger.
Then I put the attributes data-init and data-show in the parent view.
<div data-role="view" id="vCalendar" data-layout="drawer-layout" data-title="Kalender" data-init="init_scheduler" data-show="refreshScheduler">
<div id="wScheduler"></div>
</div>
That was triggering the events init and then refresh almost always.
When those events were triggered, the scheduler got the right look.
Some times however, only the show event occurs in case the scheduler will still be broken.
In other words, problem not solved yet.
<div data-role="view" id="vCalendar" data-layout="drawer-layout" data-title="Kalender" >
<div id="wScheduler" data-init="init_scheduler" data-show="refreshScheduler"></div>
</div>
but the events do not trigger.
Then I put the attributes data-init and data-show in the parent view.
<div data-role="view" id="vCalendar" data-layout="drawer-layout" data-title="Kalender" data-init="init_scheduler" data-show="refreshScheduler">
<div id="wScheduler"></div>
</div>
That was triggering the events init and then refresh almost always.
When those events were triggered, the scheduler got the right look.
Some times however, only the show event occurs in case the scheduler will still be broken.
In other words, problem not solved yet.
0
Hi,
You may try changing the resize method call with refresh instead and see if this helps.
Regards,
Rosen
Telerik
You may try changing the resize method call with refresh instead and see if this helps.
function refreshScheduler() { $("#wScheduler").data("kendoScheduler").refresh();}Regards,
Rosen
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!