Row auto height in EJ2 TypeScript Schedule control
31 Jan 202624 minutes to read
By default, the height of the Scheduler rows in Timeline views are static and therefore, when the same time range holds multiple overlapping appointments, a +n more text indicator will be displayed. The row auto height feature enabled, able to view all the overlapping appointments present in those specific time range by auto-adjusting the row height based on the presence of the appointments count, instead of displaying the +n more text indicators.
To enable auto row height adjustments on Scheduler Timeline views and Month view, set true to the rowAutoHeight property whose default value is false.
This auto row height adjustment is applicable only on all the Timeline views as well as on the calendar Month view.
The following sections demonstrate how this feature works on the applicable views with practical examples.
Calendar month view
By default, the rows of the calendar Month view can accommodate only the limited appointments count based on the available row height, and the rest of the overlapping appointments are indicated with a +n more text indicator. The following example shows how the month view row auto-adjusts based on the number of appointments count, when this rowAutoHeight feature is enabled.
import { Schedule, Month } from '@syncfusion/ej2-schedule';
import { scheduleData } from './datasource.ts';
Schedule.Inject(Month);
let scheduleObj: Schedule = new Schedule({
width: '100%',
height: '450px',
selectedDate: new Date(2018, 1, 15),
currentView: 'Month',
rowAutoHeight: true,
views: ['Month'],
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/32.1.19/ej2-base/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-calendars/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-dropdowns/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-schedule/styles/tailwind3.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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>LOADING....</div>
<div id='container'>
<div id="Schedule"></div>
</div>
</body>
</html>/**
* Schedule datasource spec
*/
export let scheduleData: Object[] = [
{
Id: 1,
Subject: 'Explosion of Betelgeuse Star',
StartTime: new Date(2018, 1, 15, 12, 0),
EndTime: new Date(2018, 1, 15, 14, 0),
CategoryColor: '#1aaa55'
}, {
Id: 2,
Subject: 'Thule Air Crash Report',
StartTime: new Date(2018, 1, 15, 12, 0),
EndTime: new Date(2018, 1, 15, 14, 0),
CategoryColor: '#357cd2'
}, {
Id: 3,
Subject: 'Blue Moon Eclipse',
StartTime: new Date(2018, 1, 13, 9, 30),
EndTime: new Date(2018, 1, 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, 1, 15, 12, 0),
EndTime: new Date(2018, 1, 15, 14, 0),
CategoryColor: '#00bdae'
}, {
Id: 6,
Subject: 'Mysteries of Bermuda Triangle',
StartTime: new Date(2018, 1, 15, 12, 0),
EndTime: new Date(2018, 1, 15, 14, 0),
CategoryColor: '#f57f17'
}, {
Id: 7,
Subject: 'Glaciers and Snowflakes',
StartTime: new Date(2018, 1, 16, 11, 0),
EndTime: new Date(2018, 1, 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, 1, 21, 11, 0),
EndTime: new Date(2018, 1, 21, 13, 0),
CategoryColor: '#ea7a57'
}, {
Id: 11,
Subject: 'Best Photography 2018',
StartTime: new Date(2018, 1, 22, 9, 30),
EndTime: new Date(2018, 1, 22, 11, 0),
CategoryColor: '#00bdae'
}, {
Id: 12,
Subject: 'Smarter Puppies',
StartTime: new Date(2018, 1, 9, 10, 0),
EndTime: new Date(2018, 1, 9, 11, 30),
CategoryColor: '#f57f17'
}, {
Id: 13,
Subject: 'Myths of Andromeda Galaxy',
StartTime: new Date(2018, 1, 7, 10, 30),
EndTime: new Date(2018, 1, 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, 15, 12, 0),
EndTime: new Date(2018, 1, 15, 14, 0),
CategoryColor: '#7fa900'
}, {
Id: 16,
Subject: 'Sky Gazers',
StartTime: new Date(2018, 1, 23, 11, 0),
EndTime: new Date(2018, 1, 23, 13, 0),
CategoryColor: '#ea7a57'
}, {
Id: 17,
Subject: 'The Cycle of Seasons',
StartTime: new Date(2018, 1, 12, 5, 30),
EndTime: new Date(2018, 1, 12, 7, 30),
CategoryColor: '#00bdae'
}, {
Id: 18,
Subject: 'Space Galaxies and Planets',
StartTime: new Date(2018, 1, 15, 12, 0),
EndTime: new Date(2018, 1, 15, 14, 0),
CategoryColor: '#f57f17'
}, {
Id: 19,
Subject: 'Lifecycle of Bumblebee',
StartTime: new Date(2018, 1, 15, 12, 0),
EndTime: new Date(2018, 1, 15, 14, 0),
CategoryColor: '#7fa900'
}, {
Id: 20,
Subject: 'Sky Gazers',
StartTime: new Date(2018, 1, 15, 12, 0),
EndTime: new Date(2018, 1, 15, 14, 0),
CategoryColor: '#ea7a57'
}
];Timeline views
When the feature rowAutoHeight is enabled in Timeline views, the row height gets auto-adjusted based on the number of overlapping events occupied on the same time range, which is demonstrated in the following example.
import { Schedule, TimelineViews, TimelineMonth, Agenda, Resize, DragAndDrop } from '@syncfusion/ej2-schedule';
import { scheduleData } from './datasource.ts';
Schedule.Inject(TimelineViews, TimelineMonth, Agenda, Resize, DragAndDrop);
let scheduleObj: Schedule = new Schedule({
width: '100%',
height: '450px',
rowAutoHeight: true,
selectedDate: new Date(2018, 1, 15),
currentView: 'TimelineWeek',
views: [
{ option: 'TimelineDay' },
{ option: 'TimelineWeek' },
{ option: 'TimelineWorkWeek' },
{ option: 'TimelineMonth' },
{ option: 'Agenda' }
],
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/32.1.19/ej2-base/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-calendars/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-dropdowns/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-schedule/styles/tailwind3.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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>LOADING....</div>
<div id='container'>
<div id="Schedule"></div>
</div>
</body>
</html>/**
* Schedule datasource spec
*/
export let scheduleData: Object[] = [
{
Id: 1,
Subject: 'Explosion of Betelgeuse Star',
StartTime: new Date(2018, 1, 15, 12, 0),
EndTime: new Date(2018, 1, 15, 14, 0),
CategoryColor: '#1aaa55'
}, {
Id: 2,
Subject: 'Thule Air Crash Report',
StartTime: new Date(2018, 1, 15, 12, 0),
EndTime: new Date(2018, 1, 15, 14, 0),
CategoryColor: '#357cd2'
}, {
Id: 3,
Subject: 'Blue Moon Eclipse',
StartTime: new Date(2018, 1, 13, 9, 30),
EndTime: new Date(2018, 1, 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, 1, 15, 12, 0),
EndTime: new Date(2018, 1, 15, 14, 0),
CategoryColor: '#00bdae'
}, {
Id: 6,
Subject: 'Mysteries of Bermuda Triangle',
StartTime: new Date(2018, 1, 15, 12, 0),
EndTime: new Date(2018, 1, 15, 14, 0),
CategoryColor: '#f57f17'
}, {
Id: 7,
Subject: 'Glaciers and Snowflakes',
StartTime: new Date(2018, 1, 16, 11, 0),
EndTime: new Date(2018, 1, 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, 1, 21, 11, 0),
EndTime: new Date(2018, 1, 21, 13, 0),
CategoryColor: '#ea7a57'
}, {
Id: 11,
Subject: 'Best Photography 2018',
StartTime: new Date(2018, 1, 22, 9, 30),
EndTime: new Date(2018, 1, 22, 11, 0),
CategoryColor: '#00bdae'
}, {
Id: 12,
Subject: 'Smarter Puppies',
StartTime: new Date(2018, 1, 9, 10, 0),
EndTime: new Date(2018, 1, 9, 11, 30),
CategoryColor: '#f57f17'
}, {
Id: 13,
Subject: 'Myths of Andromeda Galaxy',
StartTime: new Date(2018, 1, 7, 10, 30),
EndTime: new Date(2018, 1, 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, 15, 12, 0),
EndTime: new Date(2018, 1, 15, 14, 0),
CategoryColor: '#7fa900'
}, {
Id: 16,
Subject: 'Sky Gazers',
StartTime: new Date(2018, 1, 23, 11, 0),
EndTime: new Date(2018, 1, 23, 13, 0),
CategoryColor: '#ea7a57'
}, {
Id: 17,
Subject: 'The Cycle of Seasons',
StartTime: new Date(2018, 1, 12, 5, 30),
EndTime: new Date(2018, 1, 12, 7, 30),
CategoryColor: '#00bdae'
}, {
Id: 18,
Subject: 'Space Galaxies and Planets',
StartTime: new Date(2018, 1, 15, 12, 0),
EndTime: new Date(2018, 1, 15, 14, 0),
CategoryColor: '#f57f17'
}, {
Id: 19,
Subject: 'Lifecycle of Bumblebee',
StartTime: new Date(2018, 1, 15, 12, 0),
EndTime: new Date(2018, 1, 15, 14, 0),
CategoryColor: '#7fa900'
}, {
Id: 20,
Subject: 'Sky Gazers',
StartTime: new Date(2018, 1, 15, 12, 0),
EndTime: new Date(2018, 1, 15, 14, 0),
CategoryColor: '#ea7a57'
}
];Timeline views with multiple resources
The following example shows how the auto row adjustment feature works on timeline views with multiple resources.
import { Schedule, TimelineViews, Resize, DragAndDrop } from '@syncfusion/ej2-schedule';
import { roomData } from './datasource.ts';
Schedule.Inject(TimelineViews, Resize, DragAndDrop);
let scheduleObj: Schedule = new Schedule({
width: '100%',
height: '550px',
selectedDate: new Date(2018, 7, 1),
currentView: 'TimelineWeek',
rowAutoHeight: true,
views: ['TimelineDay', 'TimelineWeek'],
group: {
enableCompactView: false,
resources: ['MeetingRoom']
},
resources: [{
field: 'RoomId', title: 'Room Type',
name: 'MeetingRoom', allowMultiple: true,
dataSource: [
{ text: 'Room A', id: 1, color: '#98AFC7' },
{ text: 'Room B', id: 2, color: '#99c68e' },
{ text: 'Room C', id: 3, color: '#C2B280' },
{ text: 'Room D', id: 4, color: '#3090C7' },
{ text: 'Room E', id: 5, color: '#95b9' },
{ text: 'Room F', id: 6, color: '#95b9c7' },
{ text: 'Room G', id: 7, color: '#deb887' },
{ text: 'Room H', id: 8, color: '#3090C7' },
{ text: 'Room I', id: 9, color: '#98AFC7' },
{ text: 'Room J', id: 10, color: '#778899' }
],
textField: 'text', idField: 'id', colorField: 'color'
}],
eventSettings: {
dataSource: roomData,
fields: {
id: 'Id',
subject: { title: 'Summary', name: 'Subject' },
location: { title: 'Location', name: 'Location' },
description: { title: 'Comments', name: 'Description' },
startTime: { title: 'From', name: 'StartTime' },
endTime: { title: 'To', name: 'EndTime' }
}
}
});
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/32.1.19/ej2-base/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-calendars/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-dropdowns/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-schedule/styles/tailwind3.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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>LOADING....</div>
<div id='container'>
<div id="Schedule"></div>
</div>
</body>
</html>/**
* Schedule datasource spec
*/
export let roomData: Object[] = [
{
Id: 1,
Subject: 'Board Meeting',
Description: 'Meeting to discuss business goal of 2018.',
StartTime: new Date(2018, 6, 30, 9, 0),
EndTime: new Date(2018, 6, 30, 11, 0),
RoomId: 1
},
{
Id: 2,
Subject: 'Training session on JSP',
Description: 'Knowledge sharing on JSP topics.',
StartTime: new Date(2018, 6, 30, 15, 0),
EndTime: new Date(2018, 6, 30, 17, 0),
RoomId: 5
},
{
Id: 3,
Subject: 'Sprint Planning with Team members',
Description: 'Planning tasks for sprint.',
StartTime: new Date(2018, 6, 30, 9, 30),
EndTime: new Date(2018, 6, 30, 11, 0),
RoomId: 3
},
{
Id: 4,
Subject: 'Meeting with Client',
Description: 'Customer meeting to discuss features.',
StartTime: new Date(2018, 6, 30, 11, 0),
EndTime: new Date(2018, 6, 30, 13, 0),
RoomId: 4
},
{
Id: 5,
Subject: 'Support Meeting with Managers',
Description: 'Meeting to discuss support plan.',
StartTime: new Date(2018, 6, 30, 16, 0),
EndTime: new Date(2018, 6, 30, 17, 30),
RoomId: 5
},
{
Id: 6, Subject: 'Client Meeting',
Description: 'Meeting to discuss client requirements.',
StartTime: new Date(2018, 6, 30, 10, 30),
EndTime: new Date(2018, 6, 30, 13, 0),
RoomId: 6
},
{
Id: 7,
Subject: 'Appraisal Meeting',
Description: 'Meeting to discuss employee appraisals.',
StartTime: new Date(2018, 6, 30, 15, 0),
EndTime: new Date(2018, 6, 30, 16, 30),
RoomId: 7
},
{
Id: 8,
Subject: 'HR Meeting',
Description: 'Meeting to discuss HR plans.',
StartTime: new Date(2018, 6, 30, 8, 0),
EndTime: new Date(2018, 6, 30, 9, 0),
RoomId: 4
},
{
Id: 9,
Subject: 'Customer Meeting',
Description: 'Meeting to discuss customer reported issues.',
StartTime: new Date(2018, 6, 30, 10, 0),
EndTime: new Date(2018, 6, 30, 12, 0),
RoomId: 8
},
{
Id: 10,
Subject: 'Board Meeting',
Description: 'Meeting to discuss business plans.',
StartTime: new Date(2018, 6, 30, 14, 30),
EndTime: new Date(2018, 6, 30, 17, 0),
RoomId: 9
},
{
Id: 11,
Subject: 'Training session on Vue',
Description: 'Knowledge sharing on Vue concepts.',
StartTime: new Date(2018, 6, 30, 9, 0),
EndTime: new Date(2018, 6, 30, 10, 30),
RoomId: 10
},
{
Id: 12,
Subject: 'Meeting with Team members',
Description: 'Meeting to discuss on work report.',
StartTime: new Date(2018, 6, 30, 11, 30),
EndTime: new Date(2018, 6, 30, 12, 0),
RoomId: 5
},
{
Id: 13,
Subject: 'Meeting with General Manager',
Description: 'Meeting to discuss support plan.',
StartTime: new Date(2018, 6, 30, 14, 0),
EndTime: new Date(2018, 6, 30, 16, 0),
RoomId: 5
},
{
Id: 14,
Subject: 'Board Meeting',
Description: 'Meeting to discuss business goal of 2018.',
StartTime: new Date(2018, 6, 31, 9, 0),
EndTime: new Date(2018, 6, 31, 11, 0),
RoomId: 1
},
{
Id: 15,
Subject: 'Training session on JSP',
Description: 'Knowledge sharing on JSP topics.',
StartTime: new Date(2018, 6, 31, 14, 0),
EndTime: new Date(2018, 6, 31, 17, 0),
RoomId: 6
},
{
Id: 16,
Subject: 'Sprint Planning with Team members',
Description: 'Planning tasks for sprint.',
StartTime: new Date(2018, 6, 31, 9, 30),
EndTime: new Date(2018, 6, 31, 11, 0),
RoomId: 2
},
{
Id: 17,
Subject: 'Meeting with Client',
Description: 'Customer meeting to discuss features.',
StartTime: new Date(2018, 6, 31, 11, 0),
EndTime: new Date(2018, 6, 31, 13, 0),
RoomId: 7
},
{
Id: 18,
Subject: 'Support Meeting with Managers',
Description: 'Meeting to discuss support plan.',
StartTime: new Date(2018, 6, 31, 16, 0),
EndTime: new Date(2018, 6, 31, 17, 30),
RoomId: 2
},
{
Id: 19,
Subject: 'Training session on C#',
Description: 'Training session',
StartTime: new Date(2018, 6, 31, 14, 30),
EndTime: new Date(2018, 6, 31, 16, 0),
RoomId: 9
},
{
Id: 20,
Subject: 'Client Meeting - Phase 1',
Description: 'Meeting to discuss client requirements.',
StartTime: new Date(2018, 7, 1, 11, 0),
EndTime: new Date(2018, 7, 1, 13, 30),
RoomId: 3
},
{
Id: 21,
Subject: 'Appraisal Meeting',
Description: 'Meeting to discuss employee appraisals.',
StartTime: new Date(2018, 6, 31, 15, 0),
EndTime: new Date(2018, 6, 31, 16, 30),
RoomId: 3
},
{
Id: 22,
Subject: 'HR Meeting',
Description: 'Meeting to discuss HR plans.',
StartTime: new Date(2018, 6, 31, 8, 0),
EndTime: new Date(2018, 6, 31, 9, 0),
RoomId: 4
},
{
Id: 23,
Subject: 'Customer Meeting',
Description: 'Meeting to discuss customer reported issues.',
StartTime: new Date(2018, 6, 31, 10, 0),
EndTime: new Date(2018, 6, 31, 12, 0),
RoomId: 4
},
{
Id: 24,
Subject: 'Board Meeting',
Description: 'Meeting to discuss business plans.',
StartTime: new Date(2018, 7, 1, 16, 30),
EndTime: new Date(2018, 7, 1, 18, 0),
RoomId: 10
},
{
Id: 25,
Subject: 'Training session on Vue',
Description: 'Knowledge sharing on Vue concepts.',
StartTime: new Date(2018, 6, 31, 9, 0),
EndTime: new Date(2018, 6, 31, 10, 30),
RoomId: 5
},
{
Id: 26,
Subject: 'Meeting with Team members',
Description: 'Meeting to discuss on work report.',
StartTime: new Date(2018, 6, 31, 11, 30),
EndTime: new Date(2018, 6, 31, 12, 0),
RoomId: 5
},
{
Id: 27,
Subject: 'Meeting with General Manager',
Description: 'Meeting to discuss support plan.',
StartTime: new Date(2018, 6, 31, 14, 0),
EndTime: new Date(2018, 6, 31, 16, 0),
RoomId: 10
},
{
Id: 28,
Subject: 'Board Meeting',
Description: 'Meeting to discuss business goal of 2018.',
StartTime: new Date(2018, 7, 1, 9, 0),
EndTime: new Date(2018, 7, 1, 11, 0),
RoomId: 1
},
{
Id: 29,
Subject: 'Training session on JSP',
Description: 'Knowledge sharing on JSP topics.',
StartTime: new Date(2018, 7, 1, 17, 0),
EndTime: new Date(2018, 7, 1, 20, 0),
RoomId: 6
},
{
Id: 30,
Subject: 'Sprint Planning with Team members',
Description: 'Planning tasks for sprint.',
StartTime: new Date(2018, 7, 1, 10, 30),
EndTime: new Date(2018, 7, 1, 12, 0),
RoomId: 2
},
{
Id: 31,
Subject: 'Meeting with Client',
Description: 'Customer meeting to discuss features.',
StartTime: new Date(2018, 7, 1, 18, 0),
EndTime: new Date(2018, 7, 1, 20, 0),
RoomId: 8
},
{
Id: 32,
Subject: 'Support Meeting with Managers',
Description: 'Meeting to discuss support plan.',
StartTime: new Date(2018, 7, 1, 16, 0),
EndTime: new Date(2018, 7, 1, 17, 30),
RoomId: 7
},
{
Id: 33,
Subject: 'Training session on C#',
Description: 'Training session',
StartTime: new Date(2018, 7, 1, 14, 30),
EndTime: new Date(2018, 7, 1, 16, 0),
RoomId: 2
},
{
Id: 34,
Subject: 'Client Meeting - Phase 2',
Description: 'Meeting to discuss client requirements.',
StartTime: new Date(2018, 7, 1, 11, 30),
EndTime: new Date(2018, 7, 1, 14, 0),
RoomId: 3
},
{
Id: 35,
Subject: 'Appraisal Meeting',
Description: 'Meeting to discuss employee appraisals.',
StartTime: new Date(2018, 7, 1, 15, 0),
EndTime: new Date(2018, 7, 1, 16, 30),
RoomId: 8
},
{
Id: 36,
Subject: 'HR Meeting',
Description: 'Meeting to discuss HR plans.',
StartTime: new Date(2018, 7, 1, 9, 30),
EndTime: new Date(2018, 7, 1, 11, 30),
RoomId: 4
},
{
Id: 37,
Subject: 'Customer Meeting',
Description: 'Meeting to discuss customer reported issues.',
StartTime: new Date(2018, 7, 1, 10, 0),
EndTime: new Date(2018, 7, 1, 12, 0),
RoomId: 9
},
{
Id: 38,
Subject: 'Board Meeting',
Description: 'Meeting to discuss business plans.',
StartTime: new Date(2018, 7, 1, 15, 0),
EndTime: new Date(2018, 7, 1, 17, 0),
RoomId: 4
},
{
Id: 39,
Subject: 'Training session on Vue',
Description: 'Knowledge sharing on Vue concepts.',
StartTime: new Date(2018, 7, 1, 9, 0),
EndTime: new Date(2018, 7, 1, 10, 30),
RoomId: 5
},
{
Id: 40,
Subject: 'Meeting with Team members',
Description: 'Meeting to discuss on work report.',
StartTime: new Date(2018, 7, 1, 11, 30),
EndTime: new Date(2018, 7, 1, 12, 30),
RoomId: 5
},
{
Id: 41,
Subject: 'Meeting with General Manager',
Description: 'Meeting to discuss support plan.',
StartTime: new Date(2018, 7, 1, 14, 0),
EndTime: new Date(2018, 7, 1, 16, 0),
RoomId: 10
},
{
Id: 43,
Subject: 'HR Meeting',
Description: 'Meeting to discuss HR plans.',
StartTime: new Date(2018, 7, 1, 18, 0),
EndTime: new Date(2018, 7, 1, 20, 0),
RoomId: 2
},
{
Id: 44,
Subject: 'HR Meeting',
Description: 'Meeting to discuss HR plans.',
StartTime: new Date(2018, 7, 1, 17, 30),
EndTime: new Date(2018, 7, 1, 20, 0),
RoomId: 1
},
{
Id: 45,
Subject: 'Client Meeting - Phase 3',
Description: 'Meeting to discuss client requirements.',
StartTime: new Date(2018, 7, 1, 12, 0),
EndTime: new Date(2018, 7, 1, 14, 30),
RoomId: 3
},
{
Id: 46,
Subject: 'Board Meeting',
Description: 'Meeting to discuss business plans.',
StartTime: new Date(2018, 7, 1, 18, 30),
EndTime: new Date(2018, 7, 1, 20, 0),
RoomId: 4
},
{
Id: 47,
Subject: 'Board Meeting',
Description: 'Meeting to discuss business plans.',
StartTime: new Date(2018, 7, 1, 15, 30),
EndTime: new Date(2018, 7, 1, 18, 0),
RoomId: 5
},
{
Id: 48,
Subject: 'HR Meeting',
Description: 'Meeting to discuss HR plans.',
StartTime: new Date(2018, 7, 1, 18, 30),
EndTime: new Date(2018, 7, 1, 20, 0),
RoomId: 5
},
{
Id: 49,
Subject: 'HR Meeting',
Description: 'Meeting to discuss HR plans.',
StartTime: new Date(2018, 7, 1, 14, 30),
EndTime: new Date(2018, 7, 1, 16, 0),
RoomId: 6
},
{
Id: 50,
Subject: 'Board Meeting',
Description: 'Meeting to discuss business plans.',
StartTime: new Date(2018, 7, 1, 9, 30),
EndTime: new Date(2018, 7, 1, 12, 0),
RoomId: 6
},
{
Id: 51,
Subject: 'Client Meeting',
Description: 'Meeting to discuss client requirements.',
StartTime: new Date(2018, 7, 1, 10, 30),
EndTime: new Date(2018, 7, 1, 12, 0),
RoomId: 7
},
{
Id: 52,
Subject: 'Appraisal Meeting',
Description: 'Meeting to discuss employee appraisals.',
StartTime: new Date(2018, 7, 1, 18, 0),
EndTime: new Date(2018, 7, 1, 19, 30),
RoomId: 7
},
{
Id: 53,
Subject: 'Support Meeting with Managers',
Description: 'Meeting to discuss support plan.',
StartTime: new Date(2018, 7, 1, 15, 30),
EndTime: new Date(2018, 7, 1, 17, 0),
RoomId: 9
},
{
Id: 54,
Subject: 'Support Meeting with Managers',
Description: 'Meeting to discuss support plan.',
StartTime: new Date(2018, 7, 1, 11, 0),
EndTime: new Date(2018, 7, 1, 12, 30),
RoomId: 8
},
{
Id: 55,
Subject: 'Support Meeting with Managers',
Description: 'Meeting to discuss support plan.',
StartTime: new Date(2018, 7, 1, 11, 0),
EndTime: new Date(2018, 7, 1, 12, 30),
RoomId: 10
}
];Appointments occupying entire cell
By default, when the rowAutoHeight, feature is enabled, a small space remains at the bottom of each cell after appointments are rendered. To avoid this space, the property ignoreWhitespace is set to true with in eventSettings whereas its default property value is false. In the following code example, the whitespace below the appointments has been ignored.
import { Schedule, TimelineViews, TimelineMonth } from '@syncfusion/ej2-schedule';
import { resourceData } from './datasource.ts';
Schedule.Inject(TimelineViews, TimelineMonth);
let scheduleObj: Schedule = new Schedule({
width: '100%',
height: 'auto',
currentView: 'TimelineWeek',
rowAutoHeight: true,
views: ['TimelineWeek', 'TimelineMonth'],
selectedDate: new Date(2021, 7, 4),
group: {
resources: ['Rooms', 'Owners']
},
resources: [{
field: 'RoomId', title: 'Room',
name: 'Rooms', allowMultiple: false,
dataSource: [
{ RoomText: 'ROOM 1', Id: 1, RoomColor: '#cb6bb2' },
{ RoomText: 'ROOM 2', Id: 2, RoomColor: '#56ca85' }
],
textField: 'RoomText', idField: 'Id', colorField: 'RoomColor'
}, {
field: 'OwnerId', title: 'Owner',
name: 'Owners', allowMultiple: true,
dataSource: [
{ OwnerText: 'Nancy', Id: 1, OwnerGroupId: 1, OwnerColor: '#ffaa00' },
{ OwnerText: 'Steven', Id: 2, OwnerGroupId: 2, OwnerColor: '#f8a398' },
{ OwnerText: 'Michael', Id: 3, OwnerGroupId: 1, OwnerColor: '#7499e1' }
],
textField: 'OwnerText', idField: 'Id', groupIDField: 'OwnerGroupId', colorField: 'OwnerColor'
}],
eventSettings: { dataSource: resourceData, ignoreWhitespace: true }
});
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/32.1.19/ej2-base/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-calendars/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-dropdowns/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-schedule/styles/tailwind3.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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>LOADING....</div>
<div id='container'>
<div id="Schedule"></div>
</div>
</body>
</html>/**
* Schedule datasource spec
*/
export let resourceData: Object[] = [
{
Id: 1,
Subject: 'Workflow Analysis',
StartTime: new Date(2021, 7, 4, 9, 30),
EndTime: new Date(2021, 7, 4, 12, 0),
IsAllDay: false,
OwnerId: 1,
RoomId: 1
}, {
Id: 2,
Subject: 'Requirement planning',
StartTime: new Date(2021, 7, 4, 12, 30),
EndTime: new Date(2021, 7, 4, 14, 0),
IsAllDay: false,
OwnerId: 2,
RoomId: 2
}, {
Id: 3,
Subject: 'Quality Analysis',
StartTime: new Date(2021, 7, 4, 10, 0),
EndTime: new Date(2021, 7, 4, 12, 30),
IsAllDay: false,
OwnerId: 3,
RoomId: 1
}, {
Id: 4,
Subject: 'Resource planning',
StartTime: new Date(2021, 7, 6, 13, 0),
EndTime: new Date(2021, 7, 6, 15, 30),
IsAllDay: false,
OwnerId: 2,
RoomId: 2
}, {
Id: 5,
Subject: 'Timeline estimation',
StartTime: new Date(2021, 7, 7, 9, 0),
EndTime: new Date(2021, 7, 7, 11, 30),
IsAllDay: false,
OwnerId: 1,
RoomId: 1
}];Note: The ignoreWhitespace property is only applicable when the rowAutoHeight feature is enabled in the Scheduler.
Refer to the JavaScript Scheduler feature tour page for its groundbreaking feature representations. Also explore our JavaScript Scheduler example to learn how to present and manipulate data.