Header Rows in TypeScript Scheduler
Timeline views support additional header rows beyond the default date and time headers. Use the headerRows property to add rows such as:
YearMonthWeekDateHour
Note: the Hour row is not applicable for the Timeline month view.
The following example shows all available header rows in timeline views.
import { Schedule, TimelineViews } from '@syncfusion/ej2-schedule';
import { scheduleData } from './datasource.ts';
Schedule.Inject(TimelineViews);
let scheduleObj: Schedule = new Schedule({
width: '100%', height: '550px',
selectedDate: new Date(2018, 11, 31),
startHour: '09:00',
endHour: '13:00',
headerRows: [
{ option: 'Year' },
{ option: 'Month' },
{ option: 'Week' },
{ option: 'Date' },
{ option: 'Hour' }
],
views: ['TimelineWeek'],
eventSettings: { dataSource: scheduleData }
});
scheduleObj.appendTo('#Schedule');<!DOCTYPE html>
<html lang="en">
<head>
<title>Schedule Typescript Control</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript Schedule Control" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-base/styles/fluent2.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-buttons/styles/fluent2.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-calendars/styles/fluent2.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-dropdowns/styles/fluent2.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-inputs/styles/fluent2.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-navigations/styles/fluent2.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-popups/styles/fluent2.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-schedule/styles/fluent2.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js" type="text/javascript"></script>
<script src="systemjs.config.js" type="text/javascript"></script>
</head>
<body>
<div id='loader'>LOADING....</div>
<div id='container'>
<div id="Schedule"></div>
</div>
</body>
</html>export let scheduleData: Object[] = [
{
Id: 1,
Subject: 'Explosion of Betelgeuse Star',
StartTime: new Date(2019, 0, 1, 9, 30),
EndTime: new Date(2019, 0, 1, 11, 0),
CategoryColor: '#1aaa55'
}, {
Id: 2,
Subject: 'Thule Air Crash Report',
StartTime: new Date(2019, 0, 2, 12, 0),
EndTime: new Date(2019, 0, 2, 14, 0),
CategoryColor: '#357cd2'
}, {
Id: 3,
Subject: 'Blue Moon Eclipse',
StartTime: new Date(2019, 0, 3, 9, 30),
EndTime: new Date(2019, 0, 3, 11, 0),
CategoryColor: '#7fa900'
}, {
Id: 4,
Subject: 'Meteor Showers in 2018',
StartTime: new Date(2019, 0, 1, 13, 0),
EndTime: new Date(2019, 0, 1, 14, 30),
CategoryColor: '#ea7a57'
}, {
Id: 5,
Subject: 'Milky Way as Melting pot',
StartTime: new Date(2018, 11, 31, 12, 0),
EndTime: new Date(2018, 11, 31, 14, 0),
CategoryColor: '#00bdae'
}, {
Id: 6,
Subject: 'Mysteries of Bermuda Triangle',
StartTime: new Date(2018, 11, 31, 9, 30),
EndTime: new Date(2018, 11, 31, 11, 0),
CategoryColor: '#f57f17'
}, {
Id: 7,
Subject: 'Glaciers and Snowflakes',
StartTime: new Date(2018, 11, 26, 11, 0),
EndTime: new Date(2018, 11, 26, 12, 30),
CategoryColor: '#1aaa55'
}, {
Id: 8,
Subject: 'Life on Mars',
StartTime: new Date(2018, 11, 25, 9, 0),
EndTime: new Date(2018, 11, 25, 10, 0),
CategoryColor: '#357cd2'
}, {
Id: 9,
Subject: 'Alien Civilization',
StartTime: new Date(2018, 11, 27, 11, 0),
EndTime: new Date(2018, 11, 27, 13, 0),
CategoryColor: '#7fa900'
}, {
Id: 10,
Subject: 'Wildlife Galleries',
StartTime: new Date(2018, 11, 29, 11, 0),
EndTime: new Date(2018, 11, 29, 13, 0),
CategoryColor: '#ea7a57'
}, {
Id: 11,
Subject: 'Best Photography 2018',
StartTime: new Date(2018, 11, 30, 9, 30),
EndTime: new Date(2018, 11, 30, 11, 0),
CategoryColor: '#00bdae'
}, {
Id: 12,
Subject: 'Smarter Puppies',
StartTime: new Date(2018, 11, 29, 10, 0),
EndTime: new Date(2018, 11, 29, 11, 30),
CategoryColor: '#f57f17'
}, {
Id: 13,
Subject: 'Myths of Andromeda Galaxy',
StartTime: new Date(2018, 11, 28, 10, 30),
EndTime: new Date(2018, 11, 28, 12, 30),
CategoryColor: '#1aaa55'
}, {
Id: 14,
Subject: 'Aliens vs Humans',
StartTime: new Date(2018, 0, 5, 10, 0),
EndTime: new Date(2018, 0, 5, 11, 30),
CategoryColor: '#357cd2'
}, {
Id: 15,
Subject: 'Facts of Humming Birds',
StartTime: new Date(2018, 0, 10, 9, 30),
EndTime: new Date(2018, 0, 10, 11, 0),
CategoryColor: '#7fa900'
}, {
Id: 16,
Subject: 'Sky Gazers',
StartTime: new Date(2018, 11, 23, 11, 0),
EndTime: new Date(2018, 11, 23, 13, 0),
CategoryColor: '#ea7a57'
}, {
Id: 17,
Subject: 'The Cycle of Seasons',
StartTime: new Date(2018, 0, 2, 5, 30),
EndTime: new Date(2018, 0, 2, 7, 30),
CategoryColor: '#00bdae'
}, {
Id: 18,
Subject: 'Space Galaxies and Planets',
StartTime: new Date(2018, 0, 4, 17, 0),
EndTime: new Date(2018, 0, 4, 18, 30),
CategoryColor: '#f57f17'
}, {
Id: 19,
Subject: 'Lifecycle of Bumblebee',
StartTime: new Date(2018, 11, 31, 6, 0),
EndTime: new Date(2018, 11, 31, 7, 30),
CategoryColor: '#7fa900'
}, {
Id: 20,
Subject: 'Sky Gazers',
StartTime: new Date(2018, 11, 31, 16, 0),
EndTime: new Date(2018, 11, 31, 18, 0),
CategoryColor: '#ea7a57'
}
];Display year and month rows in timeline views
To display the Timeline Scheduler with only year and month information, specify the Year and Month options within the headerRows property.
import { Schedule, TimelineMonth } from '@syncfusion/ej2-schedule';
import { scheduleData } from './datasource.ts';
Schedule.Inject(TimelineMonth);
let scheduleObj: Schedule = new Schedule({
width: '100%', height: '550px',
selectedDate: new Date(2018, 11, 31),
headerRows: [{ option: 'Year' }, { option: 'Month' }],
currentView: 'TimelineMonth',
views: [{ option: 'TimelineMonth', interval: 24 }],
eventSettings: { dataSource: scheduleData }
});
scheduleObj.appendTo('#Schedule');<!DOCTYPE html>
<html lang="en">
<head>
<title>Schedule Typescript Control</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript Schedule Control" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-base/styles/fluent2.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-buttons/styles/fluent2.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-calendars/styles/fluent2.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-dropdowns/styles/fluent2.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-inputs/styles/fluent2.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-navigations/styles/fluent2.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-popups/styles/fluent2.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-schedule/styles/fluent2.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js" type="text/javascript"></script>
<script src="systemjs.config.js" type="text/javascript"></script>
</head>
<body>
<div id='loader'>LOADING....</div>
<div id='container'>
<div id="Schedule"></div>
</div>
</body>
</html>export let scheduleData: Object[] = [
{
Id: 1,
Subject: 'Explosion of Betelgeuse Star',
StartTime: new Date(2019, 0, 1, 9, 30),
EndTime: new Date(2019, 0, 1, 11, 0),
CategoryColor: '#1aaa55'
}, {
Id: 2,
Subject: 'Thule Air Crash Report',
StartTime: new Date(2019, 0, 2, 12, 0),
EndTime: new Date(2019, 0, 2, 14, 0),
CategoryColor: '#357cd2'
}, {
Id: 3,
Subject: 'Blue Moon Eclipse',
StartTime: new Date(2019, 0, 3, 9, 30),
EndTime: new Date(2019, 0, 3, 11, 0),
CategoryColor: '#7fa900'
}, {
Id: 4,
Subject: 'Meteor Showers in 2018',
StartTime: new Date(2019, 0, 1, 13, 0),
EndTime: new Date(2019, 0, 1, 14, 30),
CategoryColor: '#ea7a57'
}, {
Id: 5,
Subject: 'Milky Way as Melting pot',
StartTime: new Date(2018, 11, 31, 12, 0),
EndTime: new Date(2018, 11, 31, 14, 0),
CategoryColor: '#00bdae'
}, {
Id: 6,
Subject: 'Mysteries of Bermuda Triangle',
StartTime: new Date(2018, 11, 31, 9, 30),
EndTime: new Date(2018, 11, 31, 11, 0),
CategoryColor: '#f57f17'
}, {
Id: 7,
Subject: 'Glaciers and Snowflakes',
StartTime: new Date(2018, 11, 26, 11, 0),
EndTime: new Date(2018, 11, 26, 12, 30),
CategoryColor: '#1aaa55'
}, {
Id: 8,
Subject: 'Life on Mars',
StartTime: new Date(2018, 11, 25, 9, 0),
EndTime: new Date(2018, 11, 25, 10, 0),
CategoryColor: '#357cd2'
}, {
Id: 9,
Subject: 'Alien Civilization',
StartTime: new Date(2018, 11, 27, 11, 0),
EndTime: new Date(2018, 11, 27, 13, 0),
CategoryColor: '#7fa900'
}, {
Id: 10,
Subject: 'Wildlife Galleries',
StartTime: new Date(2018, 11, 29, 11, 0),
EndTime: new Date(2018, 11, 29, 13, 0),
CategoryColor: '#ea7a57'
}, {
Id: 11,
Subject: 'Best Photography 2018',
StartTime: new Date(2018, 11, 30, 9, 30),
EndTime: new Date(2018, 11, 30, 11, 0),
CategoryColor: '#00bdae'
}, {
Id: 12,
Subject: 'Smarter Puppies',
StartTime: new Date(2018, 11, 29, 10, 0),
EndTime: new Date(2018, 11, 29, 11, 30),
CategoryColor: '#f57f17'
}, {
Id: 13,
Subject: 'Myths of Andromeda Galaxy',
StartTime: new Date(2018, 11, 28, 10, 30),
EndTime: new Date(2018, 11, 28, 12, 30),
CategoryColor: '#1aaa55'
}, {
Id: 14,
Subject: 'Aliens vs Humans',
StartTime: new Date(2018, 0, 5, 10, 0),
EndTime: new Date(2018, 0, 5, 11, 30),
CategoryColor: '#357cd2'
}, {
Id: 15,
Subject: 'Facts of Humming Birds',
StartTime: new Date(2018, 0, 10, 9, 30),
EndTime: new Date(2018, 0, 10, 11, 0),
CategoryColor: '#7fa900'
}, {
Id: 16,
Subject: 'Sky Gazers',
StartTime: new Date(2018, 11, 23, 11, 0),
EndTime: new Date(2018, 11, 23, 13, 0),
CategoryColor: '#ea7a57'
}, {
Id: 17,
Subject: 'The Cycle of Seasons',
StartTime: new Date(2018, 0, 2, 5, 30),
EndTime: new Date(2018, 0, 2, 7, 30),
CategoryColor: '#00bdae'
}, {
Id: 18,
Subject: 'Space Galaxies and Planets',
StartTime: new Date(2018, 0, 4, 17, 0),
EndTime: new Date(2018, 0, 4, 18, 30),
CategoryColor: '#f57f17'
}, {
Id: 19,
Subject: 'Lifecycle of Bumblebee',
StartTime: new Date(2018, 11, 31, 6, 0),
EndTime: new Date(2018, 11, 31, 7, 30),
CategoryColor: '#7fa900'
}, {
Id: 20,
Subject: 'Sky Gazers',
StartTime: new Date(2018, 11, 31, 16, 0),
EndTime: new Date(2018, 11, 31, 18, 0),
CategoryColor: '#ea7a57'
}
];Display week numbers in timeline views
Week numbers can be displayed in a dedicated header row of the timeline Scheduler by including the Week option within the headerRows property.
import { Schedule, TimelineViews, TimelineMonth } from '@syncfusion/ej2-schedule';
import { scheduleData } from './datasource.ts';
Schedule.Inject(TimelineViews, TimelineMonth);
let scheduleObj: Schedule = new Schedule({
width: '100%', height: '550px',
selectedDate: new Date(2018, 1, 15),
headerRows: [{ option: 'Week' }, { option: 'Date' }, { option: 'Hour' }],
currentView: 'TimelineMonth',
views: [{ option: 'TimelineMonth', interval: 24 }, { option: 'TimelineWeek', interval: 3 }, { option: 'TimelineDay', interval: 4 }],
eventSettings: { dataSource: scheduleData }
});
scheduleObj.appendTo('#Schedule');<!DOCTYPE html>
<html lang="en">
<head>
<title>Schedule Typescript Control</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript Schedule Control" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-base/styles/fluent2.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-buttons/styles/fluent2.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-calendars/styles/fluent2.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-dropdowns/styles/fluent2.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-inputs/styles/fluent2.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-navigations/styles/fluent2.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-popups/styles/fluent2.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-schedule/styles/fluent2.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js" type="text/javascript"></script>
<script src="systemjs.config.js" type="text/javascript"></script>
</head>
<body>
<div id='loader'>LOADING....</div>
<div id='container'>
<div id="Schedule"></div>
</div>
</body>
</html>export let scheduleData: Object[] = [
{
Id: 1,
Subject: 'Explosion of Betelgeuse Star',
StartTime: new Date(2019, 0, 1, 9, 30),
EndTime: new Date(2019, 0, 1, 11, 0),
CategoryColor: '#1aaa55'
}, {
Id: 2,
Subject: 'Thule Air Crash Report',
StartTime: new Date(2019, 0, 2, 12, 0),
EndTime: new Date(2019, 0, 2, 14, 0),
CategoryColor: '#357cd2'
}, {
Id: 3,
Subject: 'Blue Moon Eclipse',
StartTime: new Date(2019, 0, 3, 9, 30),
EndTime: new Date(2019, 0, 3, 11, 0),
CategoryColor: '#7fa900'
}, {
Id: 4,
Subject: 'Meteor Showers in 2018',
StartTime: new Date(2019, 0, 1, 13, 0),
EndTime: new Date(2019, 0, 1, 14, 30),
CategoryColor: '#ea7a57'
}, {
Id: 5,
Subject: 'Milky Way as Melting pot',
StartTime: new Date(2018, 11, 31, 12, 0),
EndTime: new Date(2018, 11, 31, 14, 0),
CategoryColor: '#00bdae'
}, {
Id: 6,
Subject: 'Mysteries of Bermuda Triangle',
StartTime: new Date(2018, 11, 31, 9, 30),
EndTime: new Date(2018, 11, 31, 11, 0),
CategoryColor: '#f57f17'
}, {
Id: 7,
Subject: 'Glaciers and Snowflakes',
StartTime: new Date(2018, 11, 26, 11, 0),
EndTime: new Date(2018, 11, 26, 12, 30),
CategoryColor: '#1aaa55'
}, {
Id: 8,
Subject: 'Life on Mars',
StartTime: new Date(2018, 11, 25, 9, 0),
EndTime: new Date(2018, 11, 25, 10, 0),
CategoryColor: '#357cd2'
}, {
Id: 9,
Subject: 'Alien Civilization',
StartTime: new Date(2018, 11, 27, 11, 0),
EndTime: new Date(2018, 11, 27, 13, 0),
CategoryColor: '#7fa900'
}, {
Id: 10,
Subject: 'Wildlife Galleries',
StartTime: new Date(2018, 11, 29, 11, 0),
EndTime: new Date(2018, 11, 29, 13, 0),
CategoryColor: '#ea7a57'
}, {
Id: 11,
Subject: 'Best Photography 2018',
StartTime: new Date(2018, 11, 30, 9, 30),
EndTime: new Date(2018, 11, 30, 11, 0),
CategoryColor: '#00bdae'
}, {
Id: 12,
Subject: 'Smarter Puppies',
StartTime: new Date(2018, 11, 29, 10, 0),
EndTime: new Date(2018, 11, 29, 11, 30),
CategoryColor: '#f57f17'
}, {
Id: 13,
Subject: 'Myths of Andromeda Galaxy',
StartTime: new Date(2018, 11, 28, 10, 30),
EndTime: new Date(2018, 11, 28, 12, 30),
CategoryColor: '#1aaa55'
}, {
Id: 14,
Subject: 'Aliens vs Humans',
StartTime: new Date(2018, 0, 5, 10, 0),
EndTime: new Date(2018, 0, 5, 11, 30),
CategoryColor: '#357cd2'
}, {
Id: 15,
Subject: 'Facts of Humming Birds',
StartTime: new Date(2018, 0, 10, 9, 30),
EndTime: new Date(2018, 0, 10, 11, 0),
CategoryColor: '#7fa900'
}, {
Id: 16,
Subject: 'Sky Gazers',
StartTime: new Date(2018, 11, 23, 11, 0),
EndTime: new Date(2018, 11, 23, 13, 0),
CategoryColor: '#ea7a57'
}, {
Id: 17,
Subject: 'The Cycle of Seasons',
StartTime: new Date(2018, 0, 2, 5, 30),
EndTime: new Date(2018, 0, 2, 7, 30),
CategoryColor: '#00bdae'
}, {
Id: 18,
Subject: 'Space Galaxies and Planets',
StartTime: new Date(2018, 0, 4, 17, 0),
EndTime: new Date(2018, 0, 4, 18, 30),
CategoryColor: '#f57f17'
}, {
Id: 19,
Subject: 'Lifecycle of Bumblebee',
StartTime: new Date(2018, 11, 31, 6, 0),
EndTime: new Date(2018, 11, 31, 7, 30),
CategoryColor: '#7fa900'
}, {
Id: 20,
Subject: 'Sky Gazers',
StartTime: new Date(2018, 11, 31, 16, 0),
EndTime: new Date(2018, 11, 31, 18, 0),
CategoryColor: '#ea7a57'
}
];Display a complete year in Timeline view
To display a complete year in a Timeline view, set the interval to 12 and include the TimelineMonth view in the Scheduler’s views property.
import { Schedule, TimelineMonth } from '@syncfusion/ej2-schedule';
import { eventData } from './datasource.ts';
Schedule.Inject(TimelineMonth);
let scheduleObj: Schedule = new Schedule({
width: '100%', height: '550px',
selectedDate: new Date(2018, 0, 1),
headerRows: [{ option: 'Month' }, { option: 'Date' }],
views: [{ option: 'TimelineMonth', interval: 12 }],
eventSettings: { dataSource: eventData }
});
scheduleObj.appendTo('#Schedule');<!DOCTYPE html>
<html lang="en">
<head>
<title>Schedule Typescript Control</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript Schedule Control" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-base/styles/fluent2.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-buttons/styles/fluent2.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-calendars/styles/fluent2.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-dropdowns/styles/fluent2.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-inputs/styles/fluent2.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-navigations/styles/fluent2.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-popups/styles/fluent2.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-schedule/styles/fluent2.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js" type="text/javascript"></script>
<script src="systemjs.config.js" type="text/javascript"></script>
</head>
<body>
<div id='loader'>LOADING....</div>
<div id='container'>
<div id="Schedule"></div>
</div>
</body>
</html>export let eventData: Object[] = [
{
Id: 1,
Subject: 'Explosion of Betelgeuse Star',
StartTime: new Date(2018, 5, 11, 9, 30),
EndTime: new Date(2018, 5, 11, 11, 0),
CategoryColor: '#1aaa55'
}, {
Id: 2,
Subject: 'Thule Air Crash Report',
StartTime: new Date(2018, 6, 2, 12, 0),
EndTime: new Date(2018, 6, 2, 14, 0),
CategoryColor: '#357cd2'
}, {
Id: 3,
Subject: 'Blue Moon Eclipse',
StartTime: new Date(2018, 2, 13, 9, 30),
EndTime: new Date(2018, 2, 13, 11, 0),
CategoryColor: '#7fa900'
}, {
Id: 4,
Subject: 'Meteor Showers in 2018',
StartTime: new Date(2018, 1, 14, 13, 0),
EndTime: new Date(2018, 1, 14, 14, 30),
CategoryColor: '#ea7a57'
}, {
Id: 5,
Subject: 'Milky Way as Melting pot',
StartTime: new Date(2018, 0, 7, 12, 0),
EndTime: new Date(2018, 0, 7, 14, 0),
CategoryColor: '#00bdae'
}, {
Id: 6,
Subject: 'Mysteries of Bermuda Triangle',
StartTime: new Date(2018, 0, 5, 9, 30),
EndTime: new Date(2018, 0, 5, 11, 0),
CategoryColor: '#f57f17'
}, {
Id: 7,
Subject: 'Glaciers and Snowflakes',
StartTime: new Date(2018, 2, 16, 11, 0),
EndTime: new Date(2018, 2, 16, 12, 30),
CategoryColor: '#1aaa55'
}, {
Id: 8,
Subject: 'Life on Mars',
StartTime: new Date(2018, 1, 17, 9, 0),
EndTime: new Date(2018, 1, 17, 10, 0),
CategoryColor: '#357cd2'
}, {
Id: 9,
Subject: 'Alien Civilization',
StartTime: new Date(2018, 1, 19, 11, 0),
EndTime: new Date(2018, 1, 19, 13, 0),
CategoryColor: '#7fa900'
}, {
Id: 10,
Subject: 'Wildlife Galleries',
StartTime: new Date(2018, 3, 21, 11, 0),
EndTime: new Date(2018, 3, 21, 13, 0),
CategoryColor: '#ea7a57'
}, {
Id: 11,
Subject: 'Best Photography 2018',
StartTime: new Date(2018, 4, 22, 9, 30),
EndTime: new Date(2018, 4, 22, 11, 0),
CategoryColor: '#00bdae'
}, {
Id: 12,
Subject: 'Smarter Puppies',
StartTime: new Date(2017, 11, 9, 10, 0),
EndTime: new Date(2017, 11, 9, 11, 30),
CategoryColor: '#f57f17'
}, {
Id: 13,
Subject: 'Myths of Andromeda Galaxy',
StartTime: new Date(2017, 11, 7, 10, 30),
EndTime: new Date(2017, 11, 7, 12, 30),
CategoryColor: '#1aaa55'
}, {
Id: 14,
Subject: 'Aliens vs Humans',
StartTime: new Date(2018, 1, 5, 10, 0),
EndTime: new Date(2018, 1, 5, 11, 30),
CategoryColor: '#357cd2'
}, {
Id: 15,
Subject: 'Facts of Humming Birds',
StartTime: new Date(2018, 1, 20, 9, 30),
EndTime: new Date(2018, 1, 20, 11, 0),
CategoryColor: '#7fa900'
}, {
Id: 16,
Subject: 'Sky Gazers',
StartTime: new Date(2018, 2, 2, 11, 0),
EndTime: new Date(2018, 2, 2, 13, 0),
CategoryColor: '#ea7a57'
}, {
Id: 17,
Subject: 'The Cycle of Seasons',
StartTime: new Date(2018, 1, 2, 5, 30),
EndTime: new Date(2018, 1, 2, 7, 30),
CategoryColor: '#00bdae'
}, {
Id: 18,
Subject: 'Space Galaxies and Planets',
StartTime: new Date(2018, 1, 3, 17, 0),
EndTime: new Date(2018, 1, 3, 18, 30),
CategoryColor: '#f57f17'
}, {
Id: 19,
Subject: 'Lifecycle of Bumblebee',
StartTime: new Date(2018, 0, 3, 6, 0),
EndTime: new Date(2018, 0, 3, 7, 30),
CategoryColor: '#7fa900'
}, {
Id: 20,
Subject: 'Sky Gazers',
StartTime: new Date(2018, 0, 2, 16, 0),
EndTime: new Date(2018, 0, 2, 18, 0),
CategoryColor: '#ea7a57'
}
];Customize header rows using a template
You can customize header row text and display formatted content or images using the template option within the headerRows property.
import { Schedule, TimelineMonth, CellTemplateArgs, getWeekNumber } from '@syncfusion/ej2-schedule';
import { Internationalization } from '@syncfusion/ej2-base';
import { eventData } from './datasource.ts';
Schedule.Inject(TimelineMonth);
interface TemplateFunction extends Window {
getYearDetails?: Function;
getMonthDetails?: Function;
getWeekDetails?: Function;
}
let instance: Internationalization = new Internationalization();
(window as TemplateFunction).getYearDetails = (value: CellTemplateArgs) => {
return 'Year: ' + instance.formatDate((value as CellTemplateArgs).date, { skeleton: 'y' });
};
(window as TemplateFunction).getMonthDetails = (value: CellTemplateArgs) => {
return 'Month: ' + instance.formatDate((value as CellTemplateArgs).date, { skeleton: 'M' });
};
(window as TemplateFunction).getWeekDetails = (value: CellTemplateArgs) => {
return 'Week ' + getWeekNumber((value as CellTemplateArgs).date);
};
let scheduleObj: Schedule = new Schedule({
width: '100%',
height: '550px',
selectedDate: new Date(2018, 0, 1),
headerRows: [
{ option: 'Year', template: '#year-template' },
{ option: 'Month', template: '#month-template' },
{ option: 'Week', template: '#week-template' },
{ option: 'Date' }
],
views: [{ option: 'TimelineMonth' }],
eventSettings: { dataSource: eventData }
});
scheduleObj.appendTo('#Schedule');<!DOCTYPE html>
<html lang="en">
<head>
<title>Schedule Typescript Control</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript Schedule Control" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-base/styles/fluent2.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-buttons/styles/fluent2.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-calendars/styles/fluent2.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-dropdowns/styles/fluent2.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-inputs/styles/fluent2.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-navigations/styles/fluent2.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-popups/styles/fluent2.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-schedule/styles/fluent2.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js" type="text/javascript"></script>
<script src="systemjs.config.js" type="text/javascript"></script>
</head>
<body>
<div id='loader'>LOADING....</div>
<div id='container'>
<div id="Schedule"></div>
</div>
<script id="year-template" type="text/x-template">
<span class="year">${getYearDetails(data)}</span>
</script>
<script id="month-template" type="text/x-template">
<span class="month">${getMonthDetails(data)}</span>
</script>
<script id="week-template" type="text/x-template">
<span class="week">${getWeekDetails(data)}</span>
</script>
</body>
</html>export let eventData: Object[] = [
{
Id: 1,
Subject: 'Explosion of Betelgeuse Star',
StartTime: new Date(2018, 5, 11, 9, 30),
EndTime: new Date(2018, 5, 11, 11, 0),
CategoryColor: '#1aaa55'
}, {
Id: 2,
Subject: 'Thule Air Crash Report',
StartTime: new Date(2018, 6, 2, 12, 0),
EndTime: new Date(2018, 6, 2, 14, 0),
CategoryColor: '#357cd2'
}, {
Id: 3,
Subject: 'Blue Moon Eclipse',
StartTime: new Date(2018, 2, 13, 9, 30),
EndTime: new Date(2018, 2, 13, 11, 0),
CategoryColor: '#7fa900'
}, {
Id: 4,
Subject: 'Meteor Showers in 2018',
StartTime: new Date(2018, 1, 14, 13, 0),
EndTime: new Date(2018, 1, 14, 14, 30),
CategoryColor: '#ea7a57'
}, {
Id: 5,
Subject: 'Milky Way as Melting pot',
StartTime: new Date(2018, 0, 7, 12, 0),
EndTime: new Date(2018, 0, 7, 14, 0),
CategoryColor: '#00bdae'
}, {
Id: 6,
Subject: 'Mysteries of Bermuda Triangle',
StartTime: new Date(2018, 0, 5, 9, 30),
EndTime: new Date(2018, 0, 5, 11, 0),
CategoryColor: '#f57f17'
}, {
Id: 7,
Subject: 'Glaciers and Snowflakes',
StartTime: new Date(2018, 2, 16, 11, 0),
EndTime: new Date(2018, 2, 16, 12, 30),
CategoryColor: '#1aaa55'
}, {
Id: 8,
Subject: 'Life on Mars',
StartTime: new Date(2018, 1, 17, 9, 0),
EndTime: new Date(2018, 1, 17, 10, 0),
CategoryColor: '#357cd2'
}, {
Id: 9,
Subject: 'Alien Civilization',
StartTime: new Date(2018, 1, 19, 11, 0),
EndTime: new Date(2018, 1, 19, 13, 0),
CategoryColor: '#7fa900'
}, {
Id: 10,
Subject: 'Wildlife Galleries',
StartTime: new Date(2018, 3, 21, 11, 0),
EndTime: new Date(2018, 3, 21, 13, 0),
CategoryColor: '#ea7a57'
}, {
Id: 11,
Subject: 'Best Photography 2018',
StartTime: new Date(2018, 4, 22, 9, 30),
EndTime: new Date(2018, 4, 22, 11, 0),
CategoryColor: '#00bdae'
}, {
Id: 12,
Subject: 'Smarter Puppies',
StartTime: new Date(2017, 11, 9, 10, 0),
EndTime: new Date(2017, 11, 9, 11, 30),
CategoryColor: '#f57f17'
}, {
Id: 13,
Subject: 'Myths of Andromeda Galaxy',
StartTime: new Date(2017, 11, 7, 10, 30),
EndTime: new Date(2017, 11, 7, 12, 30),
CategoryColor: '#1aaa55'
}, {
Id: 14,
Subject: 'Aliens vs Humans',
StartTime: new Date(2018, 1, 5, 10, 0),
EndTime: new Date(2018, 1, 5, 11, 30),
CategoryColor: '#357cd2'
}, {
Id: 15,
Subject: 'Facts of Humming Birds',
StartTime: new Date(2018, 1, 20, 9, 30),
EndTime: new Date(2018, 1, 20, 11, 0),
CategoryColor: '#7fa900'
}, {
Id: 16,
Subject: 'Sky Gazers',
StartTime: new Date(2018, 2, 2, 11, 0),
EndTime: new Date(2018, 2, 2, 13, 0),
CategoryColor: '#ea7a57'
}, {
Id: 17,
Subject: 'The Cycle of Seasons',
StartTime: new Date(2018, 1, 2, 5, 30),
EndTime: new Date(2018, 1, 2, 7, 30),
CategoryColor: '#00bdae'
}, {
Id: 18,
Subject: 'Space Galaxies and Planets',
StartTime: new Date(2018, 1, 3, 17, 0),
EndTime: new Date(2018, 1, 3, 18, 30),
CategoryColor: '#f57f17'
}, {
Id: 19,
Subject: 'Lifecycle of Bumblebee',
StartTime: new Date(2018, 0, 3, 6, 0),
EndTime: new Date(2018, 0, 3, 7, 30),
CategoryColor: '#7fa900'
}, {
Id: 20,
Subject: 'Sky Gazers',
StartTime: new Date(2018, 0, 2, 16, 0),
EndTime: new Date(2018, 0, 2, 18, 0),
CategoryColor: '#ea7a57'
}
];You can refer to our JavaScript Scheduler feature tour page for its feature representations. You can also explore our JavaScript Scheduler example to learn how to present and manipulate data.