React-big-calendar: Customize day item in month view

[Daavidaviid]

Hi,
I'd like to be able to customize day container but couldn't find how to do that yet...
I tried by supplying a dayWrapper to the components props, but it didn't seem to work.
Here's an example of what I'm willing to do, the circle I drawn are representating pictures that I'd like to be displayed for each day.

So if you have any idea that would be great thanks!

[medslt]

+1

[dokicoder]

I second that

[Daavidaviid]

I made it and made a pull request https://github.com/intljusticemission/react-big-calendar/pull/646

[tobiasandersen]

You can use the dateHeader component prop for this:

<BigCalendar
  components={{
    month: {
      dateHeader: (props) => (
        <div>Custom Date Header</div>
      )
    }
  }}
/>

[RusselFourteen]

@tobiasandersen @jquense is there any way to make Apr 12-18 like Apr 12-18, 2018? I cant figure it out. Thanks

[jquense]

Use the message props

[alansutherland]

For future readers who discovered like me that @tobiasandersen 's solution didnt work for them since it removes the date from each cell, here's my solution which allowed me to add a button to each day

````
function CustomDateHeader({ label, drilldownView, onDrillDown }) {
return (

{label}

Book Class

)
}

const Calendar = props => (

localizer={localizer}
events={events}
popup
startAccessor="start"
endAccessor="end"
components={{
month: {
dateHeader: CustomDateHeader
}
}}
/>

)

export default Calendar;
````

[hzbarkan]

Hi, this 'dateHeader' props is working great for me! But i want to know if there's any similar props for week view and day view, thanks

[pitops]

@hzb-imasine you can use header instead of dateHeader

components={{
    week: {
         header: CustomDateHeader
    }
}}

[adirzoari]

@pitops @alansutherland @hzb-imasine how to do custom header for day view?