We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Essential JS2

Syncfusion jQuery based widgets are no longer in active development. Switch to our pure JavaScript based next generation Essential JS 2 library.

Syncfusion Feedback

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

Platform: jQuery |
Control: ejSchedule

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:


You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile