Overlapping timeline

[Richard Craig]

Is is possible to use the timelineday view and have the appointments overlap instead of on the next line down?

We don't need to show any text on the event, just to show blocks and view free-space.

TIA

[Ashokkumar Karuppasamy]

Hi Richard Craig,

Schedule with resources:

You can achieve your requirement by using the schedule eventRendered event. If the event is used for rendering appointments, you can adjust the top value to meet your requirement. The attached code snippet and the sample below demonstrate the solution. Please give it a try and let us know if you need any further assistance.

Sample: https://stackblitz.com/edit/schedule-appointment-merge-sample-6kpr2t?file=index.js

    const onEventRendered = (args) => {

        var dataGroupIndex = args.element.getAttribute('data-group-index');

        var correspondingTdElement = scheduleObj.current.element.querySelector('td[data-group-index="' + dataGroupIndex + '"]');

        if (correspondingTdElement) {

            args.element.style.top = correspondingTdElement.offsetTop + 'px';

        } 

    }

    return (<div className='schedule-control-section'>

            <div className='col-lg-12 control-section'>

                <div className='control-wrapper'>

                    <ScheduleComponent ref={scheduleObj} eventRendered ={onEventRendered} cssClass='timeline-resource-grouping' width='100%' height='650px' selectedDate={new Date(2023, 0, 4)} currentView='TimelineWeek' eventSettings={{ dataSource: data }} group={{ resources: ['Projects', 'Categories'] }}>

 

Schedule without resource:

You can fulfill your requirement by customizing the schedule styles to meet your specific needs. The attached code snippet, along with the provided sample below, illustrates the solution. Please give it a try, and feel free to reach out if you need any further assistance.

Sample: https://stackblitz.com/edit/schedule-timeline-overlap-9cbjsh?file=index.js,index.html

          <ScheduleComponent

            cssClass="schedule-custom-style"

            height="650px"

            ref={scheduleObj}

            selectedDate={selectedDate}

            workDays={workDays}

            eventSettings={{ dataSource: data }}

          >

 

<style>

            .control-section

            {

                margin-top: 100px;

            }

            .schedule-custom-style.e-schedule .e-appointment-container .e-appointment {

                top: 0px !important;

 

            }

    </style>

 

Regards,
Ashok