how to customize kendo react scheduler?

Question

I am implementing the kendo react scheduler in my application. I need to add some extra fields in the scheduler dialog and track the events of the dialog controls and implement some back end logic. I am stuck in this. Not able to do the same. Please help me out.

 

Thanks in advance!

 

this is my react js code.

 

constructor(props) { super(props);

var self = this; this.startTime = new Date("2013/6/13 07:00 AM") this.resources = [ { field: "ownerId", title: "Owner", dataSource: [ { text: "Alex", value: 1, color: "#f8a398" }, { text: "Bob", value: 2, color: "#51a0ed" }, { text: "Charlie", value: 3, color: "#56ca85" } ] } ] this.views = [ "day", { type: "workWeek", selected: true }, "week", "month", "agenda", { type: "timeline", eventHeight: 50 } ] this.views = [{ type: "workWeek", selected: true }] this.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) { debugger if (operation !== "read" && options.models) { var json = JSON.stringify(options.models); self.workSpace.createNewItem(options.models[0]).then((responseJson) => { debugger }) return { models: JSON.stringify(options.models) }; } } }, eventTemplate: $("#event-template").html(), schema: { model: { id: "taskId", fields: { taskId: { from: "TaskID", type: "number" }, title: { from: "Title", defaultValue: "No title", validation: { required: true } }, phoneNumber: { from: "phoneNumber", type: "number", 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 } ] } } } render() { return ( <div className="container-fluid"> <div className="row col-lg-12 col-md-12 col-sm-12 col-xs-12"> <div> <Scheduler height={600} change={this.onChange} views={this.views} dataSource={this.dataSource} date={new Date()} startTime={this.startTime} resources={this.resources} /> </div> </div> </div> ); }

javascript reactjs kendo-ui scheduler