Allow week view to accept new ComponentType

[amarjeetalien]

Do you want to request a feature or report a bug?

feature

What's the current behavior?

react-big-calendar/index.d.ts

export interface Components<TEvent extends Event = Event> {
...
...
week?: {
// React.FC should also be added to type
header?: React.SFC | React.Component | React.ComponentClass | JSX.Element;
event?: React.SFC | React.Component | React.ComponentClass | JSX.Element;
};
...
...

It is not possible to override the entire week view using custom Components due to above code restriction. It doesn't provide option to pass a single Component (which would accept all week view props and not just header and event).

What's the expected behavior?

In the same Component, we can override toolbar due to the below declaration:

toolbar?: React.ComponentType<ToolbarProps>;

We can have something like:

type WeekViewProps = {
        header?: React.SFC | React.Component | React.ComponentClass | JSX.Element;
        event?: React.SFC | React.Component | React.ComponentClass | JSX.Element;
        // ...rest props of week view
    }
weekView?: React.ComponentType<WeekViewProps>;

In fact it would be nice if all view could be overridden like this.

I've to do something like #601, but the requirement is little complex (pic).

I would like to add note though: If library already supports something like this then please update the documentation. Even codebase does not provide any such comments. Also, I'm more than happy to help with both code update and documentation (guidance required, obviously)

[jquense]

hi, is this an api question or a limitation with the typescript types? We don't maintain the types and i'm not sure i understand what the problem is aside from the types maybe being incomplete

[amarjeetalien]

@jquense Thanks for the quick reply.

I'm trying to override the weekly view to look like the attached image above. I'm unable to do that as I could not figure out how to pass my own Component (with own styling and events). So, my request is to provide an option to do the same (or update documentation if it is already possible).

Just like the way we can override toolbar:

Current

<BigCalendar
      events={events}
      defaultView="month"
      formats={{
        weekdayFormat: 'dddd',
        dayFormat: 'DD dddd',
      }}
      localizer={BigCalendar.momentLocalizer(moment)}
      timeslots={2} // controls the step of timeslots in week view
      min={getExactTime(8)} // controls the timeslot start in week view
      max={getExactTime(23)} // controls the timeslot end in week view
      components={{
        toolbar: ToolBar,
        week: {
           header: WeekViewHeader,
           event: WeekViewEvent,
         },
      }}
      onSelectEvent={onSelectEvent}
    />

Expected

<BigCalendar
      events={events}
      defaultView="month"
      formats={{
        weekdayFormat: 'dddd',
        dayFormat: 'DD dddd',
      }}
      localizer={BigCalendar.momentLocalizer(moment)}
      timeslots={2} // controls the step of timeslots in week view
      min={getExactTime(8)} // controls the timeslot start in week view
      max={getExactTime(23)} // controls the timeslot end in week view
      components={{
        toolbar: ToolBar,
        week: MyCustomWeekView
      onSelectEvent={onSelectEvent}
    />

I hope this clarifies.

[StefanSchwartze]

@amar

@jquense Thanks for the quick reply.

I'm trying to override the weekly view to look like the attached image above. I'm unable to do that as I could not figure out how to pass my own Component (with own styling and events). So, my request is to provide an option to do the same (or update documentation if it is already possible).

Just like the way we can override toolbar:

Current

<BigCalendar
      events={events}
      defaultView="month"
      formats={{
        weekdayFormat: 'dddd',
        dayFormat: 'DD dddd',
      }}
      localizer={BigCalendar.momentLocalizer(moment)}
      timeslots={2} // controls the step of timeslots in week view
      min={getExactTime(8)} // controls the timeslot start in week view
      max={getExactTime(23)} // controls the timeslot end in week view
      components={{
        toolbar: ToolBar,
        week: {
           header: WeekViewHeader,
           event: WeekViewEvent,
         },
      }}
      onSelectEvent={onSelectEvent}
    />

Expected

<BigCalendar
      events={events}
      defaultView="month"
      formats={{
        weekdayFormat: 'dddd',
        dayFormat: 'DD dddd',
      }}
      localizer={BigCalendar.momentLocalizer(moment)}
      timeslots={2} // controls the step of timeslots in week view
      min={getExactTime(8)} // controls the timeslot start in week view
      max={getExactTime(23)} // controls the timeslot end in week view
      components={{
        toolbar: ToolBar,
        week: MyCustomWeekView
      onSelectEvent={onSelectEvent}
    />

I hope this clarifies.

Hi, it is actually possible :)

Please look here

[amarjeetalien]

Thanks a lot, @StefanSchwartze. Once done, will see that I raise a PR for demo.