The Timeline views can have additional header rows other than its default date and time header rows. It is possible to show individual header rows for displaying year, month and week separately using the HeaderRowDirective
. This is applicable only on the timeline views. The possible rows which can be added using HeaderRowDirective
are as follows.
Year
Month
Week
Date
Hour
The
Hour
row is not applicable for Timeline month view.
Learn to add and customize additional header rows in the Timeline views of React Scheduler from this video:
The following example shows the Scheduler displaying all the available header rows on timeline views.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ScheduleComponent, HeaderRowDirective, HeaderRowsDirective, TimelineViews, Inject, ViewsDirective, ViewDirective } from '@syncfusion/ej2-react-schedule';
import { scheduleData } from './datasource';
import { extend } from '@syncfusion/ej2-base';
class App extends React.Component {
constructor() {
super(...arguments);
this.data = extend([], scheduleData, null, true);
}
render() {
return <ScheduleComponent width='100%' height='550px' selectedDate={new Date(2018, 11, 31)} eventSettings={{ dataSource: this.data }} startHour='09:00' endHour='13:00'>
<HeaderRowsDirective>
<HeaderRowDirective option='Year'/>
<HeaderRowDirective option='Month'/>
<HeaderRowDirective option='Week'/>
<HeaderRowDirective option='Date'/>
<HeaderRowDirective option='Hour'/>
</HeaderRowsDirective>
<ViewsDirective>
<ViewDirective option='TimelineWeek'/>
</ViewsDirective>
<Inject services={[TimelineViews]}/>
</ScheduleComponent>;
}
}
;
ReactDOM.render(<App />, document.getElementById('schedule'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {
ScheduleComponent, HeaderRowDirective, HeaderRowsDirective, TimelineViews, Inject,
ViewsDirective, ViewDirective
} from '@syncfusion/ej2-react-schedule';
import { scheduleData } from './datasource';
import { extend } from '@syncfusion/ej2-base';
class App extends React.Component<{}, {}>{
private data: Object[] = extend([], scheduleData, null, true) as Object[];
render() {
return <ScheduleComponent width='100%' height='550px' selectedDate={new Date(2018, 11, 31)}
eventSettings= { { dataSource: this.data } } startHour='09:00' endHour='13:00'>
<HeaderRowsDirective>
<HeaderRowDirective option='Year' />
<HeaderRowDirective option='Month' />
<HeaderRowDirective option='Week' />
<HeaderRowDirective option='Date' />
<HeaderRowDirective option='Hour' />
</HeaderRowsDirective>
<ViewsDirective>
<ViewDirective option='TimelineWeek'/>
</ViewsDirective>
<Inject services={[TimelineViews]} />
</ScheduleComponent>
}
};
ReactDOM.render(<App />, document.getElementById('schedule'));
<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Schedule</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-react-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-react-calendars/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-react-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-react-navigations/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-react-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-react-schedule/styles/material.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="index.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='schedule'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>
Importing
HeaderRowsDirective
andHeaderRowDirective
is mandatory.
To display the timeline Scheduler simply with year and month names alone, define the option Year
and Month
within the HeaderRowDirective
.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ScheduleComponent, HeaderRowDirective, HeaderRowsDirective, TimelineMonth, Inject, ViewsDirective, ViewDirective } from '@syncfusion/ej2-react-schedule';
import { scheduleData } from './datasource';
import { extend } from '@syncfusion/ej2-base';
class App extends React.Component {
constructor() {
super(...arguments);
this.data = extend([], scheduleData, null, true);
}
render() {
return <ScheduleComponent width='100%' height='550px' selectedDate={new Date(2018, 11, 31)} eventSettings={{ dataSource: this.data }}>
<HeaderRowsDirective>
<HeaderRowDirective option='Year'/>
<HeaderRowDirective option='Month'/>
</HeaderRowsDirective>
<ViewsDirective>
<ViewDirective option='TimelineMonth' interval={24}/>
</ViewsDirective>
<Inject services={[TimelineMonth]}/>
</ScheduleComponent>;
}
}
;
ReactDOM.render(<App />, document.getElementById('schedule'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {
ScheduleComponent, HeaderRowDirective, HeaderRowsDirective, TimelineMonth, Inject,
ViewsDirective, ViewDirective
} from '@syncfusion/ej2-react-schedule';
import { scheduleData } from './datasource';
import { extend } from '@syncfusion/ej2-base';
class App extends React.Component<{}, {}>{
private data: Object[] = extend([], scheduleData, null, true) as Object[];
render() {
return <ScheduleComponent width='100%' height='550px' selectedDate={new Date(2018, 11, 31)}
eventSettings= { { dataSource: this.data } }>
<HeaderRowsDirective>
<HeaderRowDirective option='Year' />
<HeaderRowDirective option='Month' />
</HeaderRowsDirective>
<ViewsDirective>
<ViewDirective option='TimelineMonth' interval= {24}/>
</ViewsDirective>
<Inject services={[TimelineMonth]} />
</ScheduleComponent>
}
};
ReactDOM.render(<App />, document.getElementById('schedule'));
<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Schedule</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-react-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-react-calendars/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-react-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-react-navigations/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-react-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-react-schedule/styles/material.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="index.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='schedule'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>
The week number can be displayed in a separate header row of the timeline Scheduler by setting Week
option within HeaderRowDirective
.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ScheduleComponent, HeaderRowDirective, HeaderRowsDirective, TimelineMonth, TimelineViews, Inject, ViewsDirective, ViewDirective } from '@syncfusion/ej2-react-schedule';
import { scheduleData } from './datasource';
import { extend } from '@syncfusion/ej2-base';
class App extends React.Component {
constructor() {
super(...arguments);
this.data = extend([], scheduleData, null, true);
}
render() {
return <ScheduleComponent width='100%' height='550px' selectedDate={new Date(2018, 11, 31)} eventSettings={{ dataSource: this.data }}>
<HeaderRowsDirective>
<HeaderRowDirective option='Week'/>
<HeaderRowDirective option='Date'/>
<HeaderRowDirective option='Hour'/>
</HeaderRowsDirective>
<ViewsDirective>
<ViewDirective option='TimelineMonth' interval={24}/>
<ViewDirective option='TimelineWeek' interval={3}/>
<ViewDirective option='TimelineDay' interval={4}/>
</ViewsDirective>
<Inject services={[TimelineMonth, TimelineViews]}/>
</ScheduleComponent>;
}
}
;
ReactDOM.render(<App />, document.getElementById('schedule'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {
ScheduleComponent, HeaderRowDirective, HeaderRowsDirective, TimelineMonth, TimelineViews, Inject,
ViewsDirective, ViewDirective
} from '@syncfusion/ej2-react-schedule';
import { scheduleData } from './datasource';
import { extend } from '@syncfusion/ej2-base';
class App extends React.Component<{}, {}>{
private data: Object[] = extend([], scheduleData, null, true) as Object[];
render() {
return <ScheduleComponent width='100%' height='550px' selectedDate={new Date(2018, 11, 31)}
eventSettings= { { dataSource: this.data } }>
<HeaderRowsDirective>
<HeaderRowDirective option='Week' />
<HeaderRowDirective option='Date' />
<HeaderRowDirective option='Hour' />
</HeaderRowsDirective>
<ViewsDirective>
<ViewDirective option='TimelineMonth' interval= {24}/>
<ViewDirective option='TimelineWeek' interval= {3}/>
<ViewDirective option='TimelineDay' interval= {4}/>
</ViewsDirective>
<Inject services={[TimelineMonth, TimelineViews]} />
</ScheduleComponent>
}
};
ReactDOM.render(<App />, document.getElementById('schedule'));
<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Schedule</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-react-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-react-calendars/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-react-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-react-navigations/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-react-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-react-schedule/styles/material.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="index.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='schedule'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>
It is possible to display a complete year in a timeline view by setting interval
value as 12 and defining TimelineMonth view option within the ViewDirective
of Scheduler.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ScheduleComponent, HeaderRowDirective, HeaderRowsDirective, TimelineMonth, Inject, ViewsDirective, ViewDirective } from '@syncfusion/ej2-react-schedule';
import { eventData } from './datasource';
import { extend } from '@syncfusion/ej2-base';
class App extends React.Component {
constructor() {
super(...arguments);
this.data = extend([], eventData, null, true);
}
render() {
return <ScheduleComponent width='100%' height='550px' selectedDate={new Date(2018, 0, 1)} eventSettings={{ dataSource: this.data }}>
<HeaderRowsDirective>
<HeaderRowDirective option='Month'/>
<HeaderRowDirective option='Date'/>
</HeaderRowsDirective>
<ViewsDirective>
<ViewDirective option='TimelineMonth' interval={12}/>
</ViewsDirective>
<Inject services={[TimelineMonth]}/>
</ScheduleComponent>;
}
}
;
ReactDOM.render(<App />, document.getElementById('schedule'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {
ScheduleComponent, HeaderRowDirective, HeaderRowsDirective, TimelineMonth, Inject,
ViewsDirective, ViewDirective
} from '@syncfusion/ej2-react-schedule';
import { eventData } from './datasource';
import { extend } from '@syncfusion/ej2-base';
class App extends React.Component<{}, {}>{
private data: Object[] = extend([], eventData, null, true) as Object[];
render() {
return <ScheduleComponent width='100%' height='550px' selectedDate={new Date(2018, 0, 1)}
eventSettings= { { dataSource: this.data } }>
<HeaderRowsDirective>
<HeaderRowDirective option='Month' />
<HeaderRowDirective option='Date' />
</HeaderRowsDirective>
<ViewsDirective>
<ViewDirective option='TimelineMonth' interval= {12}/>
</ViewsDirective>
<Inject services={[TimelineMonth]} />
</ScheduleComponent>
}
};
ReactDOM.render(<App />, document.getElementById('schedule'));
<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Schedule</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-react-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-react-calendars/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-react-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-react-navigations/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-react-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-react-schedule/styles/material.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="index.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='schedule'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>
You can customize the text of the header rows and display any images or formatted text on each individual header rows using the built-in template
option available within the HeaderRowDirective
.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ScheduleComponent, getWeekNumber, HeaderRowDirective, HeaderRowsDirective, TimelineMonth, Inject, ViewsDirective, ViewDirective } from '@syncfusion/ej2-react-schedule';
import { scheduleData } from './datasource';
import { Internationalization, extend } from '@syncfusion/ej2-base';
class App extends React.Component {
constructor() {
super(...arguments);
this.data = extend([], scheduleData, null, true);
this.instance = new Internationalization();
}
getYearDetails(value) {
return 'Year: ' + this.instance.formatDate(value.date, { skeleton: 'y' });
}
getMonthDetails(value) {
return 'Month: ' + this.instance.formatDate(value.date, { skeleton: 'M' });
}
getWeekDetails(value) {
return 'Week ' + getWeekNumber(value.date);
;
}
yearTemplate(props) {
return (<span className="year">{this.getYearDetails(props)}</span>);
}
monthTemplate(props) {
return (<span className="month">{this.getMonthDetails(props)}</span>);
}
weekTemplate(props) {
return (<span className="week">{this.getWeekDetails(props)}</span>);
}
render() {
return <ScheduleComponent width='100%' height='550px' selectedDate={new Date(2018, 0, 1)} eventSettings={{ dataSource: this.data }}>
<HeaderRowsDirective>
<HeaderRowDirective option='Year' template={this.yearTemplate.bind(this)}/>
<HeaderRowDirective option='Month' template={this.monthTemplate.bind(this)}/>
<HeaderRowDirective option='Week' template={this.weekTemplate.bind(this)}/>
<HeaderRowDirective option='Date'/>
</HeaderRowsDirective>
<ViewsDirective>
<ViewDirective option='TimelineMonth'/>
</ViewsDirective>
<Inject services={[TimelineMonth]}/>
</ScheduleComponent>;
}
}
;
ReactDOM.render(<App />, document.getElementById('schedule'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {
ScheduleComponent, getWeekNumber, HeaderRowDirective, HeaderRowsDirective, TimelineMonth, Inject,
ViewsDirective, ViewDirective
} from '@syncfusion/ej2-react-schedule';
import { scheduleData } from './datasource';
import { Internationalization, extend } from '@syncfusion/ej2-base';
class App extends React.Component<{}, {}>{
private data: Object[] = extend([], scheduleData, null, true) as Object[];
private instance: Internationalization = new Internationalization();
private getYearDetails(value: CellTemplateArgs) {
return 'Year: ' + this.instance.formatDate((value as CellTemplateArgs).date, { skeleton: 'y' });
}
private getMonthDetails(value: CellTemplateArgs) {
return 'Month: ' + this.instance.formatDate((value as CellTemplateArgs).date, { skeleton: 'M' });
}
private getWeekDetails(value: CellTemplateArgs) {
return 'Week ' + getWeekNumber((value as CellTemplateArgs).date);;
}
private yearTemplate(props): JSX.Element {
return (<span className="year">{this.getYearDetails(props)}</span>);
}
private monthTemplate(props): JSX.Element {
return (<span className="month">{this.getMonthDetails(props)}</span>);
}
private weekTemplate(props): JSX.Element {
return (<span className="week">{this.getWeekDetails(props)}</span>);
}
render() {
return <ScheduleComponent width='100%' height='550px' selectedDate={new Date(2018, 0, 1)}
eventSettings= { { dataSource: this.data } }>
<HeaderRowsDirective>
<HeaderRowDirective option='Year' template={this.yearTemplate.bind(this)} />
<HeaderRowDirective option='Month' template={this.monthTemplate.bind(this)} />
<HeaderRowDirective option='Week' template={this.weekTemplate.bind(this)} />
<HeaderRowDirective option='Date' />
</HeaderRowsDirective>
<ViewsDirective>
<ViewDirective option='TimelineMonth'/>
</ViewsDirective>
<Inject services={[TimelineMonth]} />
</ScheduleComponent>
}
};
ReactDOM.render(<App />, document.getElementById('schedule'));
<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Schedule</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-react-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-react-calendars/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-react-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-react-navigations/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-react-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-react-schedule/styles/material.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="index.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='schedule'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>