[Feature Request] Custom Resource Header

[healthycola]

I'm looking to add custom header for resources. I found that it's pretty much hard coded in here. I'm not sure if anyone is already working on this, if not, would it be okay if I created a PR to enable custom headers for resources?

Thanks!

[lksilva]

This feature has already added in last version but don't exists in @types.

"@types/react-big-calendar": "^0.20.10",
"react-big-calendar": "^0.20.4",

export interface Components<TEvent extends Event = Event> {
    event?: React.ComponentType<EventProps<TEvent>>;
    eventWrapper?: React.ComponentType<EventWrapperProps<TEvent>>;
    eventContainerWrapper?: React.SFC | React.Component | React.ComponentClass | JSX.Element;
    dayWrapper?: React.SFC | React.Component | React.ComponentClass | JSX.Element;
    dateCellWrapper?: React.SFC | React.Component | React.ComponentClass | JSX.Element;
    timeSlotWrapper?: React.SFC | React.Component | React.ComponentClass | JSX.Element;
    timeGutterHeader?: React.SFC | React.Component | React.ComponentClass | JSX.Element;
    timeGutterWrapper?: React.SFC | React.Component | React.ComponentClass | JSX.Element;
    toolbar?: React.ComponentType<ToolbarProps>;
    agenda?: {
        date?: React.SFC | React.Component | React.ComponentClass | JSX.Element;
        time?: React.SFC | React.Component | React.ComponentClass | JSX.Element;
        event?: React.SFC | React.Component | React.ComponentClass | JSX.Element;
    };
    day?: {
        header?: React.SFC | React.Component | React.ComponentClass | JSX.Element;
        event?: React.SFC | React.Component | React.ComponentClass | JSX.Element;
    };
    week?: {
        header?: React.SFC | React.Component | React.ComponentClass | JSX.Element;
        event?: React.SFC | React.Component | React.ComponentClass | JSX.Element;
    };
    month?: {
        header?: React.SFC | React.Component | React.ComponentClass | JSX.Element;
        dateHeader?: React.SFC | React.Component | React.ComponentClass | JSX.Element;
        event?: React.SFC | React.Component | React.ComponentClass | JSX.Element;
    };
    /**
     * component used as a header for each column in the TimeGridHeader
     */
    header?: React.ComponentType<HeaderProps>;
}

[Muskos]

@healthycola could you create an example?

[healthycola]

it was actually added in commit #1202 . It just didn't make the cut last release unfortunately :(

[lksilva]

Try this

<DragAndDropCalendar
  onEventDrop={this.moveEvent}
  resizable={true}
  resources={resources}
  resourceIdAccessor="resourceId"
  resourceTitleAccessor="name"
  onEventResize={this.resizeEvent}
  defaultView={BigCalendar.Views.DAY}
  defaultDate={date}
  min={min}
  max={max}
  views={["day"]}
  step={interval}
  resourceHeader: (props: any) => {
      return (
        <CustomHeader
          name={props.resource.name}
          photo={props.resource.photo}
        />
      );
    },
    timeGutterHeader: () => null,
    toolbar: () => null
  }}
/>;

For me work add a custom header from resourceHeader property of DragAndDropCalendar

The result...

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[eeefg650]

Try this

<DragAndDropCalendar
  onEventDrop={this.moveEvent}
  resizable={true}
  resources={resources}
  resourceIdAccessor="resourceId"
  resourceTitleAccessor="name"
  onEventResize={this.resizeEvent}
  defaultView={BigCalendar.Views.DAY}
  defaultDate={date}
  min={min}
  max={max}
  views={["day"]}
  step={interval}
  resourceHeader: (props: any) => {
      return (
        <CustomHeader
          name={props.resource.name}
          photo={props.resource.photo}
        />
      );
    },
    timeGutterHeader: () => null,
    toolbar: () => null
  }}
/>;

For me work add a custom header from resourceHeader property of DragAndDropCalendar

The result...

Hey bro maybe you can share it on github the result of custom style code ?
it could help me a lot !!!