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?
Related
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>
<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.
$(document).ready(function () {
var agenciesData = new kendo.DataToken.DataSource({
type: 'webapi',
transport: {
read: { url: "/api/Agencies/", dataType: "json", data: { activity: getActivity() } },
create: { url: "/api/Agencies", type: "POST", dataType: "json" },
destroy: { url: "/api/Agencies/{0}", type: "DELETE" },
update: { url: "/api/Agencies/{0}", type: "PUT" },
idField: "ID"
},
filter: [{ field: "Activity", operator: "eq", value: getActivity() }],
pageSize: 15,
page: 1,
total: 0,
serverPaging: true,
serverSorting: true,
serverFiltering: true,
schema: {
data: "Data",
total: "Total",
model: {
id: "ID",
fields: {
ID: { editable: false, type: "number" },
AgencyName: { type: "string" },
AgentName: { type: "string" },
Address: { type: "string" },
City: { type: "string" },
Tel1: { type: "string" },
Tel2: { type: "string" },
Pele: { type: "string" },
Activity: { type: "number" },
ToDate: { type: "date" }
}
}
}
});
$("#agenciesGrid").kendoGrid({
dataSource: agenciesData,
toolbar: [{ text: "valid", className: "validAgents" }, { text: "not valid", className: "notValid" }, { text: "all", className: "allAgents" }, { text: "potential", className: "potetial" }],
editable: false,
navigatable: true,
sortable: true,
autoBind: false,
height: 430,
pageable: { refresh: true },
columns: [
{ field: "ID", hidden: true },
{ field: "AgencyName", title: "agency", width: 150, filterable: { cell: { operator: "contains" } } },
{ field: "AgentName", title: "agent", width: 150, filterable: { cell: { operator: "contains" } } },
{ field: "Address", title: "address", width: 200, template: "#= Address + ' ' + City #", filterable: false },
{ field: "Tel1", title: "phones", width: 300, template: "#= Tel1 + ' : ' + Tel2 + ' : ' + Pele #", filterable: false },
{ field: "Activity", title: "active", width: "90px" },
{ field: "ToDate", title: "end Contract", type: "date", width: 90, format: "{0:dd/MM/yyyy}", parseFormats: ["yyyy-MM-ddThh:mm:ss"] }
]
});
$(".validAgents").click(function () { //valid
$("#myActivity").val("1");
$('#agenciesGrid').data().kendoGrid.dataSource.read({ activity: "1" });
});
$(".notValid").click(function () {//notValid
$("#myActivity").val("2");
$('#agenciesGrid').data().kendoGrid.dataSource.read({ activity: "2" });
});
$(".potetial").click(function () {//potetial
$("#myActivity").val("3");
$('#agenciesGrid').data().kendoGrid.dataSource.read({ activity: "3" });
});
});
function getActivity(){
var myActivity = $("#myActivity").val();
return myActivity;
}
When I use kendo grid already filtered by parameter like : $('#someGrid').data().kendoGrid.dataSource.read({ activity: value });
i see the get: https://localhost:44305/api/Agencies/?sort=&page=1&pageSize=15&group=&filter=&activity=1
The grid is filter as expected but, when I want to do paging, sorting, refresh - I get the whole data ignoring the filter that i made.
and I see the get: https://localhost:44305/api/Agencies/?sort=&page=1&pageSize=15&group=&filter=
How can I save my filter state to do paging and sorting on the data came from the server side ?
even when i used differen approach like "scrollable: { virtual: true }" and when i scroll down - every request is without the filtering...
Thanks
Did you try
var agenciesData = new kendo.DataToken.DataSource({
filter : function () {
return object;
}
});
I mean try using filter as a function and you can do your logic inside the function depending on the situation.
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}"
I'm having a bit of difficulty with KendoUI Scheduler data(scheduler events or whatever you want to call them) display. The call is made amd the data comes in but it doesn't display it, nor does it cause any errors. I've pasted the code and responce, hoping that someone knows what I'm doing wrong.
And yes I've been switching between json/jsonp as the datatype and batch set to true and false in all possible combinations.
The Code:
var my_dataSource;
$("#calendar").kendoScheduler({
height: "650px",
timezone: "Etc/UTC",
views: [
"day",
"week",
{ type: "month", selected: true },
"agenda"
]
});
my_dataSource = new kendo.data.SchedulerDataSource({
transport: {
read: {
url: "ashx/Calendar/GetCalendarData.ashx",
cache: false,
data: {
dtFrom: convertDate($("#calendar").data("kendoScheduler").view().startDate()),
dtUntil: convertDate($("#calendar").data("kendoScheduler").view().endDate()),
DateInterval: "month",
dateIntervalSteps: "1",
Categories: ""
},
dataType: "jsonp"
},
batch: true,
parameterMap: function (options, operation) {
//console.log(JSON.stringify(options));
return options;
}
},
schema: {
data: "Data",
model: {
id: "taskID",
fields: {
taskID: { from: "id", type: "number" },
title: { from: "summary", defaultValue: "No title", validation: { required: false } },
start: { type: "date", from: "startTime" },
end: { type: "date", from: "endTime" },
//startTimezone: { from: "StartTimezone" },
//endTimezone: { from: "EndTimezone" },
//description: { from: "Description" },
//recurrenceId: { from: "RecurrenceID" },
//recurrenceRule: { from: "RecurrenceRule" },
//recurrenceException: { from: "RecurrenceException" },
ownerId: { from: "eOwnerId", defaultValue: 1 },
isAllDay: { type: "boolean", from: "allDay" }
}
}
}
});
var cal = $("#calendar").data("kendoScheduler");
cal.dataSource = my_dataSource;
The Response:
[
{
"id": 329837,
"summary": "Lorem Ipsum",
"startTime": "Date(1375862400)",
"endTime": "Date(1377273600)",
"allDay": true,
"calendar": "cat10001",
"eOwnerId": 1569,
"Title": "Project Meeting"
},
{
"id": 334664,
"summary": "Lorem Ipsum",
"startTime": "Date(1376985600)",
"endTime": "Date(1376989200)",
"allDay": false,
"calendar": "cat10002",
"eOwnerId": 130,
"Title": "Meeting"
},
{
"id": 334659,
"summary": "Lorem Ipsum",
"startTime": "Date(1377007200)",
"endTime": "Date(1377010800)",
"allDay": false,
"calendar": "cat10003",
"eOwnerId": 1810,
"Title": "Task"
}
]
I had a the same problem while getting no errors. What fixed it was (silly but) i was setting the start and end timezones ie. task.setEndTimezone(TimeZone.getTimeZone("UTC"));, just set them to null while timezone is still set in the returned start and end datetime of the task. Hope this helps.
I see "ReferenceError: convertDate is not defined" when using Firefox debugging...
dtFrom: convertDate($("#calendar").data("kendoScheduler").view().startDate()),
dtUntil: convertDate($("#calendar").data("kendoScheduler").view().endDate()),
You may want to make sure you are including all of the appropriate .js files