CSS to change row heights in a timeline view

[Terry Lease]

 Hello - I would like to compress the whitespace in the TimeLine view.  Is this possible?

I'd like the row height to be the same size as the event height.  The extra space just makes for more client scrolling and is unnecessary in my use-case.

Thanks!

[Ashokkumar Karuppasamy]

Hi Terry Lease,

To achieve your requirement, you can utilize the rowAutoHeight property and the eventSettings with the ignoreWhitespace option to meet your needs. We have attached the relevant code snippet and a sample demonstration of the solution for your reference. Please try the provided solution and let us know if you need any further assistance.

sample: https://stackblitz.com/edit/cry2n8gs-ut9u9bpv?file=index.ts,index.html

    let scheduleOptions: ScheduleModel = {

        width: '100%',

        height: '650px',

        selectedDate: new Date(2023, 0, 4),

        rowAutoHeight: true,

        views: ['TimelineDay', 'TimelineWeek', 'TimelineWorkWeek', 'TimelineMonth', 'Agenda'],

        currentView: 'TimelineWeek',

        workDays: [0, 1, 2, 3, 4, 5],

        group: {

            resources: ['Projects', 'Categories']

        },

        resources: [ {

                field: 'TaskId', title: 'Category',

                name: 'Categories', allowMultiple: true,

                dataSource: [

                    { text: 'Nancy', id: 1, color: '#df5286' },

                    { text: 'Steven', id: 2, color: '#7fa900' },

                    { text: 'Robert', id: 3, color: '#ea7a57' },

                    { text: 'Smith', id: 4, color: '#5978ee' },

                    { text: 'Micheal', id: 5, color: '#df5286' },

                    { text: 'Root', id: 6, color: '#00bdae' }

                ],

                textField: 'text', idField: 'id', groupIDField: 'groupId', colorField: 'color'

            }

        ],

        eventSettings: {

            dataSource: <Object[]>extend([], (dataSource as any).resourceData.concat((dataSource as any).timelineResourceData), null, true),

            ignoreWhitespace: true

            

        }

    };

 

Regards,
Ashok