Custom toolbar

[dncdrn]

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!

[dncdrn]

Hiiii!!! I have an update it worked already!!! :)))))))

These are my changes

import React, { PropTypes } from 'react';
import BigCalendar from 'react-big-calendar';
import Toolbar from 'react-big-calendar';
import events from './Events';
import moment from 'moment';
import CalendarToolbar from './CalendarToolbar';
import {BackIcon} from '../Icons/Icons';
import {ButtonGroup, Button} from 'react-bootstrap';

BigCalendar.setLocalizer(
  BigCalendar.momentLocalizer(moment)
);
function Event({ event }) {
  return (
    <span>
      <strong>
        {event.title}
      </strong>
      { event.desc && (':  ' + event.desc) }
    </span>
  )
}
function CustomToolbar() {
  return (
    <div className="toolbar-container">

      <div className="back-next-buttons">
        <button className="btn btn-back">
          <BackIcon/>
        </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 >
  )
}

let Calendar = React.createClass({
  render() {
    return (
      <BigCalendar

        culture='en-GB'
        {...this.props}
        events={events}
        defaultDate={new Date() }
        components={{
          event: Event,
          toolbar: CustomToolbar
        }}
        />
    )
  }
})
export default Calendar;

now my problem is how will I use the function/methods of your original toolbar e.g. next, back, today buttons, label of month, day, week, agenda button? Thanks in advance!

[jquense]

Take a look at the code for the included Toolbar, the Calendar injects props that you need to wire up to your buttons appropriately. thanks!

[dncdrn]

Thank you I already resolve this last night! :)

On Tue, Oct 4, 2016 at 4:04 AM, Jason Quense notifications@github.com wrote:

Take a look at the code for the included Toolbar, the Calendar injects props that you need to wire up to your buttons appropriately. thanks!

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/intljusticemission/react-big-calendar/issues/183#issuecomment-251211130, or mute the thread https://github.com/notifications/unsubscribe-auth/AUMNESJ16JCJWfBk2gZy5TPRPmb8YM5Bks5qwV_kgaJpZM4KKw0O .

[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.

[ZeeshanAhmadKhalil]

That would be great if they mention the above solution somewhere in the doc. Because it takes time to find the solution every time using react-big-calendar.

[cutterbl]

@ZeeshanAhmadKhalil I will add a link to the components prop documentation that will point to the custom toolbar example code in the repository.