Adding a label above each event in Scheduler

[Georgios Leon]

Hello there, 

I've been testing out the Syncfusion Scheduler and I'd like to ask if it is possible to add a label above each event that renders on a Row. Below I have attached an image of what I want to achieve.

I managed to make it by creating a block item with a recurrent rule and adding the same date range with the event. Is there any other method that I'm not aware of?

Attachment: Screenshot_6c62b675.rar

[Nevitha Ravi]

Hi Georgios, 

Greetings from Syncfusion Support. 

We have checked the shared image and suspect that your requirement is to add a label for each event and this can be achieved using template for events. Please refer to the following sample. 

https://stackblitz.com/edit/react-event-template?file=index.js  

  eventTemplate(props) { 

    return ( 

      <div className="event-template-wrap"> 

        <div>custom label</div> 

        <div className="subject" style={{ background: props.PrimaryColor }}> 

          {props.Subject} 

        </div> 

      </div> 

    ); 

  } 

 

Please try the above sample and get back to us if you need any further assistance. 

Regards, 

Nevitha 

[Georgios Leon]

Thank you Nevitha for the quick response. Yes, this is very close to what I need however I'd like to ask if it is possible to have the custom label outside the Event box. Again similar to the image that had sent you. In other words something like this:

                          LABEL

_______________________________

| Board Meeting                                   |

|                                                            |

|10:00AM - 11:00 AM                         |

|______________________________|

[Nevitha Ravi]

Hi Georgios, 

Thanks for your update. 

We have checked your requirement and let you know that you can add the custom label outside the event by overriding the label CSS in the template, but this will affect the positioning of appointments and causes misalignments. So we recommend to maintain the label inside the events. 

Please get back to us if you need any further assistance. 

Regards, 

Nevitha