CODEWITHSUNDEEP
react-big-calendar
Hans Poo
Hans Poo

Reputation: 924

Move to day view when click on month view cell

Want to change the view programatically from month to day using state when month cell is clicked, the click event is getting captured, but isn't working:

const localizer = BigCalendar.momentLocalizer(moment);

export default class Calendario extends React.Component {
  state = {
    defaultView: "month",
    defaultDate: new Date()
  };

  renderCell = props => (
    <Card
      {...props.children.props}
      onClick={() => {
        this.handleSelect(props.value);
      }}
    >
      {props.children}
    </Card>
  );

  handleSelect = (date) => {
    this.setState({ defaultView: "day" });
  };
  render() {
    const { defaultView, defaultDate } = this.state;
    return (
      <div>
        <h4>Agenda</h4>
        <div style={{ display: "flex", height: "600px" }}>
          <BigCalendar
            components={{
              dateCellWrapper: this.renderCell
            }}
            defaultDate={defaultDate}
            defaultView={defaultView}
            localizer={localizer}
            startAccessor="start"
            endAccessor="end"
          />
        </div>
      </div>
    );
  }
}

I've looking the API docs, the most similar is onView, but it's triggered from within the library.

Upvotes: 1

Views: 1025

Answers (1)

Luciano Casanova
Luciano Casanova

Reputation: 11

You can create a custom Toolbar in which you will have access to onView 

export const CustomToolbar = ({ onView, views = ['month', 'week', 'day', 'agenda'] }) => (
  <div>
    {
      views.map(view => (
        <button
          key={view}
          onClick={() => onView(view)}
        >
          {view}
        </button>
      ))
    }
  </div>
)

<BigCalendar components={{ toolbar: CustomToolbar }} />

Upvotes: 1

Related Questions