Kendo UI scheduler not showing json data - kendo-ui

I have a kendo UI scheduler that makes a ajax call and receives 2 json records through the read method. This is my scheduler widget.
$("#scheduler").kendoScheduler({
date: new Date(),
startTime:time ,
height: kendo.support.mobileOS.wp ? "28em" : 600,
views: [
{ type: "day", selected: true },
{ type: "week", selectedDateFormat: "{0:ddd,MMM dd,yyyy} - {1:ddd,MMM dd,yyyy}" },
"month",
{ type: "agenda", selectedDateFormat: "{0:ddd, M/dd/yyyy} - {1:ddd, M/dd/yyyy}" },
],
mobile: "phone",
datasource:{
batch: true,
transport: {
read: {
url: "http://mydomain.com/api/Schedule/Tasks_Read",
dataType: "jsonp"
},
update: {
url: "http://demos.telerik.com/kendo-ui/service/meetings/update",
dataType: "jsonp"
},
create: {
url: "http://demos.telerik.com/kendo-ui/service/meetings/create",
dataType: "jsonp"
},
destroy: {
url: "http://demos.telerik.com/kendo-ui/service/meetings/destroy",
dataType: "jsonp"
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {models: kendo.stringify(options.models)};
}
}
},
schema: {
data:"Data",
model: {
id: "AppointmentId",
fields: {
//meetingID: { from: "MeetingID", 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" },
//roomId: { from: "RoomID", nullable: true },
//atendees: { from: "Atendees", nullable: true },
isAllDay: { type: "boolean", from: "IsAllDay" },
//professionalId:{type:"string", from: "ProfessionalId", defaultValue=""},
//professionalName:{type:"string", from: "ProfessionalName"},
//clientId:{type:"string", from: "ClientId", defaultValue=""},
//clientName:{type:"string", from: "ClientName"}
}
}
}
}
})
I have 2 problems
the problem is that the records are not displayed on the scheduler
When i un-comment out my custom properties in the schema design the code when i compile the code it errors.
UPDAE
The json server response looks like
"{\"AppointmentId\":30,\"ClientId\":\"b26d9cc1-ddcc-4277-a4eb-61835c83fb48\",\"ClientName\":\"beast client\",\"ProfessionalId\":\"260f0c43-7ff9-4654-af2b-5df2f5b8d6a1\",\"ProfessionalName\":\"AutoFirstName AutoLastName\",\"Start\":\"2014-03-30T07:00:00\",\"End\":\"2014-03-30T07:30:00\",\"ColorUsed\":null,\"HairStyleId\":null,\"Title\":\"beast client Haircut \",\"Description\":\"beast client Haircut\",\"InactiveReasonDate\":null,\"InactiveReasonId\":null,\"IsAllDay\":false,\"StartTimezone\":null,\"EndTimezone\":null,\"RecurrenceRule\":null,\"RecurrenceException\":null,\"ClientRating\":null},{\"AppointmentId\":31,\"ClientId\":\"b26d9cc1-ddcc-4277-a4eb-61835c83fb48\",\"ClientName\":\"beast client\",\"ProfessionalId\":\"260f0c43-7ff9-4654-af2b-5df2f5b8d6a1\",\"ProfessionalName\":\"AutoFirstName AutoLastName\",\"Start\":\"2014-03-31T07:00:00\",\"End\":\"2014-03-31T07:30:00\",\"ColorUsed\":null,\"HairStyleId\":null,\"Title\":\"beast client Haircut\",\"Description\":\"beast client Haircut \",\"InactiveReasonDate\":null,\"InactiveReasonId\":null,\"IsAllDay\":false,\"StartTimezone\":null,\"EndTimezone\":null,\"RecurrenceRule\":null,\"RecurrenceException\":null,\"ClientRating\":null}"

Related

Kendo Scheduler Suggestions

