Articles in this section
Category / Section

How to bind the data to the schedule control through the Ajax call?

2 mins read

In general, the Schedule control supports Data binding in many ways. One such way is to bind it through the Ajax call by using MVC application.

Step 1: Add the Schedule code in the View page of the MVC application to render it as follows.


        <div id="ScheduleDiv">
            <div style="float: left" id="Schedule1">



$(function () {
                currentDate: new Date(2014, 6, 2),
                appointmentSettings: {
                    id: "Id",
                    subject: "Subject",
                    location: "Location",
                    description: "Description",
                    startTime: "StartTime",
                    endTime: "EndTime",
                    allDay: "AllDay",
                    recurrence: "Recurrence",
                    recurrenceRule: "RecurrenceRule"


Step 2: Define a HTML button in the same view page as shown, to trigger the Ajax call on clicking it.


            <input type="button" value="Click to bind the data" id="BindData" />


Step 3: Define the JsonResult action method, for example GetData, in the Controller page in order to read the appointment details from the database.


public JsonResult GetData()
            IEnumerable data = new ScheduleDataDataContext().DefaultSchedules.Take(500); // select 500 records from table
            return Json(data, JsonRequestBehavior.AllowGet);


Step 4:  Now, call the above defined action method (GetData) via Ajax call from the View page by clicking the button as mentioned in the following code.


// Executes when the button is clicked.
        $("#BindData").click(function () {
                url: "/Schedule/GetData", success: function (result) {
                    var object = [];
                    // Stores the result values to the object collection.
                    for (var i = 0; i < result.length; i++) {
                        object[i] = {
                            Id: result[i].Id,
                            Subject: result[i].Subject,
                            StartTime: new Date(result[i].StartTime.match(/\d+/)[0] * 1),
                            EndTime: new Date(result[i].EndTime.match(/\d+/)[0] * 1),
                            Description: result[i].Description,
                            AllDay: result[i].AllDay,
                            Recurrence: result[i].Recurrence,
                            RecurrenceRule: result[i].RecurrenceRule
                    $("#Schedule1").ejSchedule("option", "appointmentSettings.dataSource", object); // Assigns the DataSource to the Schedule control.


Step 5: Run the sample now and initially the Schedule control renders without any appointments. After clicking the button, the successful Ajax post retrieves the appointment collection and renders it to the control.


Schedule display at page load

Figure 1: Schedule display at page load

After clicking the button

Figure 2: After clicking the button 

Sample Link:


Did you find this information helpful?
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment