A newer version of this page is available. Switch to the current version.

JSON Data

To bind the Scheduler to data in the JSON format, assign the data's URL to the dataSource option.

jQuery
JavaScript
$(function() {
    $("#schedulerContainer").dxScheduler({
        dataSource: "http://url/to/json/data"
    });
});
Angular
HTML
TypeScript
<dx-scheduler
    dataSource="http://url/to/json/data">
</dx-scheduler>
import { DxSchedulerModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxSchedulerModule
    ],
    // ...
})

Note that you can also use a JSONP callback parameter supported by jQuery.ajax().

jQuery
JavaScript
$(function() {
    $("#schedulerContainer").dxScheduler({
        dataSource: "http://url/to/json/data/jsonpdata?callback=?"
    });
});
Angular
HTML
TypeScript
<dx-scheduler
    dataSource="http://url/to/json/data/jsonpdata?callback=?">
</dx-scheduler>
import { DxSchedulerModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxSchedulerModule
    ],
    // ...
})

If you need to process data after obtaining it, implement the CustomStore. For details, see the Custom Sources topic.

See Also