Timelines
Timeline views display appointments as a sequence of events on a horizontal timeline, as opposed to basic views that display appointments in a calendar format. You can use the View Switcher above the timetable to switch between the views.
List timeline views in the views array to add them to your Scheduler. To activate a specific view at application startup, use the currentView property.
For information about all supported view types, refer to the following help topic: View Types.
This demo shows multiple calendars side-by-side (with data grouped by resources). For information on how to configure such a display, see the following demos:
Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you!
We appreciate your feedback.
We appreciate your feedback.
<dx-scheduler
timeZone="America/Los_Angeles"
[dataSource]="appointmentsData"
[views]='["timelineDay", "timelineWeek", "timelineWorkWeek", "timelineMonth"]'
currentView="timelineMonth"
[firstDayOfWeek]="0"
[startDayHour]="8"
[endDayHour]="20"
[cellDuration]="60"
[groups]="['priority']"
[currentDate]="currentDate"
[height]="580">
<dxi-resource
fieldExpr="ownerId"
[allowMultiple]="true"
[dataSource]="resourcesData"
label="Owner"
[useColorAsDefault]="true"
></dxi-resource>
<dxi-resource
fieldExpr="priority"
[allowMultiple]="false"
[dataSource]="prioritiesData"
label="Priority"
></dxi-resource>
</dx-scheduler>
import { NgModule, Component, enableProdMode } from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {Priority, Resource, Appointment, Service} from './app.service';
import {DxSchedulerModule} from 'devextreme-angular';
if(!/localhost/.test(document.location.host)) {
enableProdMode();
}
@Component({
styleUrls: ['app/app.component.css'],
selector: 'demo-app',
templateUrl: 'app/app.component.html',
providers: [Service]
})
export class AppComponent {
appointmentsData: Appointment[];
resourcesData: Resource[];
prioritiesData: Priority[];
currentDate: Date = new Date(2021, 1, 2);
constructor(service: Service) {
this.appointmentsData = service.getAppointments();
this.resourcesData = service.getResources();
this.prioritiesData = service.getPriorities();
}
}
@NgModule({
imports: [
BrowserModule,
DxSchedulerModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule {}
platformBrowserDynamic().bootstrapModule(AppModule)
import { Injectable } from "@angular/core";
export class Priority {
text: string;
id: number;
color: string;
}
export class Resource {
text: string;
id: number;
color: string;
}
export class Appointment {
text: string;
ownerId: number[];
priority: number;
startDate: Date;
endDate: Date;
}
let prioritiesData: Priority[] = [
{
text: "Low Priority",
id: 1,
color: "#1e90ff"
}, {
text: "High Priority",
id: 2,
color: "#ff9747"
}
];
let resourcesData: Resource[] = [
{
text: "Samantha Bright",
id: 1,
color: "#cb6bb2"
}, {
text: "John Heart",
id: 2,
color: "#56ca85"
}, {
text: "Todd Hoffman",
id: 3,
color: "#1e90ff"
}, {
text: "Sandra Johnson",
id: 4,
color: "#ff9747"
}
]
let appointments: Appointment[] = [{
text: "Google AdWords Strategy",
ownerId: [2],
startDate: new Date("2021-02-01T16:00:00.000Z"),
endDate: new Date("2021-02-01T17:30:00.000Z"),
priority: 1
}, {
text: "New Brochures",
ownerId: [1],
startDate: new Date("2021-02-01T18:30:00.000Z"),
endDate: new Date("2021-02-01T21:15:00.000Z"),
priority: 2
}, {
text: "Brochure Design Review",
ownerId: [4],
startDate: new Date("2021-02-01T20:15:00.000Z"),
endDate: new Date("2021-02-01T23:15:00.000Z"),
priority: 1
}, {
text: "Website Re-Design Plan",
ownerId: [3],
startDate: new Date("2021-02-01T23:45:00.000Z"),
endDate: new Date("2021-02-02T18:15:00.000Z"),
priority: 2
}, {
text: "Rollout of New Website and Marketing Brochures",
ownerId: [1],
startDate: new Date("2021-02-02T15:15:00.000Z"),
endDate: new Date("2021-02-02T17:45:00.000Z"),
priority: 2
}, {
text: "Update Sales Strategy Documents",
ownerId: [2],
startDate: new Date("2021-02-02T19:00:00.000Z"),
endDate: new Date("2021-02-02T20:45:00.000Z"),
priority: 1
}, {
text: "Non-Compete Agreements",
ownerId: [4],
startDate: new Date("2021-02-03T16:15:00.000Z"),
endDate: new Date("2021-02-03T17:00:00.000Z"),
priority: 1
}, {
text: "Approve Hiring of John Jeffers",
ownerId: [2],
startDate: new Date("2021-02-03T17:00:00.000Z"),
endDate: new Date("2021-02-03T18:15:00.000Z"),
priority: 2
}, {
text: "Update NDA Agreement",
ownerId: [1],
startDate: new Date("2021-02-03T18:45:00.000Z"),
endDate: new Date("2021-02-03T20:45:00.000Z"),
priority: 2
}, {
text: "Update Employee Files with New NDA",
ownerId: [2],
startDate: new Date("2021-02-03T21:00:00.000Z"),
endDate: new Date("2021-02-03T23:45:00.000Z"),
priority: 1
}, {
text: "Submit Questions Regarding New NDA",
ownerId: [1],
startDate: new Date("2021-02-05T01:00:00.000Z"),
endDate: new Date("2021-02-04T16:30:00.000Z"),
priority: 1
}, {
text: "Submit Signed NDA",
ownerId: [2],
startDate: new Date("2021-02-04T19:45:00.000Z"),
endDate: new Date("2021-02-04T21:00:00.000Z"),
priority: 1
}, {
text: "Review Revenue Projections",
ownerId: [3],
startDate: new Date("2021-02-05T00:15:00.000Z"),
endDate: new Date("2021-02-04T15:00:00.000Z"),
priority: 2
}, {
text: "Comment on Revenue Projections",
ownerId: [2],
startDate: new Date("2021-02-05T16:15:00.000Z"),
endDate: new Date("2021-02-05T18:15:00.000Z"),
priority: 1
}, {
text: "Provide New Health Insurance Docs",
ownerId: [3],
startDate: new Date("2021-02-05T19:45:00.000Z"),
endDate: new Date("2021-02-05T21:15:00.000Z"),
priority: 2
}, {
text: "Review Changes to Health Insurance Coverage",
ownerId: [2],
startDate: new Date("2021-02-05T21:15:00.000Z"),
endDate: new Date("2021-02-05T22:30:00.000Z"),
priority: 1
}, {
text: "Review Training Course for any Omissions",
ownerId: [2],
startDate: new Date("2021-02-08T21:00:00.000Z"),
endDate: new Date("2021-02-09T19:00:00.000Z"),
priority: 2
}, {
text: "Recall Rebate Form",
ownerId: [1],
startDate: new Date("2021-02-08T19:45:00.000Z"),
endDate: new Date("2021-02-08T20:15:00.000Z"),
priority: 1
}, {
text: "Create Report on Customer Feedback",
ownerId: [4],
startDate: new Date("2021-02-09T22:15:00.000Z"),
endDate: new Date("2021-02-10T00:30:00.000Z"),
priority: 2
}, {
text: "Review Customer Feedback Report",
ownerId: [2],
startDate: new Date("2021-02-09T23:15:00.000Z"),
endDate: new Date("2021-02-10T01:30:00.000Z"),
priority: 1
}, {
text: "Customer Feedback Report Analysis",
ownerId: [3],
startDate: new Date("2021-02-10T16:30:00.000Z"),
endDate: new Date("2021-02-10T17:30:00.000Z"),
priority: 1
}, {
text: "Prepare Shipping Cost Analysis Report",
ownerId: [4],
startDate: new Date("2021-02-10T19:30:00.000Z"),
endDate: new Date("2021-02-10T20:30:00.000Z"),
priority: 1
}, {
text: "Provide Feedback on Shippers",
ownerId: [2],
startDate: new Date("2021-02-10T21:15:00.000Z"),
endDate: new Date("2021-02-10T23:00:00.000Z"),
priority: 2
}, {
text: "Select Preferred Shipper",
ownerId: [1],
startDate: new Date("2021-02-11T00:30:00.000Z"),
endDate: new Date("2021-02-11T03:00:00.000Z"),
priority: 1
}, {
text: "Complete Shipper Selection Form",
ownerId: [2],
startDate: new Date("2021-02-11T15:30:00.000Z"),
endDate: new Date("2021-02-11T17:00:00.000Z"),
priority: 2
}, {
text: "Upgrade Server Hardware",
ownerId: [4],
startDate: new Date("2021-02-11T19:00:00.000Z"),
endDate: new Date("2021-02-11T21:15:00.000Z"),
priority: 1
}, {
text: "Upgrade Personal Computers",
ownerId: [3],
startDate: new Date("2021-02-11T21:45:00.000Z"),
endDate: new Date("2021-02-11T23:30:00.000Z"),
priority: 1
}, {
text: "Upgrade Apps to Windows RT or stay with WinForms",
ownerId: [1],
startDate: new Date("2021-02-12T17:30:00.000Z"),
endDate: new Date("2021-02-12T20:00:00.000Z"),
priority: 1
}, {
text: "Estimate Time Required to Touch-Enable Apps",
ownerId: [1],
startDate: new Date("2021-02-12T21:45:00.000Z"),
endDate: new Date("2021-02-12T23:30:00.000Z"),
priority: 1
}, {
text: "Report on Tranistion to Touch-Based Apps",
ownerId: [2],
startDate: new Date("2021-02-13T01:30:00.000Z"),
endDate: new Date("2021-02-13T02:00:00.000Z"),
priority: 1
}, {
text: "Submit New Website Design",
ownerId: [2],
startDate: new Date("2021-02-15T15:00:00.000Z"),
endDate: new Date("2021-02-15T17:00:00.000Z"),
priority: 2
}, {
text: "Create Icons for Website",
ownerId: [4],
startDate: new Date("2021-02-15T18:30:00.000Z"),
endDate: new Date("2021-02-15T20:15:00.000Z"),
priority: 1
}, {
text: "Create New Product Pages",
ownerId: [1],
startDate: new Date("2021-02-16T16:45:00.000Z"),
endDate: new Date("2021-02-16T18:45:00.000Z"),
priority: 2
}, {
text: "Approve Website Launch",
ownerId: [3],
startDate: new Date("2021-02-16T19:00:00.000Z"),
endDate: new Date("2021-02-16T22:15:00.000Z"),
priority: 1
}, {
text: "Update Customer Shipping Profiles",
ownerId: [3],
startDate: new Date("2021-02-17T16:30:00.000Z"),
endDate: new Date("2021-02-17T18:00:00.000Z"),
priority: 1
}, {
text: "Create New Shipping Return Labels",
ownerId: [4],
startDate: new Date("2021-02-17T19:45:00.000Z"),
endDate: new Date("2021-02-17T21:00:00.000Z"),
priority: 1
}, {
text: "Get Design for Shipping Return Labels",
ownerId: [3],
startDate: new Date("2021-02-17T22:00:00.000Z"),
endDate: new Date("2021-02-17T23:30:00.000Z"),
priority: 1
}, {
text: "PSD needed for Shipping Return Labels",
ownerId: [4],
startDate: new Date("2021-02-18T15:30:00.000Z"),
endDate: new Date("2021-02-18T16:15:00.000Z"),
priority: 2
}, {
text: "Contact ISP and Discuss Payment Options",
ownerId: [1],
startDate: new Date("2021-02-18T18:30:00.000Z"),
endDate: new Date("2021-02-18T23:00:00.000Z"),
priority: 2
}, {
text: "Prepare Year-End Support Summary Report",
ownerId: [2],
startDate: new Date("2021-02-19T00:00:00.000Z"),
endDate: new Date("2021-02-19T03:00:00.000Z"),
priority: 1
}, {
text: "Review New Training Material",
ownerId: [3],
startDate: new Date("2021-02-19T15:00:00.000Z"),
endDate: new Date("2021-02-19T16:15:00.000Z"),
priority: 2
}, {
text: "Distribute Training Material to Support Staff",
ownerId: [2],
startDate: new Date("2021-02-19T19:45:00.000Z"),
endDate: new Date("2021-02-19T21:00:00.000Z"),
priority: 1
}, {
text: "Training Material Distribution Schedule",
ownerId: [2],
startDate: new Date("2021-02-19T21:15:00.000Z"),
endDate: new Date("2021-02-19T23:15:00.000Z"),
priority: 1
}, {
text: "Approval on Converting to New HDMI Specification",
ownerId: [4],
startDate: new Date("2021-02-22T16:30:00.000Z"),
endDate: new Date("2021-02-22T17:15:00.000Z"),
priority: 2
}, {
text: "Create New Spike for Automation Server",
ownerId: [3],
startDate: new Date("2021-02-22T17:00:00.000Z"),
endDate: new Date("2021-02-22T19:30:00.000Z"),
priority: 2
}, {
text: "Code Review - New Automation Server",
ownerId: [1],
startDate: new Date("2021-02-22T20:00:00.000Z"),
endDate: new Date("2021-02-22T22:00:00.000Z"),
priority: 1
}, {
text: "Confirm Availability for Sales Meeting",
ownerId: [1],
startDate: new Date("2021-02-23T17:15:00.000Z"),
endDate: new Date("2021-02-23T22:15:00.000Z"),
priority: 2
}, {
text: "Reschedule Sales Team Meeting",
ownerId: [2],
startDate: new Date("2021-02-23T23:15:00.000Z"),
endDate: new Date("2021-02-24T01:00:00.000Z"),
priority: 2
}, {
text: "Send 2 Remotes for Giveaways",
ownerId: [3],
startDate: new Date("2021-02-24T16:30:00.000Z"),
endDate: new Date("2021-02-24T18:45:00.000Z"),
priority: 1
}, {
text: "Discuss Product Giveaways with Management",
ownerId: [1],
startDate: new Date("2021-02-24T19:15:00.000Z"),
endDate: new Date("2021-02-24T23:45:00.000Z"),
priority: 2
}, {
text: "Replace Desktops on the 3rd Floor",
ownerId: [2],
startDate: new Date("2021-02-25T16:30:00.000Z"),
endDate: new Date("2021-02-25T17:45:00.000Z"),
priority: 1
}, {
text: "Update Database with New Leads",
ownerId: [3],
startDate: new Date("2021-02-25T19:00:00.000Z"),
endDate: new Date("2021-02-25T21:15:00.000Z"),
priority: 2
}, {
text: "Mail New Leads for Follow Up",
ownerId: [1],
startDate: new Date("2021-02-25T21:45:00.000Z"),
endDate: new Date("2021-02-25T22:30:00.000Z"),
priority: 2
}, {
text: "Send Territory Sales Breakdown",
ownerId: [2],
startDate: new Date("2021-02-26T01:00:00.000Z"),
endDate: new Date("2021-02-26T03:00:00.000Z"),
priority: 1
}, {
text: "Territory Sales Breakdown Report",
ownerId: [1],
startDate: new Date("2021-02-26T15:45:00.000Z"),
endDate: new Date("2021-02-26T16:45:00.000Z"),
priority: 1
}, {
text: "Report on the State of Engineering Dept",
ownerId: [3],
startDate: new Date("2021-02-26T21:45:00.000Z"),
endDate: new Date("2021-02-26T22:30:00.000Z"),
priority: 2
}, {
text: "Staff Productivity Report",
ownerId: [4],
startDate: new Date("2021-02-26T23:15:00.000Z"),
endDate: new Date("2021-02-27T02:30:00.000Z"),
priority: 2
}];
@Injectable()
export class Service {
getAppointments(){
return appointments;
}
getPriorities() {
return prioritiesData;
}
getResources() {
return resourcesData;
}
}
// In real applications, you should not transpile code in the browser. You can see how to create your own application with Angular and DevExtreme here:
// https://js.devexpress.com/Documentation/Guide/Angular_Components/Getting_Started/Create_a_DevExtreme_Application/
window.config = {
transpiler: 'ts',
typescriptOptions: {
module: "system",
emitDecoratorMetadata: true,
experimentalDecorators: true
},
meta: {
'typescript': {
"exports": "ts"
},
'devextreme/localization.js': {
"esModule": true
},
},
paths: {
'npm:': 'https://unpkg.com/'
},
map: {
'ts': 'npm:plugin-typescript@8.0.0/lib/plugin.js',
'typescript': 'npm:typescript@3.5.3/lib/typescript.js',
'@angular': 'npm:@angular',
'tslib': 'npm:tslib@2.3.1/tslib.js',
'rxjs': 'npm:rxjs@6.4.0',
'rrule': 'npm:rrule@2.6.6/dist/es5/rrule.js',
'luxon': 'npm:luxon@1.28.0/build/global/luxon.min.js',
'es6-object-assign': 'npm:es6-object-assign@1.1.0',
'devextreme': 'npm:devextreme@21.1.6/cjs',
'devextreme/bundles/dx.all': 'npm:devextreme@21.1.6/bundles/dx.all.js',
'jszip': 'npm:jszip@3.7.1/dist/jszip.min.js',
'devextreme-quill': 'npm:devextreme-quill@1.4.2/dist/dx-quill.min.js',
'devexpress-diagram': 'npm:devexpress-diagram@2.1.32',
'devexpress-gantt': 'npm:devexpress-gantt@3.0.14',
'devextreme-angular': 'npm:devextreme-angular@21.1.6',
'@devextreme/vdom': 'npm:@devextreme/vdom@1.2.2',
'inferno': 'npm:inferno@7.4.10/dist/inferno.min.js',
'inferno-compat': 'npm:inferno-compat@7.4.10/dist/inferno-compat.min.js',
'inferno-create-element': 'npm:inferno-create-element@7.4.10/dist/inferno-create-element.min.js',
'inferno-dom': 'npm:inferno-dom@1.0.7/dist/inferno-dom.min.js',
'inferno-hydrate': 'npm:inferno-hydrate@7.4.10/dist/inferno-hydrate.min.js',
'inferno-clone-vnode': 'npm:inferno-clone-vnode@7.4.10/dist/inferno-clone-vnode.min.js',
'inferno-create-class': 'npm:inferno-create-class@7.4.10/dist/inferno-create-class.min.js',
'inferno-extras': 'npm:inferno-extras@7.4.10/dist/inferno-extras.min.js'
},
packages: {
'app': {
main: './app.component.ts',
defaultExtension: 'ts'
},
'devextreme': {
defaultExtension: 'js'
},
'@devextreme/vdom': {
defaultExtension: 'js'
},
'devextreme/events/utils': {
main: 'index'
},
'devextreme/events': {
main: 'index'
},
'es6-object-assign': {
main: './index.js',
defaultExtension: 'js'
}
},
packageConfigPaths: [
"npm:@devextreme/*/package.json",
"npm:@angular/*/package.json",
"npm:@angular/common/*/package.json",
"npm:rxjs/package.json",
"npm:rxjs/operators/package.json",
"npm:devextreme-angular/*/package.json",
"npm:devextreme-angular/ui/*/package.json",
"npm:devextreme-angular/package.json",
"npm:devexpress-diagram/package.json",
"npm:devexpress-gantt/package.json",
]
};
System.config(window.config);
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>DevExtreme Demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/21.1.6/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/21.1.6/css/dx.light.css" />
<script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script>
<script src="https://unpkg.com/zone.js@0.10.3/dist/zone.js"></script>
<script src="https://unpkg.com/reflect-metadata@0.1.3/Reflect.js"></script>
<script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script>
<script src="config.js"></script>
<script>
System.import('app').catch(console.error.bind(console));
</script>
</head>
<body class="dx-viewport">
<div class="demo-container">
<demo-app>Loading...</demo-app>
</div>
</body>
</html>