I want to show day in shift for example 24 days hours can be divided into 3 shift 8 hours each or can 6 hours each.
Against that i wanted to add events in Kendo Scheduler. Each day must have shift as show in below image
in the image shift marked for each day and noted with different color.
Each shift can or can not have events.
I'm also expecting functionality where events can move across the shifts.
I believe you'll have to implement a custom view to accomplish this. Here is a Telerik page that demonstrates it, and if you click the "Open in Dojo" link in the upper right of the code example you can see it execute (and edit and try it yourself).
Code example for their custom 3-day view from link
<div id="scheduler"></div>
<script>
var CustomAgenda = kendo.ui.AgendaView.extend({
endDate: function() {
var date = kendo.ui.AgendaView.fn.endDate.call(this);
return kendo.date.addDays(date, 31);
}
});
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 that will be displayed within the view.
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);
}
});
$(function() {
$("#scheduler").kendoScheduler({
date: new Date("2013/6/13"),
startTime: new Date("2013/6/13 07:00 AM"),
height: 600,
views: [
"day",
"week",
// "custom week",
{ type: "ThreeDayView", title: "Three day view", selected: true },
// "custom agenda",
{ type: "CustomAgenda", title: "Custom Agenda" }
],
timezone: "Etc/UTC",
dataSource: {
batch: true,
transport: {
read: {
url: "https://demos.telerik.com/kendo-ui/service/tasks",
dataType: "jsonp"
},
update: {
url: "https://demos.telerik.com/kendo-ui/service/tasks/update",
dataType: "jsonp"
},
create: {
url: "https://demos.telerik.com/kendo-ui/service/tasks/create",
dataType: "jsonp"
},
destroy: {
url: "https://demos.telerik.com/kendo-ui/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" }
}
}
}
}
});
});
</script>

Kendo Schedular Uncaught TypeError: Cannot read property 'getTimezoneOffset' of undefined

<script>
$("#scheduler").kendoScheduler({
startTime: new Date("#DateTime.Now"),
height: 600,
views: [
"day",
{ type: "workWeek", selected: true },
"week",
"month",
"agenda",
{ type: "timeline", eventHeight: 50}
],
timezone: "Etc/GMT",
date: new Date("#DateTime.Now"),
dataSource: {
batch: true,
transport: {
read: {
url: url + "read",
dataType: "json",
type: "GET"
},
update: {
url: url + "update",
dataType: "json",
type: "POST"
},
create: {
url: url + "create",
dataType: "json",
type: "POST"
},
destroy: {
url: url + "destory",
dataType: "json",
type: "POST"
},
parameterMap: function (options, operation) {
return {
models: options.models,
};
}
},
schema: {
model: {
id: "ID",
fields: {
ID: { from: "ID", type: "number" },
Title: { from: "Title", defaultValue: "No title", validation: { required: true } },
Start: { type: "datetime", from:"Start" , format: "{0:dd-MM-yyyy}"},
End: { type: "datetime", from: "End", format: "{0:dd-MM-yyyy}" },
Description: { from: "Description" },
UserID: { from: "UserID", defaultValue: 1 },
IsAllDay: { type: "boolean", from: "IsAllDay" }
}
}
},
filter: {
logic: "or",
filters: [
{ field: "UserID", operator: "eq", value: 1 },
{ field: "UserID", operator: "eq", value: 2 }
]
}
},
resources: [
{
field: "UserID",
title: "Owner",
dataSource: [
{ text: "Alex", value: 1, color: "#f8a398" },
{ text: "Bob", value: 2, color: "#51a0ed" },
{ text: "Charlie", value: 3, color: "#56ca85" }
]
}
]
});
</script>
I've got this problem according the date property in the Kendo UI scheduler. It keeps saying that it's undefined but I'm really sure I defined it as you can see. I've been searching now for a while but I still haven't found the answer. Maybe someone could help me? I can provide every piece of could you would like to see.

Kendo UI scheduler doesn't display data

