schedule event Customization - From Forum 195814

[Alex]

Good evening  Ashokkumar Karuppasamy,

thanks for your help your code help me so much. 

I want make other improvement such us to apply a customization to the template of the event in the scheduler to show only few info such as anaUserId and shiftTypeId with fixed sized to see all the text 

How can I do it?

Thanks Alex

[Ashokkumar Karuppasamy]

Hi Alex,

You can achieve your requirement by using the schedule eventTemplate, which allows you to customize the event as needed. We have attached a code snippet and sample for your reference. Please try the solution and let us know if you need any further assistance.

Sample: https://stackblitz.com/edit/react-epvz8rpm-6grvr48f?file=index.js,index.css,index.html

[index.js]

 const eventTemplate = (props) => {

    if (!props) return null;

    return (

      <div style={{ minWidth: '150px', maxWidth: '100%', overflowWrap: 'break-word' }}>

        <div style={{ fontSize: '11px', color: '#333', marginBottom: '8px' }}>

          <strong style={{ fontSize: '11px', color: '#000' }}>User ID:</strong> {props.anaUserId}

        </div>

        <div style={{ fontSize: '11px', color: '#333' }}>

          <strong style={{ fontSize: '11px', color: '#000' }}>Shift Type:</strong> {props.shiftTypeId}

        </div>

      </div>

    );

    

  };

        <div className='control-wrapper'>

          <ScheduleComponent

            cssClass='timeline-resource-grouping'

            width='100%'

            height='450px'

            rowAutoHeight={true}

            selectedDate={new Date(2025, 0, 4)}

            currentView='TimelineWeek'

            eventSettings={{ dataSource: data, fields: fieldMappings, allowAdding: false, allowDeleting: false, template: eventTemplate}}

            editorTemplate={editorTemplate}

 

            popupClose={onPopupClose

 

Regards,

Ashok

[Alex]

Hi  Ashokkumar Karuppasamy

Works thanks for your hel

[Swathi Ravi]

Hi Alex,

We are glad to hear that our provided solution working for you. Get back to us if you need any further assistance.

Regards,
Swathi