How do I bind Json data to kendoscheduler. Javascript. I am new to kendo products. I am able to get Json data to show in Fullcalendar
{
"title":"Graduation Ceremony Group H",
"start":"4/23/2015",
"end":"4/23/2015",
"description":"901 Boulevard Street"
}
First you need to build its datasource and then put the datasource to the scheduler..
$("#scheduler").kendoScheduler({
date: new Date("2013/6/6")
});
var scheduler = $("#scheduler").data("kendoScheduler");
var dataSource = new kendo.data.SchedulerDataSource({
data: [
{
id: 1,
start: new Date("2013/6/6 08:00 AM"),
end: new Date("2013/6/6 09:00 AM"),
title: "Interview"
}
]
});
scheduler.setDataSource(dataSource);
Read following documentation to help you build your own scheduler with proper datasource so its fit what you need..
DataSource Documentation
Scheduler DataSource Documentation
Scheduler Documentation
Related
How do I add a 15 day (bimonthly) view in Kendo UI Scheduler?
The idea is to show 15 days at a time (as opposed to 30 days in a month).
Any help is greatly appreciated.
This can be done using custom timeline view ,
var MyCustomTimelistView = kendo.ui.TimelineMonthView.extend({
options: {
name: "MyCustomTimelistView",
title: "Timeline Week",
selectedDateFormat: "{0:D} - {1:D}",
selectedShortDateFormat: "{0:d} - {1:d}",
majorTick: 1440,
**numberOfDays: 15**
},
and then the view type will be "MyCustomTimelistView"
var scheduler = $("#scheduler").kendoScheduler({
date: new Date("2013/6/13"),
startTime: new Date("2013/6/13 07:00 AM"),
height: 600,
views: [{
type: "**MyCustomTimelistView**",
selected: true,
dateHeaderTemplate: "<span class='k-link k-nav-day'>#=kendo.toString(date, ' dd/M ddd')#</span>"
}],
Reference: https://docs.telerik.com/kendo-ui/controls/scheduling/scheduler/how-to/custom-views/timeline-with-dynamic-length
Is there a way to implement new milestones via data feed from database? I checked the example below but couldn't figure out
https://www.amcharts.com/kbase/time-line-chart-date-based-milestones/
I use "dataLoader" to feed the values into graphs I can just create a new column in my table for the milestones question is how to update it?
The milestones in that example are guides, so they don't normally get updated in any process that modifies the chart's dataProvider. You can use the complete callback to create/update your chart guides:
AmCharts.makeChart("chartdiv", {
// ...
dataLoader: {
url: "...",
complete: function(chart) {
//add/modify guide objects through chart.valueAxes[0].guides or
//directly to the chart object through chart.guides
chart.valueAxes[0].guides = [{
"value": new Date(2016, 2, 5),
"label": "MILESTONE #1",
"position": "top",
"fontSize": 15,
"tickLength": 15
},
// .. etc
];
chart.validateData(); //redraw chart
}
},
// ...
});
I am using Kendo UI v2016.2.714 and jQuery v1.9.1. I am unable to turn off the scheduler tool bar k-current-view which seems to redundantly indicate which of the Day/Week/Month buttons is selected:
This appears to be the result of a recent KendoUI upgrade as I never saw it before. Basically I just want to see the three buttons which I have defined in my javascript file:
var sch = $("#schAppointment").kendoScheduler({
date: new Date(), // date: new Date(), The current date of the scheduler
showWorkHours: true,
workDayStart: new Date("2013/1/1 06:00 AM"),
workDayEnd: new Date("2013/1/1 08:00 PM"),
height: 700,
timezone: "Etc/UTC",
views: [{
type: "day",
eventTemplate: $("#event-day-template").html(),
eventHeight: 40
}, {
type: "week",
eventTemplate: $("#event-week-template").html(),
eventHeight: 40
}, {
type: "month",
selected: true,
startTime: new Date("2013/1/1 06:00 AM"),
endTime: new Date("2013/1/1 08:00 PM"),
eventTemplate: $("#event-month-template").html(),
}],
I have not found in the Kendo documentation how to disable this k-current-view and I am still learning Javascript so I haven't discovered how to find the attribute to disable either.
Just for those who might be looking for this answer:
Turns out it was the missing kendo.*.min.css type files. I upgraded everything else but that...dumb mistake
My kendo grid is showing date like this /Date(691869600000)/ . How do i solve this?
Using this answer I got the Steve code to work for my case. Try this template:
"#= kendo.toString(new Date(parseInt(myField.substr(6))),'MM/dd/yyyy HH:mm tt')#"
'#= kendo.toString(yourDateField,"MM/dd/yyyy HH:MM tt")#'
and make your field type as date.
You need to specify the date as a type in your datasource definition - else it will just be a string:
For example if your field is birthday:
var kendoDS = new kendo.data.DataSource({
schema: {
model: {
fields: {
birthday: { type: "date"}
}
}
});
And when you define the Grid:
kendoGrid({
selectable: whatever values..etc
columns: your-response,
dataSource: kendoDS
});
See this for more info: http://www.kendoui.com/forums/framework/data-source/json-date-handling-changed-in-latest-release.aspx
Use template like the following or like the one in the documentation link.
#= kendo.format("{0:d}",theDateTimeFieldName)#
var offsetMiliseconds = new Date().getTimezoneOffset() * 60000;
#= kendo.toString(new Date( parseInt(JSONDateTime.substr(6)) + offsetMiliseconds),"dd-MMM-yyyy hh:mm tt") #
I have a YUI datatable bound to a YUI datasource that needs to be auto-refreshed after a couple of seconds and also manually through a button. While I am able to read the data through a local datasource (datasource declared in the same page) I am not able to read it remotely. The grid remains "Data Loading..." even though the requests to the target page (yui_data.cfm) are being made at the set interval. The source code is the following:
Source code of yui_data.cfm (for testing) is the following:
{ "records": [ {"id": 31, "name":"4fruit", "price":8323, "number":231} ] }
Source code of the page requesting the data:
myDataSource = new YAHOO.util.XHRDataSource("yui_data.cfm?");
myDataSource.responseType = YAHOO.util.XHRDataSource.TYPE_JSON;
myDataSource.responseSchema = {
resultsList: "records",
fields: [
{key:"id", parser:"number"},
{key:"name"},
{key:"price",parser:"number"},
{key:"number",parser:"number"}
]
};
myDataTable = new YAHOO.widget.DataTable("dynamicdata", myColumnDefs, myDataSource);
myCallBack = {
success: myDataTable.onDataReturnSetRows,
failure: function() {
},
scope: myDataTable,
argument: myDataTable.getState()
}
myDataSource.setInterval(5000, null, myCallBack);
The above example only works when the line
myDataSource = new YAHOO.util.XHRDataSource("yui_data.cfm?");
is changed to:
myDataSource = new YAHOO.util.XHRDataSource(YAHOO.data.sample); // as an example!
I managed to fix the problem by preceding the previous JSON output with a ResultSet and Result and then modifying the response schema resultList to read from that path.