I am currently working on a kendoscheduler for a sharepoint list. I'm building off of this demo.
I'm populating my demo with the data which is present at this URL, which I have mapped locally. The only difference between the article and my code is that their URL is http://demos.telerik.com/kendo-ui/scheduler/timeline-night but mine is some JSON stored in a local file.
Here is my code:
<script>
$(function () {
$("#scheduler").kendoScheduler({
date: new Date("2013/6/12"),
startTime: new Date("2013/6/12 08:00 PM"),
endTime: new Date("2013/6/12 08:00 PM"),
dateHeaderTemplate: kendo.template("<strong>#=kendo.toString(date, 'D')# - #=kendo.toString(kendo.date.nextDay(date), 'D')#</strong>"),
eventHeight: 50,
majorTick: 360,
views: [ "timeline", "timelineWeek" ],
timezone: "Etc/UTC",
dataSource: {
batch: true,
transport: {
read: {
url: _spPageContextInfo.webAbsoluteUrl + "/_layouts/15/Stomo/Ajax.aspx/GetDataForTimeline",
}
},
schema: {
model: {
id: "meetingID",
fields: {
meetingID: { from: "MeetingID", 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" },
roomId: { from: "RoomID", nullable: true },
attendees: { from: "Attendees", nullable: true },
isAllDay: { type: "boolean", from: "IsAllDay" }
}
}
}
},
group: {
resources: ["Rooms"],
orientation: "vertical"
},
resources: [{
field: "roomId",
name: "Rooms",
dataSource: [
{ text: "Meeting Room 101", value: 1, color: "#6eb3fa" },
{ text: "Meeting Room 201", value: 2, color: "#f58a8a" }
],
title: "Room"
}]
});
});
</script>
Here is the response i am getting from my ajax call
[
{
"MeetingID":2,
"RoomID":1,
"Attendees":[
2
],
"Title":"Meeting with customers.",
"Description":"",
"StartTimezone":null,
"Start":"\/Date(1370865600000)\/",
"End":"\/Date(1370872800000)\/",
"EndTimezone":null,
"RecurrenceRule":null,
"RecurrenceID":null,
"RecurrenceException":null,
"IsAllDay":false
},
{
"MeetingID":3,
"RoomID":2,
"Attendees":[
1,
2
],
"Title":"Guided tour for the investors.",
"Description":"",
"StartTimezone":null,
"Start":"\/Date(1370865600000)\/",
"End":"\/Date(1370872800000)\/",
"EndTimezone":null,
"RecurrenceRule":null,
"RecurrenceID":null,
"RecurrenceException":null,
"IsAllDay":false
}]
Do you have any thoughts on how to make this work correctly?

kendo scheduler datasource required fields

I'm trying to show some events in a kendo scheduler but they do not show. What are the required fields that the datasourse needs? I have id, title, start and end which is what the documentation says.
here is my code:
dataSource: {
batch: true,
transport: {
read: {
url: "/schedule/appointments_read",
dataType: "jsonp"
},
parameterMap: function(options, operation)
{
if (operation !== "read" && options.models)
{
return { models: kendo.stringify(options.models) };
}
},
schema: {
model: {
id: "id",
fields: {
id: { from: "Id", type: "number" },
title: { from: "Title", },
start: { from: "Start", type: "date"},
end: { from: "End", type: "date"}
}
}
}
}
}
here is the json that I return:
{"Data":
[{"Id":1,"Title":"AAA","Start":"\/Date(1414767600000)\/","End":"\/Date(1414771200000)\/"},
{"Id":2,"Title":"BBB","Start":"\/Date(1414771200000)\/","End":"\/Date(1414774800000)\/"},
{"Id":3,"Title":"CCC","Start":"\/Date(1414774800000)\/","End":"\/Date(1414778400000)\/"},
{"Id":4,"Title":"DDD","Start":"\/Date(1414778400000)\/","End":"\/Date(1414782000000)\/"}],
"Total":4,"AggregateResults":null,"Errors":null}
those are four one hour long appointments at 8:00, 9:00, 10:00 and 11:00 on the current day.
what am I missing?
Required fields are listed in the SchedulerEvent API.

KendoUi schedulardata not display in schedular

I am not able to display data in schedular of kendoUI->read function using remote binding.
Is there any special way for read data from kendoUI schedualr Or AM i missing something please guide me proper.
Data reading via ajax is display in firebug but not display in schedular
ajax is working but there is some break in code i dont know please help me to out from this
$("#scheduler").kendoScheduler({
date: new Date("2014/6/01"),
startTime: new Date("2014/6/01 07:00 AM"),
height: 600,
views: [
"day",
"week",
"month",
{ type: "workWeek", selected: true },
],
timezone: "Etc/UTC",
transport: {
read: {
url: "http://abc/abcxyz/abc/read",
dataType: "json"
},
update: {
url: "http://demos.telerik.com/kendo-ui/service/tasks/update",
dataType: "jsonp"
},
create: {
url: "http://demos.telerik.com/kendo-ui/service/tasks/create",
dataType: "jsonp"
},
destroy: {
}
},
schema: {
model: {
id: "id",
fields: {
id:{ type: "number", from: "business_id"},
from: { type: "date", from: "from" },
to: { type: "date", from: "to" },
id:{ type: "number", from: "id"},
name:{ type: "string", from: "name"}
}
}
}
});
});
Please help me out for above issue,
Thanks in advance.
Have you try the with the kendoUi Schedular demo ? Please try this one
http://demos.telerik.com/kendo-ui/scheduler/index

Resources