Is it possible to render more information of each event within the calendar?

user_19613661 0
Viewed 43

I am using react-big-calendar I would like to know if it is possible to be able to render more information of each event in the calendar.

Its documentation is hard for me to understand, and I don't know what prop I have to use to make custom event content.

In this query, it says that it is possible to make an override component to the default one.

But I can't find an example to guide me, nor which props should I use to override within the calendar component.

what i want to achieveenter image description here

react-big-calendar reactjs
1 Answers

It is possible to override the 'event' display, in every view of the Calendar.

const MyMonthEventComponent = ({ event, isAllDay, ...props }) => // layout for event in 'month'
const MyWeekEventComponent = ({ event, isAllDay, ...props }) => // layout for event in 'week'
const MyDayEventComponent = ({ event, isAllDay, ...props }) => // layout for event in 'day'
// ...
const components = useMemo(() => ({
  month: {
    event: MyMonthEventComponent
  },
  week: {
    event: MyWeekEventComponent
  },
  day: {
    event: MyDayEventComponent
  }
  // or 'agenda' events, or an custom 'view' you define...
}), []);
// ...
<Calendar components={components} {...otherProps} />

The components prop points all of this out, though you are right that figuring out 'how' to construct an override is a little difficult, largely because so much can be overridden. The easiest way is to look at the source code on GitHub to find out what props are passed in to a particular component.

The biggest challenge to changing 'event' display is understanding base Calendar layout. Event display boundaries (width, height, placement), are dynamically calculated based upon available space. You typically display the absolute least amount of data necessary, for a user to identify an event, and provide other means for viewing additional detail. A common way to do this is by controlling the selected prop, by storing 'selected' in state and setting its value with the onSelectEvent prop (reading the documentation here will help). Once you are controlling selected you can use that state value to populate some other control area in your overall layout, providing a master/detail type view.

user_634370
Related