How to properly add margin to .e-appointment elements in Timeline Schedule view?

[Nam Nguyen]

Content:

Hello Syncfusion team,

I'm working with the React Schedule component in timeline view with resource grouping, and I need to add margins to the appointment elements (.e-appointment) to create visual spacing between events.

Current Setup:

Using Timeline view with resource grouping

Appointments are rendered with the default styling

Each appointment has the class .e-appointment

Current Code:

export const GlobalCalendarEventStyles = createGlobalStyle`

  .timeline-resource-grouping.e-schedule .e-timeline-view .e-appointment,

  .timeline-resource-grouping.e-schedule .e-timeline-month-view .e-appointment {

    height: 90px;

    margin: 5px !important;

  }

`;

Issues/Questions:

Layout Breaking: When I add margins to .e-appointment, the timeline layout gets broken. The appointments don't position correctly and overlap with each other or go outside their designated time slots. How can I add visual spacing without breaking the timeline's positioning system?

Positioning Conflicts: The appointments have inline positioning styles (left, top, width) that seem to conflict with margins. Is there a way to add spacing that doesn't interfere with the timeline's positioning calculations?

Alternative Solutions: Instead of margins, what would be the recommended approach to create visual separation between appointments? Should I use:

Inner padding/content spacing

Custom CSS classes via cssClass property

Border spacing

Or modify the appointment template itself?

Timeline Calculations: Does the Schedule component account for custom margins in its layout calculations, or does it assume appointments have no margins when positioning them?

Expected Result:

I want to add visual separation between appointments without breaking the timeline's layout integrity. The appointments should remain properly positioned within their time slots while having visual spacing

[Saritha Sankar]

Hi Nam Nguyen,

Thank you for your understanding and patience.

You can customize the appearance of appointment elements using the eventRendered method. Please refer to the sample code below for your reference:
 

 

  <ScheduleComponent cssClass='timeline-resource-grouping' width='100%' height='650px' selectedDate={new Date(2023, 0, 4)}  eventRendered={onEventRendered}>

 

 

 const onEventRendered = (args) => {

        let width = parseFloat(args.element.style.width); 

        if (!isNaN(width)) {

            args.element.style.width = (width - 4) + "px";

        }

        args.element.style.marginLeft = "4px"; 

      }

 

Sample Link: https://stackblitz.com/edit/react-lhvsyr8w-krfqvsss?file=index.js

EventRendered API Reference: React Schedule API component - Syncfusion

Regards,

Saritha S.