CODEWITHSUNDEEP
reactjscalendar
Carlos Vieira
Carlos Vieira

Reputation: 607

How can I set the start time in React Big Calendar?

I'm using this setup for react big calendar:

render() {
  return (
   <div>
     <BigCalendar
       selectable
       step={3}
       timeslots={10}
       events={eventsE}
       defaultView='week'
       onSelectEvent={event => this.onSelectEventDate(event)}
       onSelectSlot={(slotInfo) => this.onSelectSlotDate(slotInfo) }
    />
  </div>
);

I'm using this plugin http://intljusticemission.github.io/react-big-calendar/examples/index.html

But the start time is always at 12AM How can i change to start only at 8AM...and do not waste time slots.

Thanks in advance Carlos Vieira

Upvotes: 6

Views: 8892

Answers (2)

Florent Giraud
Florent Giraud

Reputation: 225

You have to set today date in state and after use.


// For react-big-calendar: "^0.27.0",

// declare 'today' inside your component
const today = new Date();

// start time 8:00am
    min={
      new Date(
        today.getFullYear(), 
        today.getMonth(), 
        today.getDate(), 
        8
      )
    }
// end time 5:00pm
   max={
     new Date(
       today.getFullYear(), 
       today.getMonth(), 
       today.getDate(), 
       17
     )
   }

Upvotes: 17

TomerMahari
TomerMahari

Reputation: 419

You need to set the 'date' prop to your request date:

    render() {
  return (
   <div>
     <BigCalendar
       selectable
       step={3}
       date={new Date(Date.now())}
       timeslots={10}
       events={eventsE}
       defaultView='week'
       onSelectEvent={event => this.onSelectEventDate(event)}
       onSelectSlot={(slotInfo) => this.onSelectSlotDate(slotInfo) }
    />
  </div>
);

anther prop you can use is 'defaultDate'.

Upvotes: 0

Related Questions