Search code examples
reactjsreact-big-calendarreact-calendarevent-calendar

How to create event view in react-big-calender

I want to create a custom event view in react-big-calender. I go through the documentation. It's working fine. but still, the labels are visible in the slot

  const CustomEventComponent = ({ event }: any) => {
    return (
      <div>
        <Text className='color-ffffff'>Hello</Text>
      </div>
    );
  };

<Calendar
  toolbar={false}
  localizer={localizer}
  events={myEventsList}
  startAccessor='start'
  endAccessor='end'
  showAllEvents={true}
  defaultView={Views.DAY}
  components={{
    event: CustomEventComponent,
  }}
/>;

I had tried many examples but failed to remove the label. I don't know where I'm making a mistake. I have attached the image. Custom View with Label Can anyone guide me on how to create a custom view for an event?

Thanks in advance.

Solution

  • You are correct, within a TimeGrid view the label (a div with a class of rbc-event-label is always there, with a time formatted by eventTimeRangeStartFormat, eventTimeRangeFormat, or eventTimeRangeEndFormat, depending on it's span.

    You could override the rbc-event-label class, setting it to display:none, but I would be careful with that as it will take out screen reader access to the element as well.