Day view, how to make custom event card / event content?

Question

In a day view, how to change style of the event content.

I am able to make custom toolbar and change some styling for timeSlotWrapper but not able to take control of event content.

I have tried below code and achieved some customization using below code. I have created a sandbox with all the code I have so far.

Currently I have this:

Expected -

I want to be able to show those colored bars with event content.

I tried searching in issues but could not find any code that can help me so far.

Could someone pls help point me to right direction? Thank you.

Answer 1

You can provide a custom event layout and pass it into your components prop

<Calendar
  components={{
    event: CustomEvent
  }}
  ...other props
/>

you can also use the eventPropGetter prop for adding in additional classnames or styles.