JavaScript/jQuery Scheduler - Customize Individual Views
To customize individual views, assign an array of configuration objects to the views property. Each object contains the type property that defines which view is customized. Refer to the API Reference for a list of properties.
The following code defines three views: the first is not customized, the second has a specific cell duration and a custom template for the time scale, and the third is grouped by resources.
JavaScript
- var data = [{
- text: "Google AdWords Strategy",
- ownerId: [2],
- startDate: new Date("2016-01-01T09:00:00.000Z"),
- endDate: new Date("2016-01-01T10:30:00.000Z")
- }, {
- text: "New Brochures",
- ownerId: [1],
- startDate: new Date("2016-01-01T11:30:00.000Z"),
- endDate: new Date("2016-01-01T14:15:00.000Z")
- },
- // ...
- ];
- var resources = [
- { text: "Samantha Bright", id: 1, color: "#cb6bb2" },
- { text: "John Heart", id: 2, color: "#56ca85" }
- ];
- $(function(){
- $("#schedulerContainer").dxScheduler({
- dataSource: data,
- currentDate: new Date(2016, 1, 1),
- views: ["month", {
- type: "day",
- cellDuration: 60,
- timeCellTemplate: function(data, index, element) {
- element.text(data.text)
- .css('color', 'green')
- .css('font-style', 'italic');
- }
- }, {
- type: "workWeek",
- groups: ["ownerId"]
- }],
- resources: [{ fieldExpr: "ownerId", dataSource: resources }]
- });
- });
Customize Individual Views Demo Increase View Duration Demo
See Also
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.