Adding a label above each event in Scheduler

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

3 Replies 1 reply marked as answer

NR Nevitha Ravi Syncfusion Team January 12, 2021 12:04 PM UTC

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. 

  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 


Marked as answer

GL Georgios Leon January 13, 2021 12:40 PM UTC

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                         |
|______________________________|




NR Nevitha Ravi Syncfusion Team January 13, 2021 01:31 PM UTC

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 


Loader.
Up arrow icon