Passing props to a customView?

[ghost]

Hey, so given the following code:

<Calendar views={{week: true, agenda: CustomAgendaComponent}} ...otherProps />

is there a way to pass down a custom data prop to the CustomAgendaComponent?

Assuming I want one view to show some events, and another view to show a different set of events.

Can't seem to find any way of doing that. Thanks.

[herrlein-dawid]

I think custom props should be passed in this way:

                views={{
                    agenda: true,
                    day: true,
                    week: true,
                    work_week: true,
                    month: props => (
                        <MonthView
                            {...props}
                            onOpenActivity={this.props.openActivity}
                        />
                    )
                }}

This works for overriding other react-big-calendar components like eventWrapper or toolbar.

When i try to use it for custom view, I receive this message (it is typescript):

Uncaught TypeError: View.title is not a function
    at Calendar.render (react-big-calendar.esm.js:4747)
    at finishClassComponent (react-dom.development.js:17485)
    at updateClassComponent (react-dom.development.js:17435)
    at beginWork (react-dom.development.js:19073)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
    at invokeGuardedCallback (react-dom.development.js:4056)
    at beginWork$1 (react-dom.development.js:23959)
    at performUnitOfWork (react-dom.development.js:22771)
    at workLoopSync (react-dom.development.js:22702)

[ghost]

same error here about the view.title not being a function. is there any alternative / updates on this issue?

[guptaji048]

@drmarinescu i to am getting same error for my custom agenda view, even though i dont want to pass props. @jquense please help.

[bemlw]

Same issue here. TypeError: View.title is not a function

[francoisplet]

had this problem with a custom week view, I used a react context, wrapping the calendar component, then you can use your data context in the custom component

[mischa-s]

I've been struggling with variant of this and finally found a work around.

My problem is that I need to pass props into the navigate function of my view, however because it is static I was struggling to inject custom them.

I've just noticed that navigate receives a third argument which is the props of the calendar. Therefore anything you require in navigate can be given to the main component and de-structured off the third argument. You can seemingly use any key/value pair here i.e

    <Calendar
        ...rest
       foo={{yes: bar}}
   />

The limitation here is because it is a static method, these are the initial props, and do not update on rerender.

Having spent ages trying to find a solution, positing here hoping it can help somebody else

[mischa-s]

Just checked and ^ works for the this.props of a custom view render method as well

[augustoostapechen]

I know it's a old question, but I have another option to pass custom props in custom views.

In this example I have a custom view called YearView. And I need to pass a callback function called OnCreateOrEdit, so I created a component with the same name.

<Calendar 
   localizer={localizer}
   events={events || []}
   startAccessor="start"
   endAccessor="end"
   defaultView="year"
   views={{
     year: YearView
   }}
   components={{
     toolbar: props => <Toolbar {...props} />,
     onCreateOrEdit
   }}
/>

In the custom view component, it's simple like that.

export const YearView = React.memo(({components, ...props }) => {

  const { onCreateOrEdit } = components;

          .....
}

[avdkishore]

This is still an issue in 2023. More than 2 years but no update yet. Disappointed !