React-big-calendar: Render custom component as Event

[tsvetann]

Can somebody point me on how to render a custom component as an event. Ideally, I would like to render different components for different days

Thx in advance

[jrhalchak]

All you need is a component or function that uses an event prop. You can then pass it to the calendar component.

A simplified example of one I started (_I'm using CSS modules_):

const MonthEvent = ({ event }) => (
  <div className={event.someProp ? styles.specialEvent : styles.event}>
    <div className={styles.eventTime}>{event.start}</div>
    <div className={styles.eventName}>{event.name}</div>
  </div>
);

Then in the calendar just do

<BigCalendar
  components={{
    month: { event: MonthEvent },
  }}
/>

or if you wanted to use that for all events you could do

<BigCalendar
  components={{
    event: MonthEvent,
  }}
/>

[jrhalchak]

Could definitely use some more clarity in the docs about the calendar's expectations of the event object though.

[wasabigeek]

This is my guess from digging the source - you can basically pass any renderable component. By default, it just shows "title":

<div className='rbc-event-content' title={title}>
    { Event
        ? <Event event={event} title={title}/>
        : title
     }
</div>

So, passing components={{event: ...}} allows you to change the text inside the event. Now as you have control over the events prop in <BigCalendar\>, you can pass in your own key/values and event titles can be modified depending on those values.

My example with simplified code, where I've added isBooked and noOfPax key/values to my event objects:

class CustomEvent extends React.Component {
  render() {
    const bookedIcon = event.isBooked ? <Badge><i className="fa fa-bookmark"></i></Badge> : null ;

    return (
      <div>
        <strong>{moment(event.start).format('ha')}</strong> {event.title}
        <span className="pull-right">
          {bookedIcon}
          <Badge>{event.noOfPax} <i className="fa fa-user"></i></Badge>
        </span>
      </div>
    );
  }
}

There are two other things you can control:

• eventPropGetter lets you change the styling of the event background (the blue portion) by changing CSS classes or adding inline styles (source)
• eventWrapper provides a wrapper around the whole event - I'm not sure why/how one would use this, but it's there.

[tobiasandersen]

Thanks @jrhalchak and @wasabigeek!

[bradeac]

I am trying to resolve a much simpler problem: displaying just the event title without the event start / end time.

My custom event:

export default class CustomEvent extends React.Component {
    render() {
        return (
        <div>
            {this.props.title}
        </div>
        );
    }
}

How I use BigCalendar:

import CustomEvent from './CustomEvent';

<BigCalendar
                        selectable
                        events={this.props.bookingsList}
                        components={{
                            event: CustomEvent,
                        }}
                        defaultView="week"
                        defaultDate={moment().toDate()}
                        min={moment('2018-02-23 09:00:00').toDate()}
                        max={moment('2018-02-23 19:00:00').toDate()}
                        onSelectEvent={event => //some code}
                        onSelectSlot={slotInfo => //some code}

The event box still has the start / end time.
Quite a newbie here, so I'm not figuring out what I'm doing wrong. Any help would be appreciated. Thanks

[jrhalchak]

@bradeac This site is more for issues with the library itself (bugs/improvements). Your question would do better over on stackoverflow.

Just from glancing at it, you're using this.props.title, I believe the prop that gets passed to the event component is just event so you'd want this.props.event.title. Although it looks like you're passing a different component so I'm not sure why it would display otherwise.

[bradeac]

That's exactly why I commented on an already closed issue, because it's more of a question instead of a bug.

True, it should be this.props.event.title. But this is not the problem. The problem is that the time range is still displayed, even though {this.props.event.title} is the only thing displayed by the custom component.

[bradeac]

Maybe someone else needs this behaviour. The fix is to modify the CSS:

.rbc-event-label {
  display: none;
}

[tomwalters]

@bradeac You can remove the time range using the formats prop:

<BigCalendar
  formats={{ eventTimeRangeFormat: () => null }}
/>

[schevall]

quick fix if someone need,
.rbc-time-content {
display: none;
}
.rbc-time-view {
flex: none;
}

[rdalfonso]

Is there a way to pass props from the parent component that creates the BigCalander into the custom Event component? I'd love the ability to change the each individual event.title when the user clicks the event.title