Custom toolbar

Hi again! Im just new to react so Im kinda confuse how to work it around, anyway I read the documentation of react-big-calendar and it says that you can make custom components. In my case I need to customize the toolbar and make it like this

and my custom calendar toolbar code look like this:

import React from 'react';
import {BackIcon, NextIcon} from '../Icons/Icons';
import {ButtonGroup, Button} from 'react-bootstrap';

const CalendarToolbar = () => {
    return (
        <div className="toolbar-container">

            <div className="back-next-buttons">
                <button className="btn btn-back">
                    <BackIcon/>
                    <NextIcon/>
                </button>
                <label className='label-date'>Aug-Sept 2016</label>
            </div>

            <div className="filter-container">
                <ButtonGroup>
                    <Button className="bg-filter-off"><span className="label-filter-off">Day</span></Button>
                    <Button className="bg-filter-off"><span className="label-filter-off">Week</span></Button>
                    <Button className="bg-filter-off"><span className="label-filter-off">Month</span></Button>
                    <Button className="bg-filter-off"><span className="label-filter-off">Year</span></Button>
                </ButtonGroup>


            </div>
        </div >
    );
}

export default CalendarToolbar;

Thanks in advance!

[pixelomo]

In case anyone else needs help creating their own toolbar and found their way here, this is my code for creating custom toolbar and event components:

import React from "react"
import BigCalendar from 'react-big-calendar'
import '!style-loader!css-loader!react-big-calendar/lib/css/react-big-calendar.css'
import moment from 'moment'

export let navigate = {
    PREVIOUS: 'PREV',
    NEXT: 'NEXT',
    TODAY: 'TODAY',
    DATE: 'DATE',
}
let events = [
  {
    id: 14,
    title: 'Maths',
    start: new Date(new Date().setHours(new Date().getHours() - 3)),
    end: new Date(new Date().setHours(new Date().getHours() + 3)),
  },
  {
    id: 15,
    title: 'English',
    start: new Date(new Date().setHours(new Date().getHours() - 2)),
    end: new Date(new Date().setHours(new Date().getHours() + 2)),
  },
]

const localizer = BigCalendar.momentLocalizer(moment) 

function Event({ event }) {
    return (
        <span>
            <strong>{event.title}</strong>
            {event.desc && ':  ' + event.desc}
        </span>
    )
}

function Book({ event }) {
    return (
        <div className="rbc-day-bg">
            <button>Book Class</button>
        </div>
    )
}

class CustomToolbar extends React.Component {
    render() {
        let { localizer: { messages }, label } = this.props
        return(
            <div className="rbc-toolbar">
                <span className="rbc-btn-group">
                    <button type="button" onClick={this.navigate.bind(null, navigate.PREVIOUS)}>Prev</button>
                </span>
                <span className="rbc-toolbar-label">{label}</span>
                <span className="rbc-btn-group">
                    <button type="button" onClick={this.navigate.bind(null, navigate.NEXT)}>Next</button>
                </span>
            </div>
        )
    }
    navigate = action => {
        this.props.onNavigate(action)
    }
}

const Calendar = props => (
  <div>
    <BigCalendar
      localizer={localizer}
      events={events}
      popup
      startAccessor="start"
      endAccessor="end"
      className={ props.calendarIsOpen ? 'open' : '' } 
      components={{
        event: Event,
        toolbar: CustomToolbar,
        dateCellWrapper: Book
      }}
    />
  </div>
)

export default Calendar;

[adityay-perpetualny]

Hi alansutherland , I just saw your code it was awesome. I need one help regarding the same but it is slightly different. I want a custom component which can be hovered or clickable . This is not a toolbar oe event component. Completely new component as shown above in the screenshot( the dotted one in circle on date 17 box ) .

I tried your book example , but I am not able to pass the event data tot it.

Could you please help me in this.