DevExtreme jQuery - Overview
The Scheduler is a widget that represents scheduled data and allows a user to manage it. The following image is an element map. You can click the desired element to navigate to its dedicated article.
The following code adds the Scheduler widget to your page. The simplest configuration requires only a dataSource to be specified. In addition, you can define a date that should be initially displayed in the date navigator using the currentDate option.
jQuery
$(function() {
$("#schedulerContainer").dxScheduler({
dataSource: [{
text: "Website Re-Design Plan",
startDate: new Date(2016, 4, 25, 9, 30),
endDate: new Date(2016, 4, 25, 11, 30)
}, {
text: "Book Flights to San Fran for Sales Trip",
startDate: new Date(2016, 4, 25, 12, 0),
endDate: new Date(2016, 4, 25, 13, 0)
},
// ...
],
currentDate: new Date(2016, 4, 25)
});
});Angular
<dx-scheduler
[dataSource]="appointments"
[currentDate]="currentDate">
</dx-scheduler>
import { DxSchedulerModule } from "devextreme-angular";
// ...
export class AppComponent {
appointments = [{
text: "Website Re-Design Plan",
startDate: new Date(2016, 4, 25, 1, 30),
endDate: new Date(2016, 4, 25, 3, 30)
}, {
text: "Book Flights to San Fran for Sales Trip",
startDate: new Date(2016, 4, 25, 9, 0),
endDate: new Date(2016, 4, 25, 10, 0)
},
// ...
];
currentDate = new Date(2016, 4, 25);
}
@NgModule({
imports: [
// ...
DxSchedulerModule
],
// ...
})Each data source object represents an appointment to be scheduled and has a special structure. This structure should be similar to that described in the dataSource option. The fields listed below should be present in every appointment.
text
The subject of an appointment.startDate
The start date of an appointment (includes time if needed).endDate
The end date of an appointment (includes time if needed).
If your appointments have a different structure, specify:
textExpr
The data field that provides subjects for appointments.startDateExpr
The data field that provides start dates for appointments.endDateExpr
The data field that provides end dates for appointments.
jQuery
$(function() {
$("#schedulerContainer").dxScheduler({
dataSource: [{
subject: 'Meet with a customer',
from: new Date(2016, 4, 10, 11, 0),
to: new Date(2016, 4, 10, 13, 0)
}, {
subject: 'Discuss results',
from: new Date(2016, 5, 11, 12, 0),
to: new Date(2016, 4, 11, 13, 0)
},
// ...
],
textExpr: "subject",
startDateExpr: "from",
endDateExpr: "to"
});
}); Angular
<dx-scheduler
[dataSource]="appointments"
textExpr="subject"
startDateExpr="from"
endDateExpr="to"
[currentDate]="currentDate">
</dx-scheduler>
import { DxSchedulerModule } from "devextreme-angular";
// ...
export class AppComponent {
appointments = [{
subject: 'Meet with a customer',
from: new Date(2016, 4, 25, 1, 0),
to: new Date(2016, 4, 25, 3, 0)
}, {
subject: 'Discuss results',
from: new Date(2016, 5, 25, 9, 0),
to: new Date(2016, 4, 25, 10, 0)
},
// ...
];
currentDate = new Date(2016, 4, 25);
}
@NgModule({
imports: [
// ...
DxSchedulerModule
],
// ...
})