Event display on Calendar - add more details

[Tony]

For each event shown on a calendar view I want to be able to show more than the Title, Times, Location.   I would like to be able to add some of the custom fields we are adding like Phone# and Vehicle.

So instead of:

Event Title

Time/Date

Location

I'd like to see:

Event Title

Time/Date

Location

Phone#

Vehicle

etc 

till there  is no more room in the window.

Is there a way to do this easily?

[Karthigeyan Krishnamurthi]

Hi Tony,  

 

Greetings from Syncfusion. 

 

In editor window ‘n’ number of fields can be added and kindly refer the below links. 

https://ej2.syncfusion.com/react/demos/#/material/schedule/editor-custom-field 

https://ej2.syncfusion.com/react/documentation/schedule/editor-template/?no-cache=1#add-additional-fields-to-the-default-editor 

 

We can customize the default editor and kindly refer the below links. 

https://ej2.syncfusion.com/react/demos/#/material/schedule/editor-template 

https://ej2.syncfusion.com/react/documentation/schedule/editor-template/?no-cache=1#customizing-event-editor-using-template 

 

Regards, 

Karthi 

[Tony]

Thanks - I checked those out - the Preview window options don't seem to be working - they just get stuck on Loading...  

It seems like those posts are for the editor window.  I'm wanting to display more info in the Event card on the calendar.. IE the Blue boxes in the screen shot - I want to be able to display more text under the time in each event blue box.   ie  Customer Name, Vehicle etc

[Karthigeyan Krishnamurthi]

Hi  Tony, 

 

Thanks for your update. 

 

Event height is based on its time range. For example it not possible to show all the field values(say 10) for 30 minutes range event. We recommend to use tooltip feature to show ‘n’ number of event field values like below. 

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

https://ej2.syncfusion.com/react/demos/#/material/schedule/tooltip 

https://ej2.syncfusion.com/react/documentation/schedule/appointments/#display-tooltip-for-appointments 

 

Regards, 

Karthi 

 

[Tony]

Agreed, but for events with a long height.. say enough to display 3 of 10 items, is there a way to get those to show up?

[Vinitha Devi Murugan]

Hi Tony, 

 

Thanks for your update. 

 

Yes, it’s possible to show the fields in event by making use ‘eventTemplate’ property. We have prepared the below sample for your reference, kindly refer it. 

 

https://stackblitz.com/edit/react-mde3yd-ozpkjv?file=index.js 

 

Kindly refer below links. 

 

https://ej2.syncfusion.com/react/demos/#/material/schedule/event-template 

https://ej2.syncfusion.com/react/documentation/schedule/appointments/?no-cache=1#using-template 

 

Regards,  

M. Vinitha devi. 

[Tony]

That is great!  Thanks!

[Karthigeyan Krishnamurthi]

Hi Tony,  

 

We are happy that our solution fulfilled your requirement. 

 

Regards, 

Karthi