Row Auto Height in JavaScript Scheduler

By default, Scheduler rows in Timeline views have a fixed height. When multiple overlapping appointments occur in the same time range, the Scheduler shows a +n more indicator. Enable rowAutoHeight to auto-adjust row height so overlapping appointments are fully visible instead of being collapsed behind a +n more indicator.

Enable row auto height on Timeline and Month views by setting the rowAutoHeight property to true (default is false): rowAutoHeight.

Note: This feature applies to Timeline views and the calendar Month view.

The sections below demonstrate the feature with examples.

Calendar month view

By default, the Month view rows accommodate a limited number of appointments based on the available height; remaining overlapping appointments are shown as +n more. The example below shows the Month view auto-adjusting row height when rowAutoHeight is enabled.

var scheduleObj = new ej.schedule.Schedule({
    width: '100%',
    height: '550px',
    views: ['Month'],
    currentView: 'Month',
    rowAutoHeight: true,
    selectedDate: new Date(2018, 1, 15),
    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/bootstrap5.3.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-buttons/styles/bootstrap5.3.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-calendars/styles/bootstrap5.3.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-dropdowns/styles/bootstrap5.3.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-inputs/styles/bootstrap5.3.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-navigations/styles/bootstrap5.3.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-popups/styles/bootstrap5.3.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-schedule/styles/bootstrap5.3.css" rel="stylesheet">
    <script src="https://cdn.syncfusion.com/ej2/34.2.2/dist/ej2.min.js" type="text/javascript"></script>
    <script src="es5-datasource.js" type="text/javascript"></script>
</head>

<body>
    <div id="container">
        <div id="Schedule"></div>
    </div>

    <script>
        var ele = document.getElementById('container');
        if (ele) {
            ele.style.visibility = "visible";
        }   
    </script>
    <script src="index.js" type="text/javascript"></script>
</body>

</html>
/**
 * Schedule datasource spec
 */

var scheduleData = [
    {
        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 rowAutoHeight is enabled in Timeline views, row height is adjusted based on the number of overlapping events in the same time range. The following example demonstrates this behavior.

var scheduleObj = new ej.schedule.Schedule({
    height: '450px',
    rowAutoHeight: true,
    selectedDate: new Date(2018, 1, 15),
    eventSettings: { dataSource: scheduleData },
    currentView: 'TimelineWeek',
    views: [
        { option: 'TimelineDay' },
        { option: 'TimelineWeek' },
        { option: 'TimelineWorkWeek' },
        { option: 'TimelineMonth' },
        { option: 'Agenda' }
    ],
});
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/bootstrap5.3.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-buttons/styles/bootstrap5.3.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-calendars/styles/bootstrap5.3.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-dropdowns/styles/bootstrap5.3.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-inputs/styles/bootstrap5.3.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-navigations/styles/bootstrap5.3.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-popups/styles/bootstrap5.3.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-schedule/styles/bootstrap5.3.css" rel="stylesheet">
    <script src="https://cdn.syncfusion.com/ej2/34.2.2/dist/ej2.min.js" type="text/javascript"></script>
    <script src="es5-datasource.js" type="text/javascript"></script>
</head>

<body>
    <div id="container">
        <div id="Schedule"></div>
    </div>

    <script>
        var ele = document.getElementById('container');
        if (ele) {
            ele.style.visibility = "visible";
        }   
    </script>
    <script src="index.js" type="text/javascript"></script>
</body>

</html>
/**
 * Schedule datasource spec
 */

var scheduleData = [
    {
        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 auto row adjustment behaves in Timeline views with multiple resources.

var scheduleObj = new ej.schedule.Schedule({
    width: '100%',
    height: '550px',
    selectedDate: new Date(2018, 7, 1),
    currentView: 'TimelineWeek',
    rowAutoHeight: true,
    views: [
        { option: 'TimelineDay' },
        { option: '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: { name: 'Subject', title: 'Summary' },
            location: { name: 'Location', title: 'Location' },
            description: { name: 'Description', title: 'Comments' },
            startTime: { name: 'StartTime', title: 'From' },
            endTime: { name: 'EndTime', title: 'To' }
        }
    }
});
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/bootstrap5.3.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-buttons/styles/bootstrap5.3.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-calendars/styles/bootstrap5.3.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-dropdowns/styles/bootstrap5.3.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-inputs/styles/bootstrap5.3.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-navigations/styles/bootstrap5.3.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-popups/styles/bootstrap5.3.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-schedule/styles/bootstrap5.3.css" rel="stylesheet">
    <script src="https://cdn.syncfusion.com/ej2/34.2.2/dist/ej2.min.js" type="text/javascript"></script>
    <script src="es5-datasource.js" type="text/javascript"></script>
</head>

<body>
    <div id="container">
        <div id="Schedule"></div>
    </div>

    <script>
        var ele = document.getElementById('container');
        if (ele) {
            ele.style.visibility = "visible";
        }   
    </script>
    <script src="index.js" type="text/javascript"></script>
</body>

</html>
/**
 * Schedule datasource spec
 */

var roomData = [
    {
        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

When rowAutoHeight is enabled, a small whitespace may remain at the bottom of each cell after appointments render. Set ignoreWhitespace to true in eventSettings to remove that space (default is false). The example below demonstrates this setting.

var scheduleObj = new ej.schedule.Schedule({
    width: '100%',
    height: 'auto',
    currentView: 'TimelineWeek',
    rowAutoHeight: true,
    views: ['TimelineWeek', 'TimelineMonth', 'Agenda'],
    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/34.2.2/ej2-base/styles/bootstrap5.3.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-buttons/styles/bootstrap5.3.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-calendars/styles/bootstrap5.3.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-dropdowns/styles/bootstrap5.3.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-inputs/styles/bootstrap5.3.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-navigations/styles/bootstrap5.3.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-popups/styles/bootstrap5.3.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-schedule/styles/bootstrap5.3.css" rel="stylesheet">
  <script src="https://cdn.syncfusion.com/ej2/34.2.2/dist/ej2.min.js" type="text/javascript"></script>
  <script src="es5-datasource.js" type="text/javascript"></script>
</head>

<body>
  <div id="container">
    <div id="Schedule"></div>
  </div>

  <script>
    var ele = document.getElementById('container');
    if (ele) {
      ele.style.visibility = "visible";
    }   
  </script>
  <script src="index.js" type="text/javascript"></script>
</body>

</html>
var  resourceData = [
    {
        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, 5, 10, 0),
        EndTime: new Date(2021, 7, 5, 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 applies only when rowAutoHeight is enabled.

Refer to the JavaScript Scheduler feature tour for an overview, and explore the Scheduler demo for practical examples.