React-big-calendar: Open specific date

Created on 10 May 2017  路  2Comments  路  Source: jquense/react-big-calendar

Hello, It's good library to manage your schedule events,
But I've got a question, can I open specific day with events by clicking some random button?

screen shot 2017-05-10 at 2 55 58 pm

For example, clicking at 12th April(at the small calendar) I need to open 12th April in ReactBigCalendar.

Thanks

Most helpful comment

@martinnov92
It really helped me) Thank you!
As you said:

<BigCalendar 
  view={view}
  onView={view => {
    this.setState({
      view,
    });
  }}
  date={new Date(moment(day).format())}
  onNavigate={(day) => {
    this.setState({
      day,
    });
 }}
/>

view - is current calendar view mode(set via setState)
onView - event called when user clicks on any view(day, month etc.)
date - current selected day
onNavigate - event called when user clicks on back/next buttons

When I click on the small calendar I fire an event:
onSelectDate = (day: *): void => { this.setState({ day, view: 'day', -> when user select a day in small calendar -> set view to 'day' }); };

All 2 comments

Hello @ErickVoodoo , I think I did this by saving the selected date to state and then pass it as a prop to big calendar and at the same time you need to change the view to "day" (view prop). Hope it helps

@martinnov92
It really helped me) Thank you!
As you said:

<BigCalendar 
  view={view}
  onView={view => {
    this.setState({
      view,
    });
  }}
  date={new Date(moment(day).format())}
  onNavigate={(day) => {
    this.setState({
      day,
    });
 }}
/>

view - is current calendar view mode(set via setState)
onView - event called when user clicks on any view(day, month etc.)
date - current selected day
onNavigate - event called when user clicks on back/next buttons

When I click on the small calendar I fire an event:
onSelectDate = (day: *): void => { this.setState({ day, view: 'day', -> when user select a day in small calendar -> set view to 'day' }); };

Was this page helpful?
0 / 5 - 0 ratings

Related issues

bionicvapourboy picture bionicvapourboy  路  3Comments

jgautsch picture jgautsch  路  3Comments

mathieusanchez picture mathieusanchez  路  4Comments

The-Oracle picture The-Oracle  路  3Comments

zhming0 picture zhming0  路  3Comments