title: access to navigate methods React-Big-Calendar and Typescript
body: <p>I am having a hard time using a custom toolbar with react-big-calendar and typescript. I am trying to access the original methods of 'next, prev' 'month, day, week' views. 
  I have extensively read... 
  <a href="https://github.com/intljusticemission/react-big-calendar/issues/623" rel="noreferrer">https://github.com/intljusticemission/react-big-calendar/issues/623</a>
  <a href="https://github.com/intljusticemission/react-big-calendar/issues/818" rel="noreferrer">https://github.com/intljusticemission/react-big-calendar/issues/818</a>
  <a href="http://intljusticemission.github.io/react-big-calendar/examples/index.html#prop-components" rel="noreferrer">http://intljusticemission.github.io/react-big-calendar/examples/index.html#prop-components</a></p>
  
  <p>The custom UI is rendering fine, without errors, Now I need access to the original methods so I can manipulate the calendar. </p>
  
  <p>The main problem is that my button is firing, but not actually navigating anything. </p>
  
  <p>Some Issues that I think is... </p>
  
  <p>-- I'm not actually using the navigateMethod like I think</p>
  
  <p>--The default date and date inside BigCalendar isn't actually changing because I'm overwriting it with the same day every time I click?</p>
  
  <p>-- I need to implement this example from their docs?</p>
  
  <pre><code>Custom views can be any React component, that implements the following interface:
  
  interface View {
    static title(date: Date, { formats: DateFormat[], culture: string?, ...props }): string
    static navigate(date: Date, action: 'PREV' | 'NEXT' | 'DATE'): Date
  }
  </code></pre>
  
  <p>Does anyone have an example I could look at???</p>
  
  <p>Here is my full source code. </p>
  
  <pre><code>import React from 'react'
  import { MainContent } from '../../../common/templates/partials'
  import BigCalendar from 'react-big-calendar'
  import ToolBar from 'react-big-calendar'
  import Icon from 'app/common/components/Icon'
  import moment from 'moment'
  const styles = require('./CalendarUI.scss')
  
  BigCalendar.momentLocalizer(moment) // or globalizeLocalizer
  
  const events = [
    {
      start: new Date(),
      end: new Date(),
      title: 'Some title',
    },
  ]
  
  class CustomToolbar extends ToolBar {
  
    render() {
      // tslint:disable-next-line:no-console
      console.log(this.props, this)
      /* tslint:disable-next-line */
      const {label, onNavigate} = this.props as any
      return (
        &lt;div className="rbc-toolbar"&gt;
          &lt;div&gt;
            {/* tslint:disable-next-line  */}
            &lt;button onClick={() =&gt; this.props.onNavigate ? onNavigate(null as any, 'PREV') : undefined}&gt;
              &lt;Icon icon="B" /&gt;
            &lt;/button&gt;
            &lt;label className="label-date"&gt;{label}&lt;/label&gt;
            {/* tslint:disable-next-line  */}
            &lt;button onClick={() =&gt; this.props.onNavigate ? onNavigate(null, 'NEXT') : undefined}&gt;
              &lt;Icon icon="A" /&gt;
            &lt;/button&gt;
          &lt;/div&gt;
  
          &lt;div&gt;
          &lt;span className="rbc-btn-group"&gt;
            &lt;button&gt;Month&lt;/button&gt;
            &lt;button&gt;Day&lt;/button&gt;
            &lt;button&gt;Week&lt;/button&gt;
          &lt;/span&gt;
  
          &lt;button className="btn btn-back"&gt;
            &lt;Icon icon="R" /&gt;
          &lt;/button&gt;
          &lt;button className="btn btn-back"&gt;
            &lt;Icon icon="meet_now" /&gt;
          &lt;/button&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      )
    }
  }
  
  const logger = (data: string) =&gt;
    // tslint:disable-next-line:no-console
    console.log(data)
  const CalendarUI = () =&gt; (
    &lt;MainContent&gt;
      &lt;div className={styles.calendarContainer}&gt;
        &lt;BigCalendar
          defaultDate={moment().toDate()}
          defaultView="month"
          events={events}
          components={{ toolbar: CustomToolbar }}
          startAccessor="startDate"
          endAccessor="endDate"
          onView={logger}
          date={moment().toDate()}
        /&gt;
      &lt;/div&gt;
    &lt;/MainContent&gt;
  )
  
  export default CalendarUI
  </code></pre>